|
图片上传在当今的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属性。 （编辑：河北网）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!
|
