使用AjaxFileUpload.js实现异步文件上传示例，ajax文件上传
使用AjaxFileUpload.js实现异步文件上传示例，ajax文件上传
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" />');
页面代码：<html<!-- 引入相关的js文件，相对路径 --<script type=text/javascript src=js/jquery.js</script<script type=text/javascript src=js/ajaxfileupload.js</script<!-- 执行上传文件操作的函数 --<script type=text/javascriptfunction ajaxFileUpload(){$.ajaxFileUpload({url:'update.do?method=uploader', //需要链接到服务器地址secureuri:false,fileElementId:'houseMaps', //文件选择框的id属性dataType: 'xml', //服务器返回的格式，可以是jsonsuccess: function (data, status) //相当于java中try语句块的用法{$('#result').html('添加成功');},error: function (data, status, e) //相当于java中catch语句块的用法{$('#result').html('添加失败');}});}</script</head<body<form method=post action=update.do?method=uploader enctype=multipart/form-data<input type=file id=houseMaps name=houseMaps/<input type=button value=提交 onclick=ajaxFileUpload()/</form<div id=result</div</body</html服务器代码：public class UpdateAction extends DispatchAction {public ActionForward uploader(ActionMapping mapping, ActionForm form,HttpServletRequest request, HttpServletResponse response) {UpFormForm upFormForm = (UpFormForm) form;FormFile ff = upFormForm.getHouseMaps();try {InputStream is = ff.getInputStream();File file = new File(D:/ + ff.getFileName()); //指定文件存储的路径和文件名OutputStream os = new FileOutputStream(file);byte[] b = new byte[1024];int len = 0;whi......余下全文>>
<script type=text/javascript src=js/jquery.js</script<script type=text/javascript src=js/ajaxfileupload.js</script<!-- 执行上传文件操作的函数 --<script type=text/javascriptfunction ajaxFileUpload(){$.ajaxFileUpload({url:'update.do?method=uploader', //需要链接到服务器地址secureuri:false,fileElementId:'houseMaps', //文件选择框的id属性dataType: 'xml', //服务器返回的格式，可以是jsonsuccess: function (data, status) //相当于java中try语句块的用法{$('#result').html('添加成功');},error: function (data, status, e) //相当于java中catch语句块的用法{$('#result').html('添加失败');}});}</script</head<body<form method=post action=update.do?method=uploader enctype=multipart/form-data<input type=file id=houseMaps name=houseMaps/<input type=button value=提交 onclick=ajaxFileUpload()/</form<div id=result</div</body</html服务器代码：public class UpdateAction extends DispatchAction {public ActionForward uploader(ActionMapping mapping, ActionForm form,HttpServletRequest request, HttpServletResponse response) {UpFormForm upFormForm = (UpFormForm) form;FormFile ff = upFormForm.getHouseMaps();try {InputStream is = ff.getInputStream();File file = new File(D:/ + ff.getFileName()); //指定文件存储的路径和文件名OutputStream os = new FileOutputStream(file);byte[] b = new byte[1024];int len = 0;while((len = is.read(b)) != -1){os.write(......余下全文>>
评论关闭