文档章节

jQuery多文件上传的实例

k
 kidou
发布于 2017/09/03 23:12
字数 621
阅读 169
收藏 0

先看代码:

<!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

 

 

 

 

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

© 著作权归作者所有

共有 人打赏支持
k
粉丝 1
博文 5
码字总数 3757
作品 0
通州
程序员
Tasks for new employees(Junior Programmers)

Jquery方面: 1) 用Jquery实现单击按纽1可以选中所有页面上的checkbox,单击按纽2可取消对所有checkbox的选择,单击按纽3可以获得页面上所有选中的checkbox的值; 2) 用Jquery实现点击一个按...

Adam-Lee
2011/09/22
0
0
jquery form元素操作

jQuery获取Select选择的Text和Value: 语法解释: 1. $("#select_id").change(function(){//code...}); //为Select添加事件,当选择其中一项时触发 2. var checkText=$("#select_id").find("o......

remainvitality
2013/10/25
0
0
jQuery File Upload 的基本使用

jQuery File Upload 是一个Jquery图片上传组件,支持多文件上传、取消、删除,上传前缩略图预览、列表显示图片大小,支持上传进度条显示;支持各种动态语言开发的服务器端。 一、最少配置 <!...

不正经啊不正经
2015/01/04
0
0
10个强大的Ajax jQuery文件上传程序

上传文件和图片是许多网站的一个常用功能,无论是让注册用户上传一个个人资料图片还是上传文件共享,都离不开上传程序,虽然有很多种实现方法,但要让上传看起来更酷一点,如显示剩余时间,同...

SeanCai
2010/11/08
0
1
jquery常用的插件1000收集

花N长时间积累的Jquery插件,希望大家喜欢。大家还有什么新的插件,请留言,我们一并收录。 感谢大家的支持。 1.accordion类 基于jQuery开发,非常简单的水平方向折叠控件。 Horizontal acc...

Alic
2011/03/07
0
6

没有更多内容

加载失败,请刷新页面

加载更多

OSX | SafariBookmarksSyncAgent意外退出解决方法

1. 启动系统, 按住⌘-R不松手2. 在实用工具(Utilities)下打开终端,输入csrutil disable, 然后回车; 你就看到提示系统完整性保护(SIP: System Integrity Protection)已禁用3. 输入reboot回车...

云迹
今天
4
0
面向对象类之间的关系

面向对象类之间的关系:is-a、has-a、use-a is-a关系也叫继承或泛化,比如大雁和鸟类之间的关系就是继承。 has-a关系称为关联关系,例如企鹅在气候寒冷的地方生活,“企鹅”和“气候”就是关...

gackey
今天
4
0
读书(附电子书)|小狗钱钱之白色的拉布拉多

关注公众号,在公众号中回复“小狗钱钱”可免费获得电子书。 一、背景 之前写了一篇文章 《小狗钱钱》 理财小白应该读的一本书,那时候我才看那本书,现在看了一大半了,发现这本书确实不错,...

tiankonguse
今天
4
0
Permissions 0777 for ‘***’ are too open

异常显示: @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ @ WARNING: UNPROTECTED PRIVATE KEY FILE! @ @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ ......

李玉长
今天
5
0
区块链10年了,还未落地,它失败了吗?

导读 几乎每个人,甚至是对通证持怀疑态度的人,都对区块链的技术有积极的看法,因为它有可能改变世界。然而,区块链技术问世已经10年了,我们仍然没有真正的用上区块链技术。 几乎每个人,甚...

问题终结者
今天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部