jQuery多文件上传的实例
博客专区 > kidou 的博客 > 博客详情
jQuery多文件上传的实例
kidou 发表于5个月前
jQuery多文件上传的实例
  • 发表于 5个月前
  • 阅读 50
  • 收藏 0
  • 点赞 0
  • 评论 0

标题:腾讯云 新注册用户域名抢购1元起>>>   

摘要: 使用jQuery实现文件复选,一次上传多个文件的实例

先看代码:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Multi file upload</title>
	<script src="http://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
	<style>
		.container {
			height: 50px;
			line-height: 50px;
			vertical-align: bottom;
		}
		.fake-file-btn {
			position: relative;
			display: inline-block;
			background: #D0EEFF;
			border: 1px solid #99D3F5;
			border-radius: 4px;
			padding: 4px 12px;
			overflow: hidden;
			color: #1E88C7;
			text-decoration: none;
			text-indent: 0;
			line-height: 20px;
		}
		.fake-file-btn:active {
			box-shadow: 0 1px 5px 1px rgba(0, 255, 255, 0.3) inset;
		}
		.fake-file-btn input[type=file] {
			position: absolute;
			font-size: 100px;
			right: 0;
			top: 0;
			opacity: 0;
			filter: alpha(opacity=0);
			cursor: pointer
		}
	</style>
</head>
<body>
	<!-- 正常方式实现 start -->
	<h1>提交form的方式</h1>
	<form id="f" action="testUrl" enctype="multipart/form-data" method="post">
		<input type="file" name="files" multiple="true" accept="image/x-png, image/gif, image/jpeg, image/bmp">
		<button type="button" onclick="formSubmit();">多文件上传</button>
	</form>
	<hr>
	<script>
		function formSubmit() {
			$('#f').submit();
		}
	</script>
	<!-- 正常方式实现 end -->

	<!-- 伪装按钮实现,点击后选中文件后使用ajax立刻上传 start -->
	<h1>ajax方式</h1>
	<div class="container">
		<span class="fake-file-btn">
			文件上传伪装按钮
			<input type="file" id="file" multiple="true" accept="image/x-png, image/gif, image/jpeg, image/bmp">
		</span>
	</div>
	<script>
		function uploadFiles() {
			var file = document.getElementById('file').files;
			//新建一个FormData对象	
			var formData = new FormData();
			//追加文件数据
			for (i = 0; i < file.length; i++) {
				 formData.append("file[" + i + "]", file[i]);
			}
			
			$.ajax({
				type: 'POST',
				url: "test",
				timeout: 30 * 1000,
				data: formData,
				processData: false,
				contentType: false,
				success: function(r) {
					alert('success');
				},
				error: function(r) {
					alert('error');
				},
				complete: function() {
					alert('complete');
				}
			});
		}

		$(".fake-file-btn").on("change", "input[type='file']", function() {
			uploadFiles();
		});
	</script>
	<!-- 伪装按钮实现,点击后选中文件后使用ajax立刻上传 end -->
</body>
</html>

如源码所示,第一种写法简单,使用form提交的方法提交整个表单来提交文件。

 

介绍第二种之前,必须先说一个浏览器的安全机制问题。

在ie下,浏览器策略规定,必须由用户的鼠标点击操作来出发文件对象的上传,也就是说,无法通过js方法触发input[type=file](以下简称file)的click事件或者上传方法之类的。

 

所以使用css伪装一个按钮,让用户点击触发file自身的选择文件功能,然后对file自己的值改变进行监听,发现改变后,触发上传方法。

 

解释一下这里的上传方法:

不依赖于form也可以不设置name,只要能取到该file对象就可以新建一个FormData对象,然后手动赋值。然后将formData提交到指定url上即可。

 

最后附上效果预览:

 

以上,请多多指教! m(_ _)m

 

 

 

 

'''本文欢迎转载,转载请注明出处,谢谢!!'''

共有 人打赏支持
粉丝 1
博文 3
码字总数 2705
×
kidou
"我就喜欢钞票抽脸的感觉!!——猹"
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: