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. Use Ajax to combine the service side of the progress of the return, compare the trouble 4

4. Resolution of local Preview 4

4.1. Uploading files with HTML5 4

5. Can use HTML5, with Jquery,ajax to achieve file upload, not only that, you can do file verification (name, size,MIME type) or use the HTML5 Progress tag (or div) processes the progress event. 5

5.1. Uploading the Framework Plugin 7

6. Reference 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

Because from the browser security point of view, the new browser basically prohibits the client through JS directly read/write/display client files.
And some browsers can only get the file name, not the full file path is allowed.

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 through the IFRAME technology simulation implementation, asynchronous commit, the principle is actually using a hidden IFrame subform, the submitted form of the target to point to the hidden form, at the time of submission, The browser's head will also appear loading information, but the page does not have any 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 obtaining 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 starting to say a few words, in fact, before the advent of Ajax, Web applications can also be non-refreshing, then mostly through the IFRAME to do this. Of course, after the advent of Ajax, people swarm to the Ajax camp, the IFrame is no more. But it's really a good choice to use an IFrame to upload files without a flush. Ps:ajax technology can basically be said to be brought up by Google, but less gmail in the uploading of files or 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 actually flash. Just made a jquery plugin. In fact, there is a 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, now is the trend, and there is a real-time progress bar display. However, the client browser must have the Flash plugin installed (although most browsers are already installed), and when the Flash version is upgraded, May cause the upload function to fail. Remember that this problem occurs when the Flash is upgraded from 9.x to 10.x. In addition, in Firefox, Flash-based upload, if the background needs to read the user's Session/cookie, basically error, This is a bug that is currently unresolved between Flash and Firefox.

3. Implementation principle of upload progress

For a long time, developers have been distressed, most to solve this problem using flash as a solution, but Flash is not a panacea, because the flash version, the problem of the separatist sometimes become a nightmare. Some sites use the Enctype=multipart/form-data attribute of the form tag , but this property requires the server to make a special setting to show progress. And it's complicated and complicated, which means it's easy to make mistakes, 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 be obtained by JS to the full path of the file, you can implement local preview, otherwise, through the plulgin Way.

, we'll use HTML5 's filereader to implement a preview of the file on the browser

4.1.uploading files with HTML5

in the HTML5 standard, the XMLHttpRequest object is redefined and is referred to as " XMLHttpRequest Level 2 ", which contains the following 5 new features:

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

§  increased progress events in uploads and downloads

§  support for cross-domain requests

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

§  allow set timeout for request

In this tutorial, we focus primarily on the first and second features, especially the second one, which provides the upload progress that we want. Unlike the previous scenario, this scenario does not require the server to make special settings, so you can try it out while you watch the tutorial.

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

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

§  a progress bar that shows real progress

§  speed of upload

§  estimation of the remaining time

§  The amount of data that has been uploaded

§  response returned by the server after the upload has ended

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

HTML5 solves a problem with previous Web page 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, such as the onchange event for 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 uploads are simple, but must be run in a browser that supports HTML5.

5.1. Upload the Framework Plugin

Jquery.form.js ".

6. Reference

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

jquery Asynchronous upload file -jquery learning - Programmer's 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

Copyright NOTICE: This article for Bo Master original article, without Bo Master permission not reproduced.

Implementation principle and design of Atitit.ajax upload file