jquery $.ajax异步上传文件

解决方案:利用FormData对象,我们可以通过JavaScript用一些键值对来模拟一系列表单控件,我们还可以使用XMLHttpRequest的send()方法来异步的提交这个”表单”.比起普通的ajax, 使用FormData的最大优点就是我们可以异步上传一个二进制文件.

下面以导入excel文件为例,怎么把这个excel文件异步提交

1》  html代码

<form method=’post’ target=”uploadframe” enctype=”multipart/form-data” id=”import_form” class=”tableform”>
<div class=”division”>
<table border=”0″ cellspacing=”0″ class=”gridlist” cellpadding=”0″>
<tr>
<td style=’width:100px;height:30px;’>导入文件:</td>
<td style=’text-align:left;’> <input type=’file’ name=’import_file’ id=’ImportType’/></td>
</tr>
</table>
</div>
<div class=”table-action”>
<{button label=$___desktop=”导入”|t:’desktop’ id=”ImportBtn” type=”button”}>
</div>
<div style=”text-align:center;overflow-y:auto;” class=’tips’>

</div>
</form>

<script type=”text/javascript” src=”/public/app/webpos/statics/pc/js/jquery-1.9.1.js”></script>
<script>
jQuery(document).ready(function(){
jQuery(“#ImportBtn”).click(function(){
var domForm = jQuery(‘#import_form’)[0];
//将form对象直接作为参数 new FormData对象
var formData = new FormData(domForm);
jQuery.ajax({
url:’/index.php/shopadmin/index.php?app=b2c&ctl=admin_purchase_price&act=import_price’,
type: “POST”,
dataType:”json”,
data: formData,
processData: false, // 告诉jQuery不要去处理发送的数据
contentType: false, // / 告诉jQuery不要去设置Content-Type请求头
//这是关键 获取原生的xhr对象 做以前做的所有事情

beforeSend:function(){
console.log("正在进行,请稍候");
},

xhr: function(){
var xhr = jQuery.ajaxSettings.xhr();
xhr.upload.onload = function (){
}
xhr.upload.onprogress = function (ev) {

if(ev.lengthComputable) {
var percent = 100 * ev.loaded/ev.total;
}
}
return xhr;
},
success:function(data){

jQuery(‘.tips’).html(data.msg);
}
});

});