文档章节

jQuery多文件上传的实例

k
 kidou
发布于 2017/09/03 23:12
字数 621
阅读 96
收藏 0
点赞 0
评论 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
通州
程序员
【每天一个JQuery特效】淡入淡出显示或隐藏窗口

我是JQuery新手爱好者,有时间就练练代码,防止手生,争取每天一个JQuery练习,在这个博客记录下学习的笔记。 本特效主要采用fadeIn()和fadeOut()方法显示淡入淡出的显示效果显示或隐藏元...

Rhymo-Wu ⋅ 昨天 ⋅ 0

jQuery-File-Upload 使用文档(翻译)

最近要用到多图上传,准备使用这个插件,但是没搜到相关的文档,只有官方的文档,主要是以有道翻译和个人理解为主 可能会有一些问题,但是比看原文是方便一些. 使用文档 插件的基本信息 插件demo ...

employeeee ⋅ 05/14 ⋅ 0

jQuery学习笔记--选择器和事件

以下内容参考 W3school 简书 你要是问我什么是jQuery 那可以这么两句话概括: jQuery 是一个 JavaScript 库。 jQuery 极大地简化了 JavaScript 编程。 要学jQuery最好有点javaScript的基础 ...

codingcoge ⋅ 05/17 ⋅ 0

javascript中查看元素事件函数的一些技巧

在分析一些网页的时候,经常会发现点击某个按钮会触发某个动作,当页面比较复杂,包含的js文件又多,这时候要找到这段触发函数的代码写在哪里就比较困难。比如,在某个html页面中,发现如下一...

技术小甜 ⋅ 2017/11/07 ⋅ 0

基于cropper.js的图片上传和裁剪

项目中要求图片上传并裁剪的功能,之前也有接触过很多图片裁剪插件,效果体验不是很好,今天推荐一款好用的插件-cropper,超级好用,裁剪功能丰富,满足了各种需求。 功能: 1:点击选择图片...

祈澈姑娘 ⋅ 05/17 ⋅ 0

JavaScript 参考手册

JavaScript 参考手册 http://www.w3school.com.cn/jsref/index.asp 本部分提供完整的 JavaScript 参考手册: JavaScript 本地对象和内置对象 Browser 对象(BOM) HTML DOM 对象 JavaScript...

chenhao_asd ⋅ 05/25 ⋅ 0

JavaWeb05-HTML篇笔记(一)

1.1上次课内容回顾: JQuery: JQuery的概述:是一个轻量级的JavaScript的类库.对JS进行封装. 常见的JS的框架: JQuery的使用: JQuery的选择器:(*) JQuery实现效果: JQuery样式操作: JQuer...

我是小谷粒 ⋅ 05/10 ⋅ 0

JavaWeb04-HTML篇笔记(三)

1.1 案例二:表格隔行换色的案例:1.1.1 需求: 对数据的表格进行隔行换色的显示效果,使用JQuery完成该效果. 1.1.2 分析:1.1.2.1 技术分析: 【JQuery的选择器】 基本过滤选择器: 如果样式...

我是小谷粒 ⋅ 05/08 ⋅ 0

jQuery中,html、val与text的区别与联系

文章作者:Tyan 博客:noahsnail.com | CSDN | 简书 本文主要介绍如何使用jQuery中的html(),text()和val()三种方法,用于读取、修改元素的html结构,元素的文本内容,以及表单元素的value值...

quincuntial ⋅ 2016/11/22 ⋅ 0

huangdf/seezoon-framework-all

项目介绍 基于spring,mybatis,shiro面向接口开发的的一套后台管理系统,方便快速开发;采用常用的技术栈,降低学习成本,项目完全前后端分离,后端定义统一的接口格式,统一参数校验,统一权...

huangdf ⋅ 04/20 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

大数据,必须掌握的10项顶级安全技术

我们看到越来越多的数据泄漏事故、勒索软件和其他类型的网络攻击,这使得安全成为一个热门话题。 去年,企业IT面临的威胁仍然处于非常高的水平,每天都会看到媒体报道大量数据泄漏事故和攻击...

p柯西 ⋅ 43分钟前 ⋅ 0

Linux下安装配置Hadoop2.7.6

前提 安装jdk 下载 wget http://mirrors.hust.edu.cn/apache/hadoop/common/hadoop-2.7.6/hadoop-2.7.6.tar.gz 解压 配置 vim /etc/profile # 配置java环境变量 export JAVA_HOME=/opt/jdk1......

晨猫 ⋅ 48分钟前 ⋅ 0

crontab工具介绍

crontab crontab 是一个用于设置周期性被执行的任务工具。 周期性执行的任务列表称为Cron Table crontab(选项)(参数) -e:编辑该用户的计时器设置; -l:列出该用户的计时器设置; -r:删除该...

Linux学习笔记 ⋅ 今天 ⋅ 0

深入Java多线程——Java内存模型深入(2)

5. final域的内存语义 5.1 final域的重排序规则 1.对于final域,编译器和处理器要遵守两个重排序规则: (1)在构造函数内对一个final域的写入,与随后把这个被构造对象的引用赋值给一个引用...

江左煤郎 ⋅ 今天 ⋅ 0

面试-正向代理和反向代理

面试-正向代理和反向代理 Nginx 是一个高性能的反向代理服务器,但同时也支持正向代理方式的配置。

秋日芒草 ⋅ 今天 ⋅ 0

Spring 依赖注入(DI)

1、Setter方法注入: 通过设置方法注入依赖。这种方法既简单又常用。 类中定义set()方法: public class HelloWorldOutput{ HelloWorld helloWorld; public void setHelloWorld...

霍淇滨 ⋅ 昨天 ⋅ 0

马氏距离与欧氏距离

马氏距离 马氏距离也可以定义为两个服从同一分布并且其协方差矩阵为Σ的随机变量之间的差异程度。 如果协方差矩阵为单位矩阵,那么马氏距离就简化为欧氏距离,如果协方差矩阵为对角阵,则其也...

漫步当下 ⋅ 昨天 ⋅ 0

聊聊spring cloud的RequestRateLimiterGatewayFilter

序 本文主要研究一下spring cloud的RequestRateLimiterGatewayFilter GatewayAutoConfiguration @Configuration@ConditionalOnProperty(name = "spring.cloud.gateway.enabled", matchIfMi......

go4it ⋅ 昨天 ⋅ 0

Spring clound 组件

Spring Cloud技术应用从场景上可以分为两大类:润物无声类和独挑大梁类。 润物无声,融合在每个微服务中、依赖其它组件并为其提供服务。 Ribbon,客户端负载均衡,特性有区域亲和、重试机制。...

英雄有梦没死就别停 ⋅ 昨天 ⋅ 0

Confluence 6 重新获得站点备份文件

Confluence 将会创建备份,同时压缩 XML 文件后存储熬你的 <home-directory>/backups> 目录中。你需要自己访问你安装的 Confluence 服务器,并且从服务器上获得这个文件。 运行从 Confluence...

honeymose ⋅ 昨天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部