程序员人生 网站导航

HTML5文件API之图片预览

栏目:htmlcss时间:2013-10-21 12:05:19

图片上传在当今的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属性。

------分隔线----------------------------
------分隔线----------------------------

最新技术推荐