About Ajax multipart upload file instance ~

Originally intended to write a bit more diligent, who knows the recent good busy Ah, busy with the application of things, here suddenly want to mention their own course

Oneself is now a junior dog, high school three years is playing past, on a province in the ordinary can no longer ordinary two. But in the university is still a diligent, freshman in the students will stir the water, a big start in the school Network Center inside work, network maintenance is work, programming is interested in, basically every day network Center bedroom 2.1 line, so said still calculate on diligence. But now I understand, a lot of things are not diligent, the method is not right, really is less. Before you learn things are blind Daoteng, reading, watching video, take notes, write demo. It seems to be sparse, but the disadvantage lies in being too ambitious.

Think of a fun thing, once the network center inside need to build a forum, I was caught on the writing, intends to write an online communication. Good idea, but I didn't know the web socket at the time ... How did I achieve it, not using Ajax all the while. Success is also successful, just think it is not very worthwhile, Ajax can certainly be a certain simulation of the web real-time, but will try to do, really want to do chat room, write tired, others use also inconvenient, to raise a chestnut is to judge others in the line.

This incident because the recruitment review basis, found themselves too many too many not strong place, the former self too frivolous, now melted down re-build, anything try to try their own, add some ideas, and then published. It's like this Ajax multipart upload file.

——————————————————————————————————————————————————————————————————————————————

Return to the point, implement the Declaration, UI no landscaping, aesthetic obsessive-compulsive I'm sorry for you ~

HTML Part Code

<DivID= "Wrap">        <formMethod= "POST"Action= "./test.php"enctype= "Multipart/form-data">            <inputtype= "File"name= "File"ID= "F"></input>        </form></Div>

The simplest layout, is to go around an input type= ' file ' space, because everything is simplified, so there is no multiple= "true"

1Window.onload =function(){2     varofile = document.getElementById (' F ');3     4     varFilesplitsize = 1024 * 1024; File Fragment size 1M5     6Ofile.addeventlistener (' Change ',function(e) {7         varFiles = This. Files;8         9         varFile = Files[0]; Get the File ObjectTen          One         varSize =File.size, AStart = 0; -  -         varFunupload =function(){ the  -             vardata =NewFormData (); Simulating forms with Formdata objects -              -             //data.append (' name ', encodeURIComponent (file.name)); Ajax if the Get method must be encoded and re-passed, but post I do not need to test it. +Data.append (' name ', file.name); -Data.append (' file ', File.slice (start, start +filesplitsize)); Core cut file files, explained in detail below ① +Data.append (' Start ', ' + start '); A              at             varXHR =NewXMLHttpRequest (); XMLHttpRequest 2.0 Objects -              -Xhr.open (' Post ', './test.php ',true); -             //xhr.setrequestheader (' Content-type ', ' multipart/form-data '); Don't add this sentence here, there's a reason ② -Xhr.setrequestheader (' X_requested_with ', Location.href.split ("/") [3].replace (/[^a-z]+/g, ' $ '))); - xhr.send (data); in              -Xhr.onreadystatechange =function(){ to                 if(Xhr.readystate = = 4){ +                     if(Xhr.status = = 200){ -                         if(Start + filesplitsize >=size) { the alert (xhr.responsetext); *}Else{ $Alert (' One upload succeeded ');Panax NotoginsengStart + =filesplitsize; - funupload (); the                         } +                     } A                 } the             } +         } - funupload (); $          $},false); -}

See ①

The file object inherits the Blob object, do not know the two objects of their own Baidu I will not explain, forget or stick a Picture it ~

In fact, the result of File.slice (start, start + filesplitsize) is a Blob object that passes it as a file of the simulated form to the server side

Look at ② again.

This must be noted that two graphs can explain why.

If you add Xhr.setrequestheader (' Content-type ', ' multipart/form-data ');

Then upload the file will fail, missing boundary this delimiter

Let's see the right way again.

I feel this is a pit. Because I planted in once. Want others to notice

End of the front section, the following is PHP, very simple

Define(' ROOT ', '. '));$filename= ROOT. ‘/‘ .Iconv(' Utf-8 ', ' GBK ',$_post[' Name ']); Transcoding here to pay attention to, otherwise the Chinese name word system will be garbled ①if($_post[' start '] = = 0){        $fp=fopen($filename, "w+"); file_put_contents($filename,file_get_contents($_files[$name[' Tmp_name ']),file_append); fclose($fp); }Else{        file_put_contents($filename,file_get_contents($_files[$name[' Tmp_name ']),file_append); }Echo $filename;

See ①

Usually our PHP script file is either Unicode (UTF8) or ANSI (GBK), GBK compatible gb2312

In the case of Unicode encoding (UTF8), the Chinese in the code and the system are two different encodings, and when dealing with the system, such as the creation of Chinese names of files, folders, etc., need to convert the encoding.

In the case of ANSI encoding (GBK, gb2312), the Chinese in the code and the system is the system encoding, do not need to convert the encoding.

Conclusion: In fact, this segment of the transmission can be extended or very high ah, such as the continuation of the breakpoint and so on ~ I am not here to demonstrate ~

Recently in a good read ECMA5, correct a bit of information sent out early ~

About Ajax multipart upload file instance ~