jQuery插件ajaxFileUpload异步上传⽂件的使⽤⼼得
前⾔：
在项⽬开发中⽤到了异步⽂件上传，并返回⽂件上传的状态，由于之前使⽤的是form表单进⾏⽂件的上传，不能实现该需求，所以使⽤了ajaxfileupload.js进⾏开发。
有些⼩伙伴没有耐⼼看到最后，那就直接告诉你们结果吧，替换这个版本的ajaxfileupload.js就可以解决这个问题！
ajaxfileupload.js下载地址（这是本⼈已经修改过的，可以正常解析data）：
开发准备：
具体使⽤步骤:
1、在页⾯中引⼊ajaxfileupload.js
<!-- ⽂件上传ajax -->
<script src="../static/js/ajaxfileupload.js "></script>
2、为⽂件上传按钮添加onclick事件
<button type="button" id="uploadButton" class="btn btn-default" disabled="false"
onclick="ajaxFileUpload()">上传</button>
3、编写调⽤⽅法
function ajaxFileUpload() {
var newly_title = $("#newly_title").val();//此为传递参数，视需求编写 //核⼼部分如下： $.ajaxFileUpload({
培训iturl: "/upload?newly_title="+newly_title,//请求后台⽅法
type: 'post', //选择提交⽅式get/post
secureuri: false, //是否启⽤安全提交，默认为false
fileElementId: 'file', html中⽂件提交按钮的id
dataType: 'text', //数据提交类型：text、json、jsonp等
success: function (data) { //请求返回后对数据的处理
if(data=="success"){
$("#success").modal('show');
jquery下载文件请求$("#upload").modal('hide');
setTimeout('load()',1000);
}else{
$("#fail").modal('show');
curl 发送post请求$("#err_message").text(data);
}
}
});
}
4、使⽤中常见的错误以及解决办法
①返回data不能进⾏正常解析：
smart油耗高怎么解决如果在ajax的dataType设置为⾮text类型时，ajaxfileupload返回的data
并⾮为json格式，⽽是在json外层包裹了⼀层<pre>标签，导致不能正确解析该json。具体解决办法如下：
（修改ajaxfileupload.js源码，若不想修改可直接下载上⾯链接中的我⾃⼰使⽤的已经修改过的ajaxfileupload.js）：将ajaxfileupload.js中的：
if ( type == "json" ) { eval( "data = " + data); }
js replace用法>电脑c语言编程软件在哪打开替换为：
if ( type == "json" ){ data = jQuery.parseJSON(jQuery(data).text()); }
（直接处理前台返回的数据，利⽤正则表达式）
var reg = /(.+)<\/pre>/g;
var result = data.match(reg);
data = RegExp.$1;
②ajax请求返回后执⾏error操作（报错为）
正常操作，可ajax返回进⼊error中。有可能因为jquery版本和ajaxfileupload.js的版本兼容问题，还有⼀种原因是由于请求返回⾮json值有关。具体解决办法如下：
（版本问题，报错为：jQuery.handleError is not a function）
由于ajaxfileupload.js是在jquery1.4.2版本之前写的，Jquery之后的版本已经没有了handleError⽅法，所以可以将1.4.2版本中的该⽅法复制到该js中。
（返回⾮json格式数据问题）
解决办法参照①中即可
扩展：
ajax中的dataType中的json和jsonp类型的区别和联系：
ajaxfileupload.js下载地址（这是本⼈已经修改过的，可以正常解析data）：
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论