A Quick Guide to Asynchronous Upload of Jquery FormData Files

The asynchronous upload of files in the website is a troublesome problem, but now this problem can be easily solved through jquery;

Use jquery2.1 version, older versions do not support asynchronous file upload function;

Form code:

[html] view plain copy

print ?

1. <formid="fileUploadForm">   
2.     <inputtype="file"name="file"class="imageUpload"/>     
3.     < span id = "commit" > Commit to server </ span >   
4. </form>  

[html] view plain copy

print ?

1. <formid="fileUploadForm">   
2.     <inputtype="file"name="file"class="imageUpload"/>     
3.     < span id = "commit" > Commit to server </ span >   
4. </form>  

<form id="fileUploadForm">    <input type="file" name="file" class="imageUpload"/>    <span id="commit">提交到服务器</span></form>

Create a form with a file input 

Script code:

[javascript] view plain copy

print ?

1. function uploadFile() {  
2.         // Encapsulate the form as a formData object  
3.         var  formData =  new  FormData($( '#fileUploadForm' )[0]);  
4.         $.ajax({  
5.             url:'http://127.0.0.1:8080/image/',  
6.             type:'POST',  
7.             // upload the formData object as a parameter  
8.             data:formData,  
9.             contentType: false,  
10.             processData: false,  
11.             success:function (data) {  
12.                 //Processing after the file is uploaded successfully  
13.                 $('#showUploadContent').append('<div>name:'+data.name+'<br/>url:'+data.url+'<img src="http://192.168.1.107/'+data.url+'"></div>')  
14.             }  
15.         })  
16.     }  
17.     $(function () {  
18.         //Add click event for submit button  
19.         $('#commit').click(function () {  
20.             uploadFile();  
21.         })  
22.     })  

[javascript] view plain copy

print ?

1. function uploadFile() {  
2.         // Encapsulate the form as a formData object  
3.         var  formData =  new  FormData($( '#fileUploadForm' )[0]);  
4.         $.ajax({  
5.             url:'http://127.0.0.1:8080/image/',  
6.             type:'POST',  
7.             // upload the formData object as a parameter  
8.             data:formData,  
9.             contentType: false,  
10.             processData: false,  
11.             success:function (data) {  
12.                 //Processing after the file is uploaded successfully  
13.                 $('#showUploadContent').append('<div>name:'+data.name+'<br/>url:'+data.url+'<img src="http://192.168.1.107/'+data.url+'"></div>')  
14.             }  
15.         })  
16.     }  
17.     $(function () {  
18.         //Add click event for submit button  
19.         $('#commit').click(function () {  
20.             uploadFile();  
21.         })  
22.     })  

function uploadFile() {        //将表单封装为一个formData对象        var formData = new FormData($('#fileUploadForm')[0]);        $.ajax({            url:'http://127.0.0.1:8080/image/',            type:'POST',            //将formData对象作为参数进行上传            data:formData,            contentType: false,            processData: false,            success:function (data) {                //文件上传成功后的处理                $('#showUploadContent').append('<div>name:'+data.name+'<br/>url:'+data.url+'<img src="http://192.168.1.107/'+data.url+'"></div>')            }        })    }    $(function () {        //为提交按钮添加点击事件        $('#commit').click(function () {            uploadFile();        })    })

NOTE: When the submit button uses <button/> <input type="submit"/>, the page will jump, I use the <span/> element:

<span id="commit" >Commit to server</span>

In this way, there will be no page jumps when uploading files, and asynchronous uploads will be achieved;