Example Analysis of html5 Mobile developer Ajax uploading multiple Base64 format Images to the Server

This article will explain in detail the example analysis of html5 mobile development Ajax uploading multiple Base64 format images to the server. The editor thinks it is very practical, so I share it with you for reference. I hope you can get something after reading this article.

1. Upload components

2. Show the added picture

Viewimg ($event) {/ / get the current input tag var currentObj = event.currentTarget; / / find the image img tag to preview, or dynamically generate var img = currentObj [XSS _ clean] .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. Get the picture and upload it to the server

/ / single picture upload var inputs = $("input.fileupload"); for (var I = 0; I < inputs.length; iTunes +) {/ / Image transfer 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);});}

All right, this is the process, and the rest will be left to the students at the back end.

On "html5 mobile development Ajax upload multiple Base64 format images to the server example analysis" this article shares here, I hope the above content can be of some help to you, so that you can learn more knowledge, if you think the article is good, please share it out for more people to see.