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页面
<!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" onclick="return ajaxFileUpload();" value="上传"><br/> 上传进度:<label id="fileUploadProcess"></label> </body> </html>
服务端处理修改
由原来的返回script改为纯JSON数据格式的返回
AjaxUploadFileServlet.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控件,不过这种解决方案也不适合进行多文件的提交,所以无伤大雅。
Demo源码见附件
相关推荐
首先,`jQuery ajaxFileUpload` 插件允许用户在不刷新页面的情况下上传文件,提供了一种友好的用户体验。它的主要优点包括进度条显示、错误处理以及对多文件上传的支持。要使用这个插件,你需要在HTML页面中引入...
在Web开发中,用户与服务器进行交互的方式多种多样,其中文件上传是一项重要的功能。传统的文件上传通常需要页面刷新,用户体验较差。为了解决这一问题,jQuery提供了许多插件,如AjaxFileUpload,它允许开发者实现...
本文将详细介绍如何使用Asp.Net MVC框架与Jquery的ajaxfileupload插件实现一个兼容主流浏览器的文件上传解决方案。 首先,Asp.Net MVC是一个强大的Web应用程序开发框架,它允许开发者构建动态、数据驱动的网站。它...
总结来说,AjaxFileUpload插件为Web应用提供了一种方便的、异步的文件上传解决方案,通过与jQuery库结合,简化了前端开发人员处理文件上传的复杂性。通过理解其特点和使用方法,开发者可以创建更加动态和交互式的...
jQuery File Upload是一款功能强大的文件上传插件,专为前端开发者设计,用于在Web应用程序中实现高效、用户友好的多文件上传功能。这个插件的版本是v10.32.0,它提供了丰富的特性,使得文件上传变得更加简单且可控...
*** MVC与JQuery插件ajaxFileUpload结合使用进行文件上传是现代Web开发中一个非常常见的功能。本文主要阐述了如何在*** MVC框架中利用JQuery的ajaxFileUpload插件来实现异步文件上传功能。 首先,ajaxFileUpload是...
首先,要实现无刷新上传,我们需要在客户端使用jQuery和AJAXFileUpload插件。AJAXFileUpload插件允许我们选择文件并通过AJAX技术将其发送到服务器。这涉及到几个关键步骤: 1. 引入必要的库:在HTML页面中,我们...
1. **引入依赖**:确保你的项目中包含了jQuery库和AjaxFileUpload插件的JavaScript文件。通常,这些文件需要放在HTML页面的部分。 2. **HTML表单设计**:创建一个简单的HTML表单,包含一个文件输入字段,以及一个...
2. **AJAXFileUpload**: AJAXFileUpload是基于jQuery的一个插件,用于实现异步文件上传。它利用Ajax技术,使得文件上传无需刷新页面即可完成。这极大地提升了用户体验,因为用户可以在上传文件的同时继续浏览其他...
这是一个基于jQuery的插件,主要用于处理文件上传。它利用了Ajax技术,使得文件上传过程可以在后台进行,不会打断用户的操作流程。`ajaxFileUpload`的核心在于它能够处理文件的FormData对象,并通过Ajax发送到服务器...
接下来,`jquery.ajaxfileupload.js` 是一个基于jQuery的文件上传插件,它扩展了jQuery的Ajax功能,使得在前端可以通过异步方式实现文件上传,提升用户体验。该插件的主要特性包括: 1. 异步上传:使用Ajax技术,...
首先,在页面中引入jQuery库,然后引入AjaxFileUpload插件。接着,通过编写简单的JavaScript代码,设置好上传参数,如文件类型限制、上传地址等,就可以创建一个功能完善的文件上传组件。同时,由于这两个文件都已被...
10. **使用指南**:`使用方法.txt`和`ajaxfileupload_instructions.txt`提供了关于如何在项目中集成和使用AjaxFileUpload插件的详细步骤和说明。 在实际使用AjaxFileUpload时,开发者需要在HTML中添加相应的元素,...
在IT行业中,构建一个...以上就是使用Ajax、jQuery、Struts和AjaxFileUpload实现有增删改功能的文件上传系统的核心知识和技术点。这个例子展示了如何利用现代Web技术提高用户体验,同时也体现了前后端分离的设计思想。
`jQuery Ajaxfileupload` 是一个用于异步文件上传的JavaScript插件,它允许用户在不刷新页面的情况下上传文件。这个插件是基于jQuery库构建的,因此需要在项目中引入jQuery.js来支持其功能。此外,为了实现异步上传...
$.ajaxFileUpload 是一个jQuery插件,它提供了异步文件上传的能力,使得用户无需刷新页面即可完成文件提交,提高了用户体验。 $.ajaxFileUpload 的核心在于使用Ajax技术,它允许在后台与服务器交换数据并更新部分...
6. **预览功能**:在文件选择后,使用AjaxFileUpload插件提供的事件处理函数,获取上传文件的临时URL,然后在页面上显示预览图。 7. **错误处理**:处理可能出现的上传错误,例如文件大小限制、文件类型限制等。...
其次,`ajaxfileupload.js`是主要的文件,它是一个专门用于文件上传的插件,基于jQuery构建。这个插件允许用户在不刷新页面的情况下,通过Ajax技术上传图片。异步上传意味着用户可以选择文件后,后台可以开始上传...