Jquery FormData文件异步上传 快速指南

Posted 星朝

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Jquery FormData文件异步上传 快速指南相关的知识,希望对你有一定的参考价值。

网站中文件的异步上传是个比较麻烦的问题,不过现在通过jquery 可以很容易的解决这个问题;

使用jquery2.1版本,较老版本不支持异步文件上传功能;


表单代码:

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

创建一个表单,里面包含一个file input 


脚本代码:

  1. function uploadFile() {  
  2.         //将表单封装为一个formData对象  
  3.         var formData = new FormData($(‘#fileUploadForm‘)[0]);  
  4.         $.ajax({  
  5.             url:‘http://127.0.0.1:8080/image/‘,  
  6.             type:‘POST‘,  
  7.             //将formData对象作为参数进行上传  
  8.             data:formData,  
  9.             contentType: false,  
  10.             processData: false,  
  11.             success:function (data) {  
  12.                 //文件上传成功后的处理  
  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.         //为提交按钮添加点击事件  
  19.         $(‘#commit‘).click(function () {  
  20.             uploadFile();  
  21.         })  
  22.     })  
[javascript] view plain copy
print?
  1. function uploadFile() {  
  2.         //将表单封装为一个formData对象  
  3.         var formData = new FormData($(‘#fileUploadForm‘)[0]);  
  4.         $.ajax({  
  5.             url:‘http://127.0.0.1:8080/image/‘,  
  6.             type:‘POST‘,  
  7.             //将formData对象作为参数进行上传  
  8.             data:formData,  
  9.             contentType: false,  
  10.             processData: false,  
  11.             success:function (data) {  
  12.                 //文件上传成功后的处理  
  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.         //为提交按钮添加点击事件  
  19.         $(‘#commit‘).click(function () {  
  20.             uploadFile();  
  21.         })  
  22.     })  


NOTE:提交按钮使用<button/> <input type="submit"/> 的情况下将会页面跳转,我使用的是<span/>元素:

<span id="commit" >提交到服务器</span>

这样进行文件上传就不会出现页面跳转,达到异步上传;





以上是关于Jquery FormData文件异步上传 快速指南的主要内容,如果未能解决你的问题,请参考以下文章

jquery 和 FormData 最简单图片异步上传

.Net之使用Jquery Ajax通过FormData对象异步提交图片文件到服务端保存并返回保存的图片路径

异步 JQUERY 文件上传

H5拖放+FormData接口+NodeJS,完整异步文件上传

(H5)FormData+AJAX+SpringMVC跨域异步上传文件

通过jQuery Ajax使用FormData对象上传文件