使用AjaxFileUpload.js实现异步文件上传示例

AjaxFileUpload
ajax是无法提交文件的,所以在上传图片并预览的时候,我们经常使用Ifame的方法实现看似异步的效果。但是这样总不是很方便的,AjaxFilleUpload.js对上面的方法进行了一个包装,使得我们不用去管理Iframe的一系列操作,也不用影响我们的页面结构,实现异步的文件提交。 html:
 
<input type="file" name="upload" hidden="hidden" id="file_upload" accept=".zip" />

js:
 
$.ajaxFileUpload({
url:'${pageContext.request.contextPath}/Manage/BR_restorePic.action', //需要链接到服务器地址
secureuri:false,
fileElementId:'file_upload', //文件选择框的id属性
dataType: 'text', //服务器返回的格式,可以是json、xml
success: function (data, status) //相当于java中try语句块的用法
{ $('#restoreDialog').html(data);
//alert(data);
},
error: function (data, status, e){ //相当于java中catch语句块的用法 $('#restoreDialog').html("上传失败,请重试");
}
});

这个方法还会出现一个问题,就是input只能使用一次的问题,input第二次的onchange将不会被执行,这应该是与浏览器的有关,解决办法就是替换这个input 像这样:
 
$('#file_upload').replaceWith('<input type="file" name="upload" hidden="hidden" id="file_upload" accept=".zip" />');

到此这篇关于使用AjaxFileUpload.js实现异步文件上传示例就介绍到这了。一个人的性格决定他的机遇。如果你喜欢保持你的性格,那么,你就无权拒绝你的机遇。更多相关使用AjaxFileUpload.js实现异步文件上传示例内容请查看相关栏目,小编编辑不易,再次感谢大家的支持!

您可能有感兴趣的文章
JS获取鼠标点击时的位置

vue、nginx部署后刷新报404错误的解决方法

electron-builder配置项

VUE聊天页面自动滚动到底部

VUE CTRL+ENTER换行,ENTER发送消息