Jquery formdata file Asynchronous Upload Quick guide

The asynchronous uploading of files in the website is a troublesome problem, but now it is easy to solve this problem by jquery.

Using the jquery2.1 version, the older version does not support the asynchronous file upload function;

Form code:

[HTML]View PlainCopyPrint?

2. < form id="fileuploadform">
4. < input type="file " name="file" class = "Imageupload" />   
6. < span id="commit"> submit to server </ Span>
8. </ form >   

[HTML]View PlainCopyPrint?

2. < form id="fileuploadform">
4. < input type="file " name="file" class = "Imageupload" />   
6. < span id="commit"> submit to server </ Span>
8. </ form >   

<form id= "Fileuploadform" >    <input type= "file" name= "file" class= "Imageupload"/>    <span id= " Commit "> Submit to Server </span></form>

Create a form that contains a file input

Script code:

[JavaScript]View PlainCopyPrint?

2. function UploadFile () {
4. //encapsulates the form as a Formdata object   
6. var FormData = New  FormData ($ (' #fileUploadForm ') [0]);
8. $.ajax ({
10. URL:' http://127.0.0.1:8080/image/',
12. Type:' POST ',
14. //Upload the Formdata object as a parameter   
16. Data:formdata,
18. ContentType: false,
20. ProcessData: false,
22. Success:function (data) {
24. //File upload after successful processing   
26. $ (' #showUploadContent '). Append ('<div>name: '+data.name+' <br/ >url: '+data.url+' +data.url+'" >< /div> ')
28. }
30. })
32. }
34. $ (function () {
36. //Add a click event for the Submit button   
38. $ (' #commit '). Click (function () {
40. UploadFile ();
42. })
44. })

[JavaScript]View PlainCopyPrint?

2. function UploadFile () {
4. //encapsulates the form as a Formdata object   
6. var FormData = New  FormData ($ (' #fileUploadForm ') [0]);
8. $.ajax ({
10. URL:' http://127.0.0.1:8080/image/',
12. Type:' POST ',
14. //Upload the Formdata object as a parameter   
16. Data:formdata,
18. ContentType: false,
20. ProcessData: false,
22. Success:function (data) {
24. //File upload after successful processing   
26. $ (' #showUploadContent '). Append ('<div>name: '+data.name+' <br />url: '+data.url+' +data.url+' "></div>")
28. }
30. })
32. }
34. $ (function () {
36. //Add a click event for the Submit button   
38. $ (' #commit '). Click (function () {
40. UploadFile ();
42. })
44. })

function UploadFile () {        //encapsulates the form as a FormData object        var formData = new FormData ($ (' #fileUploadForm ') [0]);        $.ajax ({            URL: ' http://127.0.0.1:8080/image/',            type: ' POST ',            //FormData object is uploaded as a parameter            data:formdata,            Contenttype:false,            processdata:false,            success:function (data) {                //File upload after successful processing                $ (' # Showuploadcontent '). Append (' <div>name: ' +data.name+ ' <br/>url: ' +data.url+ ' </div> ')}}        )    }    $ (function () {        //Add click event for Submit button        $ (' #commit '). Click (function () {            uploadfile ();        })    })

Note: The Submit button uses <button/> <input type= "Submit"/> The case will be the page jumps, I use the <span/> element:

<span id= "Commit" > Submit to Server </span>

So that the file upload will not appear page jump, to achieve asynchronous upload;

Jquery formdata file Asynchronous Upload Quick guide