Implementation principle and design of Atitit.ajax upload file

implementation principle and design of Atitit.ajax upload file

1. Three big puzzles to upload files 1

1.1. Local Preview 1

1.2. No Refresh 1

1.3. Progress Display 1

2. Traditional HTML4 + Ajax is unable to directly implement the upload file 1

2.1. Traditional way of implementation IFRAME 2

2.2. HTML5 transcoding base64 3

2.3. Other plug-in FLASH Implementation principle 3

3. Implementation principle of upload progress 3

3.1. The use of Ajax combined with the service side of the progress of the return, more trouble 4

4. Resolution of local Preview 4

4.1. Uploading files with HTML5 4

5. Be able to use HTML5. upload files with Jquery,ajax, not only this. You can do file validation (name, size,MIME type) or use the HTML5 Progress tag (or div) to process the progress event. 5

5.1. Uploading the Framework Plugin 7

6. References 7

1. Upload files of the three major problems 1.1. Local preview 1.2. No refresh 1.3. Progress display

2. of traditionalHTML4 +Ajax is notdirectlyImplementing upload Files

. both Ajax and background communication are passed through a string

Due to the browser security perspective, the new browser basically prohibits the use of JS in the client directly read/write/display client files.
And some browsers just get the name of the file, and don't agree to get the full file path.

author ::  Old Wow's claws Attilax Ayron. Email:[email protected]

reprint Please indicate source: Http://blog.csdn.net/attilax

originally Ajax is not supported to upload files, but can be achieved through the IFRAME technology simulation, asynchronous submission. The principle is actually to use a hidden iframe subwindow to point the target of the submitted form to the hidden window. At the time of submission, the browser's head will also appear loading information, but the page is not whatever refresh, reluctantly implemented Ajax asynchronous upload.  

The principle of a plugin is to construct a form and then submit the entire formby POST. In the background. By passing the Form. Get httppostedfile. In the acquisition of the picture information, so that the background upload pictures.

2.1. Traditional way of implementation iframe

In this paper, the implementation of the file upload is no page refresh, can be said to be an "Ajax-like" approach.
Before you start, say something unrelated, in fact, before the advent of Ajax. Web applications can also be non-refreshed, mostly through the IFRAME. Of course, after the advent of Ajax, people swarm to the Ajax camp. The IFrame is no more.

But using an IFRAME to implement a non-flush upload file is really a good choice. Ps:ajax technology can basically be said to be brought up by Google Company. But less Gmail upload files with an IFRAME, so that using an IFrame to upload files is the best choice.

I am here to use the technology is JSP, in fact, asp,php is also a

2.2. HTML5transcodingBase64

To upload

.

2.3. Other pluginsFLASHthe implementation principle

Now the so-called more mature Ajax uploads, the functional core is not Ajax
1. Through an IFRAME, it is controlled by Ajax (rather than JS). The core is the form in the IFRAME
2. Through specialized components, such as uploadify, the core is in fact flash. Just made a jquery plugin. In fact, there are special flash upload components, such as SWFUpload, its JS code is self-brought.

1.iframe principle is simple, compatibility strong, their own write js+iframe can easily achieve no refresh upload
2. Flash-based, today is a trend, and there is a real-time progress bar display. However, the client browser must have the Flash plugin installed (although most browsers are installed) and the Flash version number is upgraded May cause the upload function to fail. Remember that the flash from 9.x to 10.x when the problem arises. In addition, in Firefox, Flash-based upload, assuming that the background needs to read the user's Session/cookie, basically error, This is a bug between Flash and Firefox that is not resolved at this moment.

3. Implementation principle of upload progress

For a long time, developers have been plagued by this, and most have used flash as a solution to the problem. But Flash is not a panacea. Because of the Flash version number, the problem of the separatist is sometimes a nightmare. Some sites use the enctype=multipart/form-data attribute of the form tag . However, this property requires that the server make a special setting to display the running progress. And it's more complicated and complex, which means that easy is wrong, which is not what we want.

3.1. Using Ajaxcombined with the service side of the progress of the return, more trouble

JS cannot calculate the progress directly.

4. Resolution of Local previews

HTML4, Some servers can get to the file full path via JS. Ability to implement local previews. Otherwise. To pass the plulgin Way:

, we will use HTML5 's FileReader to now preview the file on the browser

4.1.uploading files with HTML5

in the HTML5 standard, the XMLHttpRequest object is once again defined, known as the " XMLHttpRequest Level 2 ", which includes the following 5 new features:

§  supports uploading and downloading byte streams, such as files, BLOBs, and form data

§  added progress events in uploads and downloads

§  support for cross-domain requests

§  consent to send anonymous requests (that is, the referer portion of HTTP is not sent)

§  agree to set timeout for request

In this tutorial, we focus primarily on the first and second features, especially the second one--it can provide the upload progress we want. Different from the previous scenario. This method does not require the server to make a special setting, so we look at the tutorial on the line to try.

What we've shown above is what we can achieve:

§  displays uploaded file information, such as file name, type, size

§  a progress bar that can show real progress

§  speed of upload

§  estimation of the remaining time

§  The amount of data that has been uploaded

§  the response returned by the server after the upload has ended

5. Able to useHTML5, withJquery,ajaximplement file Upload. Not only that, you can do file validation (name, size. MIMEtype) or useHTML5the Progress label (orDiv) to process the progress event.

HTML5 has conquered one of the puzzles of Web authoring: Uploading files with upload progress.

Recently I also do file upload, I do not want to use flash, IFRAME or other plug-ins, after some research, I came up with a solution.

Html:

1 2 3 4 5

<form enctype="Multipart/form-data"> <input name="file" type="file" /> <input type="button" value="Upload" /> </form> <progress></progress>

First, you can do some validation. For example, the onchange event of a file:

1 2 3 4 5 6 7

$ (). Change (function () {     var file = this . files[0];     name = file.name;     size = file.size;     type = file.type;     //your validation });

button click to trigger Ajax:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21st 22 23 24

$ (': Button '). Click (function () { var formData = New formData ($ (' form ') [0]); $.ajax ({ URL: ' upload.php ', //server script to process data Type: ' POST ', Xhr:function () { //custom XHR MYXHR = $.AJAXSETTINGS.XHR (); if (Myxhr.upload) { //Check if upload property exists MyXhr.upload.addEventListener (' Progress ', progresshandlingfunction, false); //For handling the progress of the upload } return myxhr; }, //ajax Events Beforesend:beforesendhandler, Success:completehandler, Error:errorhandler, //form data Data:formdata, //options to-tell JQuery not to process data or worry about Content-type Cache: false, ContentType: false, ProcessData: false }); });

Processing progress:

1 2 3 4 5

function Progresshandlingfunction (e) { if (e.lengthcomputable) { $ (' progress '). attr ({value:e.loaded,max:e.total}); } }

HTML5 file upload is easy, but must be performed in a browser that supports HTML5.

5.1. Upload the Framework Plugin

Jquery.form.js ".

6. References

Ajax + JSP Implementation of asynchronous file upload -Sean 's Blog blog - netease blogs . htm

jquery Asynchronous upload file -jquery learning - Program Ape Blog . htm

Jquery ajaxsubmit upload picture Implementation code _jquery_ script Home . htm

(iframe mode)ajax No refresh upload image -Zhangchun- Blog Park . htm

HTML5 application file Upload - Xiaomi's column - Blog channel -CSDN.NET.htm

HTML5 application file Upload - Xiaomi's column - Blog channel -CSDN.NET.htm

Implementation principle and design of Atitit.ajax upload file