HTML5操作本地文件-File对象

HTML5操作本地文件-File对象。

通常如果我们要在网页中使用电脑本地文件，那只能先将本地文件上传到网页的服务器中，然后再从服务器中加载到网页上。但是在HTML5中提供了File API可以用来操作设备中的本地文件。我们可以直接将本地文件拖到html中，我们可以通过JS来控制文件的读取，写入，文件夹，文件等一系列的操作。简单方便。 来介绍几个关于file几个重要的JS对象

1、FileList对象

他是File对象的一个集合，在HTML4标准中文件上传控件只接受一个文件，而在HTML5中，只需要设置multiple，就支持多个文件上传。比如：



<input type="file" multiple="multiple" id='file'>



2、File对象

指向一个具体的文件，它还有了两个属性，name(文件名)，lastMondifiedDate（最后修改时间）

3、FileReader对象

这是一个非常重要的对象，用来读取文件里面的数据，提供了三个常用的读取文件数据的方法，另外读取文件数据是异步的，不存在跨域的问题，非常方便。 readAsDataURL(file)——读取内容可以作为URL属性，也就是说可以将一个图片的结果指向给一个img是src属性 readAsBinaryString()——传入一个Blob对象，然后读取数据的结果作为二进制字符串的形式放到FileReader的result属性中 readAsText(Blob blob, optional DOMString encoding) 第一个参数传入Blog对象，然后第二个参数传入编码格式，异步将数据读取成功后放到result属性中，读取的内容是普通的文本字符串的形式。

4、获取拖拽的文件

dataTransfer.files[0]——获取拖拽的第一个文件。 案例：实现拖拽本地图片到浏览器，改变浏览器的背景



<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		html,body{height: 100%;}
		body{
			text-align: center;
			position: relative;
		}
		#holder{
			position: absolute;
			width: 980px;
			height: 300px;
			font-size: 35px;
			left: 50%;
			top:50%;
			margin-top: -150px;
			margin-left: -490px;
			background:rgba(0,0,0,0.2);
		}
		#canvas{
			position: absolute;
			z-index: -20;
			top:0;
			left: 0;
		}
		#holder.hover{border: 3px dashed #f00;}
		#holder.normal{border: 3px dashed #fff;}
	</style>
	<script type="text/javascript">
	window.onload=function(){
		var holder = document.getElementById('holder')
		var canvas = document.getElementById('canvas')

		//画布的宽高为浏览器宽高
		canvas.width = window.innerWidth;
		canvas.height = window.innerHeight;

		var ctx = canvas.getContext('2d')

		//验证浏览器是否支持File API
		if(window.File&&window.FileReader&&window.FileList&&window.Blob){
			console.log("支持")
		}else{
			console.log("不支持")
		}

		//拖拽文件到选框中改变其边框
		holder.ondragover = function(){
			this.className = 'hover'
			return false;
		}
		//拖拽结束的事件
		holder.ondragend = function(){
			this.className='normal'
			return false;
		}
		//元素正在拖动的时候触发
		holder.ondrop = function(e){
			this.className='normal';

			e.preventDefault();
			var file=e.dataTransfer.files[0];//获取所拖拽的第一个文件
			reader=new FileReader()//创建一个FileReader对象

			//读取本地文件完毕后执行下面的函数
			reader.onload=function(event){
				img=new Image()

				//将读取的二进制位图数据赋予该对象
				img.src=event.target.result;

				img.onload=function(){
					ctx.clearRect(0,0,canvas.width,canvas.height)
					ctx.drawImage(this,0,0,canvas.width,canvas.height)
					delete this//删除Image对象，释放缓存
				}
			}

			reader.readAsDataURL(file)//在FileReader对象中读取文件内容
			return false;

		}
	}
		
	</script>
</head>
<body>
	<canvas id='canvas'></canvas>
	<div class="normal" id="holder">文件拖拽到这里</div>
</body>
</html>



在线操作

  • Next
    HTML5跨文档通信