使用AjaxFileUpload.js实现异步文件上传示例
2023-06-13 09:15:27 时间
ajax是无法提交文件的,所以在上传图片并预览的时候,我们经常使用Ifame的方法实现看似异步的效果。但是这样总不是很方便的,AjaxFilleUpload.js对上面的方法进行了一个包装,使得我们不用去管理Iframe的一系列操作,也不用影响我们的页面结构,实现异步的文件提交。
html:
复制代码代码如下:
html:
<inputtype="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("<inputtype="file"name="upload"hidden="hidden"id="file_upload"accept=".zip"/>");
相关文章
- Fabric.js 使用纯色遮挡画布(前景色)
- YUI Compressor插件压缩后war中的js/css文件未压缩的解决方法(被maven打包顶替了)
- js漂浮广告代码_JavaScript上传文件代码
- vue动态引入js文件的方法_vue如何引入js文件
- js文件分片上传
- 「 [学习记录] JS 类型转换 - 隐式转换 」
- Qml使用js读写文件
- JS中的异常处理(try.catch)详解编程语言
- 使用JS控制Oracle数据库的更新(js控制oracle更新)
- 使用JS操作Oracle数据库探索潜在可能性(js和oracle数据库)
- 用ASP+FSO生成JS文件
- 用js实现多域名不同文件的调用方法
- js装载xml文件然后发向服务器的实现代码
- 从外部的js文件中获取ASPX页面的控件ClientID
- 编写Js代码要注意的几条规则
- 在js文件中如何获取basePath处理js路径问题
- 异步动态加载js与css文件的js代码
- js判断上传文件的类型和大小示例代码
- 按下Enter焦点移至下一个控件的实现js代码
- js获取当前地址JS获取当前URL的示例代码
- 通过隐藏iframe实现文件下载的js方法介绍
- js中匿名函数的创建与调用方法分析
- jquery库文件略庞大用纯js替换jquery的方法