<!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. CentOS笔记-vim

    详细的参考http://www.runoob.com/linux/linux-vim.html i插入 I 行首插入 A 行尾插入 fn + ←,行首 fn + →,行尾 fn + ↑,向上翻页 fn ...

  2. Hashed Indexes Geospatial Index

    Indexes — MongoDB Manual https://docs.mongodb.com/manual/indexes/ 地理索引 哈希索引

  3. 关于npm的环境变量配置、prefix

    1.关于npm 的 prefix 在npm中安装全局文件时,npm会把他安装在npm里面配置的prefix路径下,查看prefix的方法是:npm config list/npm config ls/ ...

  4. ICMP协议 广播以查询局域网内的所有主机

    看到了很多局域网内的主机扫描工具,在想怎么去实现这样一个工具.前几天看了Ping源码--ICMP协议的实例,ICMP可以用来探测网联网内的任一主机,ICMP和广播地址结合来扫描局域网内的所有主机不是很 ...

  5. 用WaveX实现音频文件的录音

    原文地址:https://blog.csdn.net/gongluck93/article/details/53096013 1.WaveInOpen waveInOpen MMRESULT wave ...

  6. react Native 踩坑记录

    应用 1 安卓打包 经验 解决方案 ,官方 解决方案 2 调试 用 React-Native-Debugger 教程 3 微信分享和登录 使用 react-native-wechat    地址 设计 ...

  7. @class && #import

    先前被问到@class和#import的区别,我很直白的说使用@class是对要引用的类进行一个声明,不让编译器报错,到后面要用的时候再引入相应的类,而#import则会引入类的所有实例变量和方法.接 ...

  8. #1241 : Best Route in a Grid

    时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 给定一个N行N列的非负整数方阵,从左上角(1,1)出发,只能向下或向右走,且不能到达值为0的方格,求出一条到达右下角的最佳 ...

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

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

  10. (linux)schedule_delayed_work()

      原文地址:schedule_delayed_work()用法作者:Valley   第一篇 工作队列       在Linux内核中,对下半部(或者说推后执行的工作)的处理方式有好几种,包括BH( ...