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上传插件，用于ajax的异步文件上传
jquery ajaxfileupload.js异步上传插件
jquery+ajaxfileupload+html文件上传，用ajaxfileupload插件做的上传文件
jQuery插件AjaxFileUpload用来实现ajax文件上传，该插件使用非常简单，接下来写个demo演示怎么用AjaxFileUpload插件实现文件上传。
使用Jquery做上传文件处理时，用到了ajaxfileupload.js 这个第三方代码，但是这个js几乎就是半成品，问题很多。现在整理如下并附修复版的ajaxfileupload.js下载。 问题： 1：无法带参数提交，只能上传文件； 2：...
ajaxFileUpload插件是一个非常简单的基于Jquery的异步上传文件的插件，使用过程中发现很多与这个同名的，基于原始版本基础之上修改过的插件，文件版本比较多，我把我自己使用的ajaxFileUpload文件上传了
jQuery插件AjaxFileUpload用来实现ajax文件上传，该插件使用非常简单，接下来写个demo演示怎么用AjaxFileUpload插件实现文件上传。 1、引入AjaxFileUpload插件相关的js 复制代码 代码如下:[removed]resources/js/...
文件上传几乎是每个项目所必须的，这里介绍Asp.net MVC结合Jquery ajaxfileupload实现文件上传,兼容主流浏览器
NULL 博文链接：https://guomingzhang2008.iteye.com/blog/1739297
NULL 博文链接：https://cqjava.iteye.com/blog/2058912
ajaxfileupload.js 异步上传jquery插件，亲测可用，有需要的可以选择下载
通过修改终于使得ajaxfileupload兼容jquery3，代码已上线运行。
ajaxFileUpload插件是一个非常简单的基于Jquery的异步上传文件的插件，使用过程中发现很多与这个同名的，基于原始版本基础之上修改过的插件，文件版本比较多，我把我自己使用的ajaxFileUpload文件上传到博客园上了，...
现在网上下载的上传插件（ajaxfileupload.js）很多都不支持通过设置data来传参，我这里改了一下。
NULL 博文链接：https://cui-yh.iteye.com/blog/2310539
AJAXFileUpload ajax 异步文件上传 进度条AJAXFileUpload ajax 异步文件上传 进度条
包含jar包：ajaxfileupload.js jquery-1.7.1.js jquery-1.10.2.js json2.js