<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<title></title>

	</head>

	<body>

		<!--

			操作文件，客户端最常见的方式，就是用文件域做选取

			默认可以选择任何类型的文件，可以用accept控制选择的mime类型

			默认只能选择一个文件，如果想多选，需要设置multiple属性                   multiple属性指明了该file控件可进行多选操作

		-->

		选择多个文件

		<input id="file1" type="file" accept="image/*" multiple/>

		<br />

		选择单个文件

		<input id="file2" type="file" accept="*/*"/>

		<div id="div1">

			<!--显示文件信息-->

		</div>

		<input type="button" id="btn" name="btn" value="onclick"/>

		<script>

			var btn=document.getElementById("btn");

			btn.onclick=function(){

				alert("再也不用在html添加onclick属性了,这个好！！！");

			}

			//获得dom对象

			var file1 = document.getElementById('file1');

			var file2 = document.getElementById('file2');

			var div1 = document.getElementById('div1');

			//选择文件触发事件

			file1.onchange = function(e) {

				//获得选取文件列表的集合

				var files = this.files;

//				alert('选择了' + files.length + '个文件');

				var html = [];

				//遍历文件列表

				for (var i = 0;i < files.length;i ++) {

					//获得当前文件对象

					var f = files[i];

					//读取文件信息拼接字符串放到数组中

					//arrayObj. push([item1 [item2 [. . . [itemN ]]]]);

					// 将一个或多个新元素添加到数组结尾，并返回数组新长度

					html.push('<p>' + f.name + ',' + (f.type||'未知类型') + ',' + f.size + '字节</p>');

				}

				//在div1中显示文件信息

				//arrayObj.join(separator);

				//返回字符串，这个字符串将数组的每一个元素值连接在一起，中间用 separator 隔开。

				div1.innerHTML = html.join('');

			}

			file2.onchange = function(e) {

				//获得选取文件列表的集合

				var files = this.files;

//				获得当前文件对象

				var f = files[0];

				//读取文件信息拼接字符串

				div1.innerHTML = '<p>' + f.name + ',' + (f.type||'未知类型') + ',' + f.size + '字节</p>';

			}

		</script>

	</body>

</html>

与上面的区别是：自己仿照上面写onchange=function(e){}时，执行报错！

<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<title></title>

	</head>

	<body>

		<!--选择多个文件：<input id"file1" type="file" accept="image/gif,image/png,image/jpeg" multiple/><br/><br/>-->

		选择多个文件：<input id"file1" type="file" accept="image/*" multiple="multiple" onchange="filecheck(this)"/><br/>

		<div id="div1"></div>

		<script>

			var file1=document.getElementById("file1");

			var file2=document.getElementById("file2");

			var div1=document.getElementById("div1");

			function filecheck(obj){

				var files=obj.files;

				var html=[];

				for (var i=0;i<files.length;i++) {

					var file=files[i];

					var str="   文件名称: "+file.name+"   文件类型："+file.type+"   文件大小："+file.size+"文件路径:"+file.+"<br/>";

					html.push(str);

				}

				console.log(html);

				div1.innerHTML=html.join("");

			}

		</script>

	</body>

</html>

　　

　　

h5-19-文件操作-文件域的更多相关文章

  1. H5之前端操作文件

    js是否能够操作文件? js在HTML5以前浏览器端是无法操作文件的,但HTML5中给a标签增加了一个download属性,只要有这个属性,点击这个链接时浏览器就不在打开链接指向的文件,而是改为下载( ...

  2. 文件操作mode学习总结-----Python学习总结【第四篇】：Python之文件操作(文件、正则、json、pickle)

    非常全的博客,防丢链接参考https://www.cnblogs.com/madsnotes/articles/5521551.html 1.文件操作 1.1 操作流程 1)文件打开 2)文件操作 3 ...

  3. ASP.NET中的文件操作(文件信息,新建,移动,复制,重命名,上传,遍历)(亲测详细)

    做了几天的文件操作,现在来总结一下,错误之处,还望指点!以文件为例,如果对文件夹操作,基本上将File换为Directory即可(例:FileInfo file = new FileInfo(Path ...

  4. python 文件操作: 文件操作的函数, 模式及常用操作.

    1.文件操作的函数: open("文件名(路径)", mode = '模式', encoding = "字符集") 2.模式: r , w , a , r+ , ...

  5. Python文件操作-文件的增删改查

    需求:对文件进行增删改查 由于时间原因,本次代码没有增加任何注释,如有疑问,请联系编辑者:闫龙 其实我也是醉了,看着这些个代码,我脑袋也特么大了,没办法,大神说了,不让用新知识,只可以使用学过的,所以 ...

  6. liunx文件操作 文件压缩

    文件备份和压缩命令 在Linux中,常用的文件压缩工具有gzip,bzip2,zip. 'bzip2'是最理想的压缩工具,它提供了最大限度的压缩. 'zip'兼容好,windows也支持. bzip2 ...

  7. liunx文件操作 文件查看

    文件的阅读命令 head 命令 head命令可以用来查看文件的开头部分,命令的格式是: head 文件名 默认设置,它只查看文件的前10行.但可以通过指定一个数字选项来改变要显示的行数,命令如下 he ...

  8. java文件操作文件之csv

    直接上代码: @Test public void dowrite(){ String filePath = "D://test.csv"; try { File f = new F ...

  9. Python全栈之路4--内置函数--文件操作

    上节重点回顾: 判断对象是否属于某个类,例如: 列表中有个数字,但是循环列表判断长度,用len会报错;因为int不支持len,所以要先判断属于某个类,然后再进行if判断. # isinstance(对 ...

  10. Python基础(三)——集合、有序 无序列表、函数、文件操作

    1.Set集合 class set(object): """ set() -> new empty set object set(iterable) -> n ...

随机推荐

  1. Provided Maven Coordinates must be in the form 'groupId:artifactId:version'.

    [hadoop@hadoop1 bin]$ ./spark-shell --packages org.mongodb.spark:mongo-spark-connector_2.10-2.2.1 Ex ...

  2. CodeForces 24D Broken robot（期望+高斯消元）

    CodeForces 24D Broken robot 大致题意:你有一个n行m列的矩形板,有一个机器人在开始在第i行第j列,它每一步会随机从可以选择的方案里任选一个(向下走一格,向左走一格,向右走一 ...

  3. TFS Server 2017 自动化部署步骤

    1 第一步,在服务器上安装TFS 2 第二步,安装完TFS后需要配置你的项目,选择管理代码的方式,这里我们可以选择传统的TFS 也可以选择GIT 方式,此处我选择的GIT 方式 3 第三步,设置代理. ...

  4. vim使用手册出现 找到 tag：1/9或更多 查看别的定义的方法

    :ts 或 tselect 查看有相同地方的定义 通过这种方式会出现一个列表,输入:q 然后通过数字键和回车查看某一个定义,个人经常用:ts :tn或tnext 查找下一个定义地方. :tp 查找上一 ...

  5. php连接数据库步骤

    第一步:连接数据库 $link=@mysql_connect('localhost','root','root') or die('数据库连接失败!'); echo '连接成功!'; 这里数据库连接函 ...

  6. luogu 4782【模板】 2-SAT 问题

    2-SAT就是给出$m$个限制表示$x==val_x || y==val_y$ 求出满足的解 每个点拆成两个点,如果$x$不满足则$y$一定满足,$y$不满足同理.这样我们连边,然后$tarjan$即 ...

  7. 洛谷 P1578 奶牛浴场 —— 最大子矩形

    题目:https://www.luogu.org/problemnew/show/P1578 枚举左边界,向右枚举右边界,同时不断限制上下边界,最后右边界是整个图的边界: 由于没有做左边界是整个图的边 ...

  8. Synchronized之三：Synchronized与线程中断、线程wait

    线程中断 见<Thread之八:interrupt中断> 正如中断二字所表达的意义,在线程运行(run方法)中间打断它,在Java中,提供了以下3个有关线程中断的方法 //中断线程(实例方 ...

  9. 关于spring boot打出的jar包在Linux中运行

    众所周知, spring boot打出的jar包可以通过 "java -jar xxx.jar"的方式来运行 但是在Linux中, 通过这个命令运行的话会占用该窗口, 当我们 Ct ...

  10. Python学习之旅—生成器对象的send方法详解

    前言 在上一篇博客中,笔者带大家一起探讨了生成器与迭代器的本质原理和使用,本次博客将重点聚焦于生成器对象的send方法. 一.send方法详解  我们知道生成器对象本质上是一个迭代器.但是它比迭代器对 ...