ajaxfileupload控件用户上传文件的坑

前端之家收集整理的这篇文章主要介绍了ajaxfileupload控件用户上传文件的坑前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

ajaxfileupload.js是一个很方便的上传文件的控件,使用也简单,结合jquery使用

$.ajaxFileUpload({
"url": "${context}/manage/doctor/addDoctor.htm?doctorName=" + doctorName
+ "&doctorTitle=" + doctorTitle + "&doctorId=" + doctorId,
"secureuri": false,
"fileElementId": "fileToUpload",
"dataType": "json",
"success": function (data,status) {
if (data.errorCode == 0) {
alert("保存成功");
} else {

}
},
"error": function (data,status,e) {
alert(data.message + " error: " + e);
}
});

fileElementId 就是你HTML代码中 <input type="file" id="***">中的ID

需要注意的是,如果你需要的返回数据格式是json,那么后台配置的接口返回的contentType 必须是 text/html ,我用的是spring mvc,所以加了一个bean

<bean id="handlerAdapter"
class="org.springframework.web.servlet.mvc.annotation.AnnotationMethodHandlerAdapter">
<property name="messageConverters">
<list>
<bean
class="org.springframework.http.converter.StringHttpMessageConverter">
<property name="supportedMediaTypes">
<list>
<bean class="org.springframework.http.MediaType">
<constructor-arg index="0" value="text" />
<constructor-arg index="1" value="html" />
<constructor-arg index="2" value="UTF-8" />
</bean>
</list>
</property>
</bean>
</list>
</property>
</bean>

再有就是在使用中发现<input type="file">控件,只能使用一次,第二次使用的时候,死活不触发选择按钮会执行的函数,必须刷新页面之后,才能继续使用,后来的解决方案是:

$(document).on('change','#fileToUpload',function () {
var objUrl = getObjectURL(this.files[0]);
alert(objUrl);
if (objUrl) {
$("#headPic").attr("src",objUrl);
}
});


这样就能重复使用该控件进行文件的选择了。这种写法是jquery 1.9之后的写法,jquery旧的版本中使用的是live函数,这个函数后面被舍弃了,用on函数替代。

另外,

$("#fileToUpload").on('change',funtion() {

........

});

以及

$("#fileToUpload").change(funtion() {

........

});

这两种写法,经过测试,也无效。

猜你在找的Ajax相关文章