HTML5文件API之图片预览

图片上传在当今的Web应用中是一个非常常用的功能，如果不需要在上传前进行图片预览则可以简单的使用HTML+Javascript来实 现，但如果一定要在上传之前提供图片预览功能则需要求助于Flash来实现。不过，随着HTML5 File API的诞生这一状况终于有了改观，本文将介绍如何使用HTML5 File API快速的实现图片预览功能。

浏览器支持情况

本文实现的功能在以下浏览器中经过测试：IE8、Firefox3.6、Chrome6.0、Opera10、Safari4。其中 Firefox3.6与Chrome6.0已经实现了该标准（虽然并没有完全遵循标准），其他浏览器均未实现。关于具体的兼容性问题，后文将详细说明。

文件选择与获取

如今最常见的文件选择方式是使用File Input元素，用户通过该元素打开本机文件对话框寻找并选择相应的文件，不过随着HTML5 Drag Drop API的出现又增加了一种新的方式-用户可以直接将本机的文件拖拽到Web页面中。

方式一 <input type=”file”>

<input id=”fileSel” type=”file” onchange=”handleFiles(this.files)”>
<script type=”text/javascript”>

//获取用户选择的文件

function handleFiles(files){

//遍历files并处理

}

</script>

<input id="fileSel" type="file" onchange="handleFiles(this.files)">
<script type="text/javascript">

//获取用户选择的文件

function handleFiles(files){

//遍历files并处理

}

</script>

方式二 Drag & Drop

<div id=”fileDropRegion”>将 文件拖拽到此</div>
<script type=”text/javascript”>

//获取用户选择的文件

var dr = document.getElementById(‘fileDropRegion’);

dr.addEventListener(“drop”,function(e){
e.stopPropagation();
e.preventDefault();

var dt = e.dataTransfer;

//获取文件数组
var files = dt.files;
handleFiles(files);
},false);

function handleFiles(files){

//遍历files并处理

}

</script>

<div id="fileDropRegion">将文件拖拽到此</div>
<script type="text/javascript">

//获取用户选择的文件

var dr = document.getElementById('fileDropRegion');

dr.addEventListener("drop",function(e){
e.stopPropagation();
e.preventDefault();

var dt = e.dataTransfer;

//获取文件数组
var files = dt.files;
handleFiles(files);
},false);

function handleFiles(files){

//遍历files并处理

}

</script>

文件读入与展示

通过上文中的方法我们获取到了用户选择的文件数组，接下来就该操作其中的每一个文件了，如HTML5 File API描述的那样，每个文件对象应该包含以下属性：

readonly attribute DOMString name;           //The name of the file.

readonly attribute unsigned long long size; //Represents the size of the Blob object in bytes.

readonly attribute DOMString type;            //The media type of the Blob

readonly attribute DOMString url;              //The URL representing the Blob object.

如果是上传图片则可以通过type属性来进行图片格式过滤，并可以通过size属性来控制图片大小。对于这些属性，Firefox与Chrome的 实现情况是出奇的一致，均只支持name、size和type属性。

生活不易，码农辛苦
如果您觉得本网站对您的学习有所帮助,可以手机扫描二维码进行捐赠