H5 mobile development Ajax uploads multiple Base64 format images to the server,

H5 mobile development Ajax uploads multiple Base64 format images to the server,

Let's just look at the code.

1. Upload components

 <div class="imgbox">      <input id="file" type="file" class="fileupload" accept="image/*" multiple capture="camera" @change="viewimg()"/> </div>

2. display the added Image

Viewimg ($ event) {// obtain the current input tag var currentObj = event. currentTarget; // find the img tag of the image to be previewed, and dynamically generate var img = currentObj. parentNode. children [0]; setImagePreview (currentObj, img); function setImagePreview (docObj, imgObjPreview) {if (docObj. files & docObj. files [0]) {imgObjPreview. style. display = 'block'; imgObjPreview. src = window. URL. createObjectURL (docObj. files [0]) ;}}

3. retrieve images and upload them to the server

// Var inputs = $ ("input. fileupload "); for (var I = 0; I <inputs. length; I ++) {// convert the image to base64 upload var file = inputs [I]. files; if (file [0]) {var reader = new FileReader (); reader. readAsDataURL (file [0]); reader. onload = function (e) {var event = this; console. log (event. result); $. ajax ({type: 'post', url: 'http: // 10.145.0.05/goods/addgoodsbase64', dataType: "json", data: {"base64": event. result,}, success: function (data) {console. log (data );}});}}}

Well, this is the process, and the next step will be handled by the back-end personnel.

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.