The understanding of Ajax Connection ~ For Mao can not upload files!!!

Recently done to set up the time needed to upload the image of the function, but my bi set all the transmission is based on the request of Ajax, Baidu a circle found TMD actually said Ajax can't upload files!! I was not happy at that time, ah, that other people are using black technology?! Again to online Daniel told that with a plug-in jquery can be completed, Baidu a bit originally called--ajaxfileupload.js

What a ghost! (╯‵-′) ╯︵┴─┴ for Mao to use plug-ins, come to ~ajax to talk, you can not upload files for Mao?

How Ajax is implemented I think it's clear to all of you, first get a reference to the XMLHttpRequest object instance, and you can create a new instance of the XMLHttpRequest. It then tells the XMLHttpRequest object that the function handles the change of the state of the XMLHttpRequest object. To do this, the object's The onReadyStateChange property is set to a pointer to JavaScript. Then specify the Request property. Open () of the XMLHttpRequest object METHOD specifies the request that will be sent. Finally, the request is sent to the server. The Send () method of the XMLHttpRequest object sends the request to the target resource. Here are some of my predecessors in the blog to find pictures, so more intuitive, thank you ~

Property Ajax people are certainly not unfamiliar with the XMLHttpRequest object, degrees Niang told me that the core of Ajax is this object, then we will see how the XMLHttpRequest object is how to upload data it ~

//let's start by creating an object .varxmlHttp; functioncreatexmlhttprequest () {if(window. ActiveXObject) {xmlHttp=NewActiveXObject ("Microsoft.XMLHTTP"); }    Else if(window. XMLHttpRequest) {xmlHttp=NewXMLHttpRequest (); }    }//then we define the method of sending the requestfunctionAddnumber () {createxmlhttprequest (); varUrl= "addhandler.ashx?num1=" +document.getelementbyid ("Num1"). value+ "&num2=" +document.getelementbyid ("n Um2 "). Value; Xmlhttp.open ("GET", URL,true); Xmlhttp.onreadystatechange=Showresult; Xmlhttp.send (NULL);}

Of course, Ajax has a lot to say, but today it's purely about how data is sent to the background in Ajax. Read many of the predecessors of the blog and the document said that in fact, Ajax is sent by the character type of the object, then it is very good to understand why you can not upload a file so binary things ~ comparison can not turn binary into a string to send it ... But also see that now HTML5 can be native upload files, but not all browsers are supported AH ~ that is not a thorough solution to the bottom ~

Since can not upload binary files, that before the artifact--ajaxfileupload.js how to complete this seemingly "impossible" task?

Open Ajaxfileupload.js will be very clear to understand the inside said ~ This quote a predecessor's blog http://blog.csdn.net/it_man/article/details/ 43800957 in this there is a very detailed description of this JS, plainly ~ The original artifact is not through the way of Ajax upload ah ~ In fact, the principle of this plug-in is the dynamic generation of a hidden iframe to submit data, after the completion of the data submitted quietly deleted, But in my actual use found this plugin can only upload a file amount, for many file upload needs of me very disharmony amount (╯‵-′) ╯︵┴─┴

So let's transform the plugin. Why only upload one at a time? Because the author takes only one element ID at a time in the plugin, let's just let it take a few more IDs at a time ~

//var oldelement = jQuery (' # ' + fileelementid);//var newelement = jQuery (oldelement). Clone ();//jQuery (oldelement). attr (' id ', fileId);//jQuery (oldelement). before (newelement);//jQuery (oldelement). AppendTo (form); if(typeof(fileelementid) = = ' String ') {Fileelementid=[Fileelementid];}  for(varIinchFileelementid) {         varOldelement = JQuery (' # ' +Fileelementid[i]); varNewelement =jQuery (oldelement). Clone (); JQuery (oldelement). attr (' ID ', fileId);          JQuery (Oldelement). before (newelement); JQuery (oldelement). AppendTo (form); }

The following is my comment out of the place is the author originally wrote, and I changed from the following is the first to determine whether the value of the descendant is a string, if it is a string then continue to follow the previous way, and when uploading multiple files through the loop to take out the addition, so that both maintain the principle of writing, It is also compatible with multiple ID descendants.

Fileelementid: ' FileID ',// This is the original method of use, one-time descendant of a value fileelementid:[' file1 ', ' file2 ', ' file3 ', // This is the new notation, the form of an array

This completes our demand ~ Then today's record is here ~ actually these are already rotten street things, many places have explained, I recorded here is not just how to use, and I tread the pit of this process, how to think, how to think of solutions ~o (╯-╰) O hope to be as early as these predecessors found early treatment ~

The understanding of Ajax Connection ~ For Mao can not upload files!!!