Html5+canvas+jquery Call Mobile photo function implementation Image upload (ii)

The previous article only spoke about the foreground operation, which is specifically related to Java background processing. The foreground via Ajax submits the BASE64 encoded image data to the Java backend, and then the Java side receives processing. The image data information is Base64 decoded, then the picture data information is uploaded to the server for saving, and the path address of the picture is stored in the database.

You can click this link to view the processing of local compressed uploads in the foreground:

Html5+canvas+jquery call photo function to achieve image upload (a)

OK, the nonsense is not much to say. Paste the code directly.

1, the front desk JS code:

$.ajax ({async:false,//is asynchronous cache:false,//whether to use cached type: "POST", Data:{filedata:filedata,licencename:licencename,cust _tax_code:cust_tax_code,phonenum:phonenum,state_id:state_id},datatype: "JSON", Timeout:1000,contenttype: ' application/x-www-form-urlencoded; Charset=utf-8 ', url: $ (' #ctx '). Val () + "Customercheckservlet?action=uploadlicence", success:function (Result) { Console.log (Result), if (result = = True) {alert (' Success upload~~~ ');} else if (result = = False) {alert (' Error upload~~~ ');}},error:function () {alert ("Error linking~");}});

2. Background Java code

/** * Document Upload * @param request * @param response * @throws ioexception */public void uploadlicence (HttpServletRequest reques T,httpservletresponse response) throws Ioexception{log.info ("=====================uploadlicence");d f = new SimpleDateFormat ("Yyyy-mm-dd"); String Cust_tax_code = Request.getparameter ("Cust_tax_code"); String phonenum = Request.getparameter ("Phonenum"); String licencename = Request.getparameter ("Licencename"); String fileData = Request.getparameter ("FileData"),//BASE64 encoded picture data information, Base64 decoding byte array string imgpath = UploadFile ( Filedata,licenename);//File upload operation, upload to server storage (here is uploaded to the server project directory to save) Boolean result = false;// Finally upload the sign of success or not custcheckinfo = new Customercheckinfo (); Custcheckinfo.setcust_tax_code (Cust_tax_code); Custcheckinfo.setphonenum (Phonenum); Custcheckinfo.setupdate_time (Df.format (New Date ())); Boolean save_flag = Customerservice.saveregistcertinfo (custcheckinfo);//save path//Infer whether the path in the database exists, and whether the file in the directory exists (the flag to infer whether the upload succeeded) Boolean Is_ Success = Issuccessupload (Licencename, Cust_tax_code, phonenum); if (Save_flag && is_success) {result = true;} If the document upload succeeds, it is recorded in the record table if (result) {Staterecordinfo record = new Staterecordinfo (); Record.setcust_tax_code (Cust_tax_code ); Record.setphonenum (Phonenum); record.setstate_id (state_id); Savestaterecord (record);//Run state save operation} System.out.println ("===result:" +result); PrintWriter pw = Response.getwriter ();p w.print (Result);p w.close ();

/** * File Upload * @param fileData * @param fileName * @return */public string uploadfile (String filedata,string fileName) {//In its own Project to construct a directory for user photos string imgpath = This.getservletcontext (). Getrealpath ("/uploads/");//Assuming this directory does not exist create a file F = new File (Imgpath), if (!f.exists ()) {F.mkdir ();} Stitching file name, does not exist create Imgpath = Imgpath + "/" + FileName + ". jpg", f = new file (Imgpath), if (!f.exists ()) {F.mkdir ();} Log.info ("= = =" File saved location: "+imgpath);//use BASE64 to decode image file data Base64decoder decoder = new Base64decoder (); try {// Decrypt the image data into a byte array via Base64 decryption byte[] bytes = Decoder.decodebuffer (fileData);//construct byte array input stream Bytearrayinputstream Bais = new Bytearrayinputstream (bytes);//Read data from the input stream bufferedimage bi = imageio.read (Bais);//write data information into the image file Imageio.write (bi, "JPG", f);//regardless of the output format picture. There is no need to modify Bais.close ();} catch (IOException e) {log.error ("e:{}", E);} return Imgpath;}

/** * inferred if the upload was successful * @return */public boolean issuccessupload (String licencename,string cust_tax_code,string phonenum) { Boolean flag = false; String Licencepath = "";//the path saved after the upload of the certificate image custcheckinfo = Customerservice.getcustomercheckinfo (Cust_tax_code, Phonenum); Licencepath = Custcheckinfo.gettax_regist_cert ();//infer that the credential path is not empty and exists in the directory where the upload resides. Indicates that the upload succeeded file F = new file (Licencepath), if (Licencepath.length () >0 && f.exists ()) {flag = true;} return flag;}

All right, it's all over here. This is the Html5+jquery+canvas call phone camera function to achieve the image upload all the implementation process, always feel that their ideas are somewhat chaotic. Well, make progress slowly!

Html5+canvas+jquery Call Mobile photo function implementation Image upload (ii)