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

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

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

表单代码：

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

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

脚本代码：

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：提交按钮使用<button/> <input type="submit"/> 的情况下将会页面跳转，我使用的是<span/>元素：

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

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