文档章节

jQuery多文件上传的实例

k
 kidou
发布于 2017/09/03 23:12
字数 621
阅读 248
收藏 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
粉丝 2
博文 6
码字总数 4685
作品 0
通州
程序员
私信 提问
20+ 个很棒的 jQuery 文件上传插件或教程

文件上传是网站很常见的功能之一,通过使用 jQuery 可以让上传过程更加人性化,更好的用户体验。本文介绍20个jQuery的文件上传插件,其中有一些是教程。 1. Plupload Plupload 是一个Web浏览...

红薯
2011/08/03
50.5K
9
Tasks for new employees(Junior Programmers)

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

Adam-Lee
2011/09/22
0
0
7 款 JavaScript 的 Ajax 文件上传插件

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

oschina
2012/05/09
26K
13
10 新鲜的 jQuery 插件(2012年1月)

1. jQuery UI Bootstrap 一个基于 Twitter Bootstrap 的 jQuery UI 主题 2. jqGrid 这是非常棒的jQuery 表格插件,在线演示:here. 3. Cloud Zoom Cloud Zoom 是一个小型的图像放大镜插件,放...

红薯
2012/02/01
4.8K
6
jQuery File Upload 的基本使用

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

不正经啊不正经
2015/01/04
0
0

没有更多内容

加载失败,请刷新页面

加载更多

分布式之延时任务方案解析

方案分析 (1)数据库轮询 思路 该方案通常是在小型项目中使用,即通过一个线程定时的去扫描数据库,通过订单时间来判断是否有超时的订单,然后进行update或delete等操作 实现 博主当年早期是用...

微笑向暖wx
28分钟前
1
0
博客目录

1.剑指offer目录 剑指offer目录 2.开放的面试题 开放面试题目录

细节探索者
28分钟前
1
0
自定义线程池

自定义线程工厂: public class CustomThreadFactory implements ThreadFactory { private static final Logger LOGGER = LoggerFactory.getLogger(CustomThreadFactory.class); pu......

hensemlee
58分钟前
2
0
记一次oom内核优化记录:vm.lower_zone_protection

情景 最近gitlab服务会偶发性500,当前机器部署了gitlab、nfs等服务,经过排查发现是nfsd引发oom,导致系统运行不畅。处理过程如下: 事故现场 开发在使用gitlab的时候发现,偶发性的出现500...

阿dai
今天
6
0
Spring Batch JSON 支持

Spring Batch 4.1 开始能够支持 JSON 格式了。这个发布介绍了一个新的数据读(item reader)能够读取一个 JSON 资源,这个资源按照下面的格式: [  {    "isin": "123",    ...

honeymose
今天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部