HTML5 Ajax upload and form+iframe implementation of 2 ways

Say now many many projects need to use the file uploads, since has the HTML5, the upload has become super simple. HTML5 supports multiple image uploads, and supports Ajax uploads! and support the upload before the picture Preview! and support picture drag and drop upload! And it's simply using the file control to achieve! And the code is super simple!!! Forgive me this has not seen the people so excited = =, but really, there are so many advantages, want to not let people praise are difficult ah!

HTML5 Ajax Upload

The HTML5 upload implementation requires a file control and a XMLHttpRequest request. Here is an upload plugin that I used in the native JS package:

The code is as follows

function FileUpload (options) { var opts = Options | | {}; var func = function () {}; This.fileinput = Opts.fileinput | | Null This.url = Opts.url | | ''; This.filelist = []; This.onfilter = Opts.onfilter | | function (f) {return F;}; Select a file group filter method This.onselect = Opts.onselect | | Func After file selection this.onprogress = Opts.onprogress | | Func File Upload Progress this.onsuccess = Opts.onsuccess | | Func When the file was uploaded successfully This.onfailure = Opts.onfailure | | Func When the file upload fails; This.oncomplete = Opts.oncomplete | | Func When all the files are uploaded This.init (); } Fileupload.prototype = { Dealfiles:function (e) {//Get an array of files to upload (executed after user selects file) var files = E.target.files | | E.datatransfer.files; This.filelist = This.onfilter (files); for (var i = 0, file; file = This.filelist[i]; i++) {//Add unique index value File.index = i; } This.onselect (this.filelist); return this; }, Removefile:function (Filedelete) {//delete a file var arrfile = []; for (var i = 0, file; file = This.filelist[i]; i++) { if (file!= filedelete) { Arrfile.push (file); } } This.filelist = Arrfile; return this; }, Removeall:function () {//Empty file queue This.filelist = []; return this; }, Uploadfile:function () {//upload file var me = this; for (var i = 0, file; file = This.filelist[i]; i++) { (function (file) { var formData = new FormData (); var xhr = new XMLHttpRequest (); if (xhr.upload) { Xhr.upload.addEventListener ("Progress", function (e) {//crosses Me.onprogress (file, e.loaded, e.total); }, False); Xhr.onreadystatechange = function (e) {//File upload succeeded or failed if (xhr.readystate = = 4) { if (Xhr.status = = 200) { Me.onsuccess (file, xhr.responsetext); Me.removefile (file); if (!me.filelist.length) { Me.oncomplete (); Upload all finished. Execute callback } } else { Me.onfailure (file, xhr.responsetext); } } }; Start uploading Formdata.append (' file ', file); Xhr.open ("POST", Me.url, True); Xhr.send (FormData); } }) (file); } }, Init:function () { var me = this; File Selection Control Selection if (me.fileinput) { Me.fileInput.addEventListener ("Change", function (e) {me.dealfiles (e);}, False); } } };

I believe you have seen, the code appeared in the FormData, this is the magic of HTML5. With Formdata easy to realize asynchronous no refresh support preview picture of multiple file upload function. And, thankfully, many browsers have already supported HTML5.

But!!! IE9 The following version does not support Ah!!

In addition, the above method has a disadvantage, because the use of Ajax upload way, so can not support cross-domain upload, if you have to meet these two business scenarios, then try the following method, with form and iframe to achieve upload. Here's a detailed look at:

Form form Submit to IFRAME

HTML code:

The code is as follows
<iframe name= "Demoiframe" style= "Display:none" ></iframe> <form target= "Demoiframe" action= "upload.php" method= "post" enctype= "Multipart/form-data" > <input class= "filename" type= "file" name= "Filelabel" > <input type= "Submit" value= "submitted" > </form>

We click Submit and we can see the following request:

The file has been uploaded. Then, adding this upload.php interface is available and, if uploaded successfully, returns:

The code is as follows
{ "Code": "200", "Success": true, "Data": { ... } }

How do we get the return value to do the next step? Because we are uploaded to the IFRAME, we only need to listen for the IFRAME's Load event, and if we have a return value, we can get it and proceed further. See JS Code:

code is as follows
$ (' iframe ') . On (' Load ', function () {  var responsetext = $ (' iframe ') [0].contentdocument.body.textcontent;  var ResponseData = Json.parse (responsetext) | | {};  if (responsedata.issuccess = = True | | | responsedata.code = =) {  //success  } else { &N Bsp;//error   });