<!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. 最长公共字序列.cpp

    <span style="color:#993399;">/* By yuan 2014/6/21 At nwpu.xf 1041.最长公共子序列 时限:1000ms ...

  2. app上架的照片尺寸大小

  3. Docker and Go: why did we decide to write Docker in Go?

    Docker and Go: why did we decide to write Docker in Go? | Hacker News https://news.ycombinator.com/i ...

  4. C++的学习 (此博客将一直补充更新下去，C++语法方面的内容不开新随笔了， *【语法学习】)

    // #include <sstream> // stringstream 是 C++ 提供的另一个字串型的串流(stream)物件,包含在上述头文件中 // 先谈它在字符串处理方面的应用 ...

  5. POJ 3750 小孩报数问题 （线性表思想 约瑟夫问题 数组模拟运算的 没用循环链表，控制好下标的指向就很容易了）

    小孩报数问题 Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 10423   Accepted: 4824 Descripti ...

  6. Oracle备份与恢复：RMAN

    今天第一次学习RMAN的使用.先登录系统: 数据库未启动,rman命令不能执行.在rman下 也可以 startup . 全库备份的命令:backup  database 查看备份集. 下面模拟,数据 ...

  7. codeforces 672C C. Recycling Bottles(计算几何)

    题目链接: C. Recycling Bottles time limit per test 2 seconds memory limit per test 256 megabytes input s ...

  8. xcode添加背景音乐/音效

    xcode添加音效:http://www.cnblogs.com/jiayongqiang/p/5625886.html 背景音乐: ios播放音乐时会用到一个叫做AVAudioPlayer的类,这个 ...

  9. [Java] static, final

    1.静态成员 静态成员独立于类的对象,先于对象的存在而存在.无论创建了类的多少个对象,静态成员都只有一个实例空间.一个静态变量被同一个类的所有对象共享.当改变了其中一个对象的静态变量时,其余对象的静态 ...

  10. BZOJ_2253_[2010 Beijing wc]纸箱堆叠 _CDQ分治+树状数组

    BZOJ_2253_[2010 Beijing wc]纸箱堆叠 _CDQ分治+树状数组 Description P 工厂是一个生产纸箱的工厂.纸箱生产线在人工输入三个参数 n p a , , 之后, ...