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

cheng888qi

浏览: 284422 次
性别:
来自: 武汉

最近访客更多访客>>

xx5333

suifeng150

xlqazwsx2

苏羽垄

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

文件上传

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源码见附件

upload.zip (227.9 KB)
下载次数: 1751

分享到：

WEB文件上传之SpringMVC+ajaxfileupload使 ... | WEB文件上传之apache common upload使用（ ...

2014-04-23 15:59
浏览 44253
评论(4)
分类:开源软件
查看更多

4 楼小lucky 2016-03-14

要是相关包也放到附件就好了

3 楼穿山甲快乐 2015-12-29

下载了附件，在开发环境下部署好了，
但DEMO无法跑起来，即是无法上传文件，点击后无反应在。

2 楼 hk_one 2015-12-03

我觉得写得挺好，不知一楼的受什么刺激了。

1 楼 sqj820123 2015-10-29

操系统越来越垃圾了！！！

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论