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="data: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插件使用（二）相关推荐

jquery插件课程2 放大镜、多文件上传和在线编辑器插件如何使用
jquery插件课程2 放大镜.多文件上传和在线编辑器插件如何使用一.总结一句话总结:插件使用真的还是比较简单的,引包,初始化,配置参数(json),配置数据(json),而后两步不是必须的.而且 ...
web文件上传（一）--文件上传与json上传区别及方法
Web文件上传方法总结大全上传文件与与上传数据区别上传数据主要指json等简单字符串,上传文件指的是上传word.excel图片等.在上传数据的时候enctype默认为第一个application ...
web文件上传-0x00漏洞
文件上传-0x00漏洞题目:2016全国大学生信息安全竞赛-web文件上传原理 0x00漏洞:也称为%00阻断漏洞,0x00漏洞常见于Apache服务器后缀名称解析漏洞,不管文件最后后缀为什么,只 ...
java web文件上传所需要的commons-fileupload和 commons-io jar包
文章目录一.官网获取二.百度网盘分享三.分享与热爱一.官网获取学习java web文件上传时需要用到两个必备的jar包: commons-fileupload commons-io jar ...
java web 上传附件_JAVA WEB文件上传步骤
JAVA WEB文件上传步骤如下: 实现 Web 开发中的文件上传功能,两个操作:在 Web 页面添加上传输入项,在 Servlet 中读取上传文件的数据并保存在本地硬盘中. 1.Web 端上传文件. ...
web文件上传下载原理浅析
一.web文件上传浅析现在有很多Web程序都有上传功能,实现上传功能的组件或框架也很多,如基于java的Commons FileUpload.还有Struts1.x和Struts2中带的上传文件功能 ...
Web文件上传方法总结大全
文件上传在WEB开发中应用很广泛,我们经常发微博.发微信朋友圈都用到了图片上传功能. 文件上传是指将本地图片.视频.音频等文件上传到服务器上,可以供其他用户浏览或下载的过程. 今天我给大家聊聊常见的文 ...
SpringMVC整合fastdfs-client-java实现web文件上传下载
为什么80%的码农都做不了架构师?>>> 版权声明:本文为博主原创文章,转载请标明出处(http://blog.csdn.net/wlwlwlwl015)Thanks. 目录( ...
WEB文件上传之apache common upload使用（一）
文件上传一个经常用到的功能,它有许多中实现的方案. 页面表单 + RFC1897规范 + http协议上传页面控件(flash/html5/activeX/applet) + RFC1897规范 + ...

WEB文件上传之JQuery ajaxfileupload插件使用（二）

WEB文件上传之JQuery ajaxfileupload插件使用（二）相关推荐

最新文章

热门文章