<!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. 设计模式学习笔记——Template Method模板方法模式

    可能是最简单的设计模式. 而且你我都用过而不自知. 因为,模板方法模式也者,就是面向对象中的继承.公用部分放在父类,子类继承父类,然后扩展.呵呵.

  2. JVM手动分配内存（转载）

    原文内容很详细,不利于快速浏览,所以只保留了重点 原文地址 http://blog.csdn.net/mr__fang/article/details/47723767 内存检测工具jvisualVM ...

  3. 如何查看Java进程并获取进程ID？

    1. 在 LINUX 命令平台输入 1-2 个字符后按 Tab 键会自动补全后面的部分(前提是要有这个东西,例如在装了 tomcat 的前提下, 输入 tomcat 的 to 按 tab).2. ps ...

  4. Zookeeper原理和应用

    ZooKeeper基本原理 数据模型 如上图所示,ZooKeeper数据模型的结构与Unix文件系统很类似,整体上可以看作是一棵树,每个节点称做一个ZNode.每个ZNode都可以通过其路径唯一标识, ...

  5. UIPageControll 的属性和用法

    UIPageControll 是继承于UIControl的一个IOS系统UI控件,可以提供给开发者设计分页效果的功能. 初始化方法 UIPageControl * page = [[UIPageCon ...

  6. Redis使用基本套路

    Redis的数据,通常都是来自于数据库. 存入Redis当中,可以快速的查询.不用每次都关联查询,然后其他处理什么的. 通常可以把一些,不经常变的数据存储其中. 避免数据变动,而Redis缓存数据不变 ...

  7. [Selenium] close alert window

    public static boolean isAlertPresent(WebDriver driver) { try { driver.switchTo().alert(); return tru ...

  8. 【NOIP 2003】 加分二叉树

    [题目链接] 点击打开链接 [算法] 树形DP即可 [代码] #include<bits/stdc++.h> using namespace std; #define MAXN 50 in ...

  9. 浅谈getAttribute兼容性

    最近终于证实tag.setAttribute("style", "color:#000;");在IE7中不起作用.于是百度了一些解决办法. IE的setAttr ...

  10. nable to load bean: type:com.opensymphony.xwork2.util.ValueStackFactory

    严重: Exception starting filter struts2 Unable to load bean: type:com.opensymphony.xwork2.util.ValueSt ...