文档章节

jQuery多文件上传的实例

k
 kidou
发布于 2017/09/03 23:12
字数 621
阅读 208
收藏 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
通州
程序员
私信 提问
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 File Upload 的基本使用

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

不正经啊不正经
2015/01/04
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
10个强大的Ajax jQuery文件上传程序

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

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

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

Alic
2011/03/07
0
6

没有更多内容

加载失败,请刷新页面

加载更多

ConcurrentHashMap 高并发性的实现机制

ConcurrentHashMap 的结构分析 为了更好的理解 ConcurrentHashMap 高并发的具体实现,让我们先探索它的结构模型。 ConcurrentHashMap 类中包含两个静态内部类 HashEntry 和 Segment。HashEnt...

TonyStarkSir
今天
3
0
大数据教程(7.4)HDFS的java客户端API(流处理方式)

博主上一篇博客分享了namenode和datanode的工作原理,本章节将继前面的HDFS的java客户端简单API后深度讲述HDFS流处理API。 场景:博主前面的文章介绍过HDFS上存的大文件会成不同的块存储在不...

em_aaron
昨天
2
0
聊聊storm的window trigger

序 本文主要研究一下storm的window trigger WindowTridentProcessor.prepare storm-core-1.2.2-sources.jar!/org/apache/storm/trident/windowing/WindowTridentProcessor.java public v......

go4it
昨天
6
0
CentOS 生产环境配置

初始配置 对于一般配置来说,不需要安装 epel-release 仓库,本文主要在于希望跟随 RHEL 的配置流程,紧跟红帽公司对于服务器的配置说明。 # yum update 安装 centos-release-scl # yum ins...

clin003
昨天
9
0
GPON网络故障处理手册

导读 为了方便广大网络工作者工作需要,特搜集以下GPON网络处理流程供大家学习参考。开始—初步定为故障—检查光纤状况—检查ONU状态--检查设备运行状态—检查设备数据配置—检查上层设备状态...

问题终结者
昨天
10
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部