<!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. HDU 6086 Rikka with String AC自动机 + DP

    Rikka with String Problem Description As we know, Rikka is poor at math. Yuta is worrying about this ...

  2. JSON和JavaScript对象

    var obj={width:100,height:200},这样的并不叫JSON,并且JSON只是一种数据格式,并不是具体的实例. 但很多人把这样的JS对象当成JSON,下面把这个问题讲清楚 一.J ...

  3. Hibernate commit() 和flush() 的区别

    <<精通Hibernate java对象持久化技术详解>> ,flush()方法进行清理缓存的操作,执行一系列的SQL语句,但不会提交事务;commit()方法会先调用flus ...

  4. SVN地址正确，能在网页打开，但是检出失败解决方法

    TortoiseSVN缓存问题 右键点击TortoiseSVN -> Settings -> Saved Data, 点击个个“Clear”按钮,把本地缓存都清除了,点击“确定”: 再重新 ...

  5. java.lang.ClassNotFoundException: org.springframework.boot.context.embedded.FilterRegistrationBean

    java.lang.ClassNotFoundException: org.springframework.boot.context.embedded.FilterRegistrationBean 把 ...

  6. sjtu oj 1201. SuperXOR

    Description Pangzi recently realized that bitwise XOR operation is just an addition without carries. ...

  7. POJ3685 Matrix —— 二分

    题目链接:http://poj.org/problem?id=3685 Matrix Time Limit: 6000MS   Memory Limit: 65536K Total Submissio ...

  8. FZU1686 神龙的难题 —— Dancing Links 可重复覆盖

    题目链接:https://vjudge.net/problem/FZU-1686 Problem 1686 神龙的难题 Accept: 812    Submit: 2394 Time Limit: ...

  9. css中链接的4个状态 link、visited 、hover、active 顺序与设置

    link       未点时链接色visited  已点过的链接色hover   光标放入链接上的色active   点击时的样式 顺序一定要按link.visited.hover.active来设置 ...

  10. uuid.js

    // On creation of a UUID object, set it's initial valuefunction UUID(){    this.id = this.createUUID ...