生活随笔
收集整理的这篇文章主要介绍了
WEB文件上传之JQuery ajaxfileupload插件使用（二）
小编觉得挺不错的,现在分享给大家,帮大家做个参考.
1.JQuery ajaxfileupload插件使用准备
下载地址：
http://www.phpletter.com/DOWNLOAD/
2.原理分析
ajaxfileupload也是利用iframe实现无刷新异步提交，与我的上一篇文章（WEB文件上传之apache common upload使用（一））中对iframe使用的方式有些不同。ajaxfileupload是通过监听iframe的onload方法来实现， 当从服务端处理完成后，就触发iframe的onload事件调用其绑定的方法，在绑定的方法中获取iframe中服务器返回的数据体（支持的普通文本,json,xml,script, html）
3.具体使用
jsp页面
Html代码
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>JQuery ajaxfileupload文件上传</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <link type="text/css" rel="stylesheet" href="css/ajaxfileupload.css" > <script type="text/javascript" src="js/jquery/jquery-1.9.1.js"></script> <script type="text/javascript" src="js/jquery/ajaxfileupload.js"></script> <script type="text/javascript"> //定时器对象 var uploadProcessTimer = null; //获取文件上传进度 function getFileUploadProcess() { $.get('/upload/getFileProcessServlet', function(data) { $('#fileUploadProcess').html(data); }); } function ajaxFileUpload() { //设置加载图标的显示 $('#loading').show(); uploadProcessTimer = window.setInterval(getFileUploadProcess, 20); $.ajaxFileUpload ({ url:'/upload/ajaxUploadServlet', secureuri:false, fileElementId:'fileToUpload', dataType: 'json', data:{name: $('#name').val()}, success: function (data, status) { //清除定时器 if(uploadProcessTimer) { window.clearInterval(uploadProcessTimer); } $('#loading').hide(); var message = data['message']; var code = data['code']; if(code != 200) { $('#fileUploadProcess').html('0%'); } if(message) { alert(data.message); } }, error: function (data, status, e) { //清除定时器 if(uploadProcessTimer) { window.clearInterval(uploadProcessTimer); } $('#loading').hide(); //这里处理的是网络异常，返回参数解析异常，DOM操作异常 alert("上传发生异常"); } }) return false; } </script> </head> <body> <h2>JQuery ajaxfileupload文件上传</h2> <img id="loading" src="images/loading.gif" style="display:none;"> 用户信息： <br/> 姓名：<input id="name" name="name" type="text"> <br/> 附件：<input id="fileToUpload", name="file1" type="file" class="input"> <br/> <br><br> <input type="button" οnclick="return ajaxFileUpload();" value="上传"><br/> 上传进度：<label id="fileUploadProcess"></label> </body> </html>
服务端处理修改
由原来的返回script改为纯JSON数据格式的返回
AjaxUploadFileServlet.java关键变动
Java代码
/** * 返回结果函数 * @param response * @param state */ private void responseMessage(HttpServletResponse response, State state) { response.setCharacterEncoding(encode); response.setContentType("text/html; charset=" + encode); Writer writer = null; try { writer = response.getWriter(); writer.write("{\"code\":" + state.getCode() +",\"message\":\"" + state.getMessage()+ "\"}"); writer.flush(); writer.close(); } catch(Exception e) { logger.error(e.getMessage(), e); } finally { IOUtils.closeQuietly(writer); } }
4.总结
ajaxfileupload插件简化了文件上传的过程，页面上无需定义from表单，提交时自动完成临时form表单创建target为临时创建的iframe， 并将file控件复制一份到表单内进行提交，完成提交后自动销毁临时生成的form表单和iframe。
缺点：不支持多个file控件，不过这种解决方案也不适合进行多文件的提交，所以无伤大雅。
总结
以上是生活随笔 为你收集整理的WEB文件上传之JQuery ajaxfileupload插件使用（二） 的全部内容，希望文章能够帮你解决所遇到的问题。
如果觉得生活随笔 网站内容还不错，欢迎将生活随笔 推荐给好友。
