JavaScript-利用html5 读取本地文件特性实现更好的交互体验

JavaScript-利用html5 读取本地文件特性实现更好的交互体验

偏爱自由 发布于 2017-05-20 字数 385 浏览 1478 回复 4

众所周知,html5实现了读取用户机器文件的接口,利用其可以极大改进用户的交互,比如:
1. 拖拽方式选取文件
2. 上传图片前显示图片的小摘要tumbnail
3. 在浏览器端校验上传文件的mimetype是否与所需文件类新相符
4. 在浏览器端校验上传文件大小
5. 高级功能:切割文件的某段内容
6. 高级功能:监控浏览器读取本地文件的进度

请大家提供相关的Javascript实例。

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(4

浮生未歇 2017-11-01 4 楼

可以使用Html5提供的File Api,它包括:
一个FileList序列,代表着由本地系统里选中的单个的文件组成的数组。用来选择文件的用户接口可以通过<input type=”file”>调用实现。
一个Blob接口,它代表原始二进制数据,通过Blob对象你可以访问里面的字节数据。
一个File接口,它里面存有文件的只读属性信息,像文件名,文件类型,文件数据访问的地址。
一个FileReader接口,它提供了读取一个文件的方法,和一个获取文件读取结果的事件模型。
一个FileError接口和一个FileException对象,它们用来定义这个规范中的错误产生条件。
在使用之前,需要检查你的浏览器是否支持File Api,代码如下

//检查浏览器是否支持File Api提供的所有功能,如果你只需要部分功能,可以省略其它部分的检查.
if (window.File && window.FileReader && window.FileList && window.Blob) {
//全部支持
} else {
alert('该浏览器不全部支持File APIs的功能');
}

通过表单选择:

<input type="file" id="files" name="files[]" multiple />
<output id="list"></output>

<script>
function handleFileSelect(evt) {
var files = evt.target.files; // FileList object
// files is a FileList of File objects. List some properties.
var output = [];
for (var i = 0, f; f = files[i]; i++) {
output.push('<li><strong>', f.name, '</strong> (', f.type || 'n/a', ') - ',
f.size, ' bytes, last modified: ',
f.lastModifiedDate.toLocaleDateString(), '</li>');
}
document.getElementById('list').innerHTML = '<ul>' + output.join('') + '</ul>';
}
document.getElementById('files').addEventListener('change', handleFileSelect, false);
</script>

使用拖放选择:

 <div id="drop_zone">Drop files here</div>
<output id="list"></output>
<script>
// Setup the dnd listeners.
var dropZone = document.getElementById('drop_zone');
dropZone.addEventListener('dragover', handleDragOver, false);
dropZone.addEventListener('drop', handleFileSelect, false);
</script>

接下来是读取选择的图片,FileReader提供了4中读取文件的方式:

 1、FileReader.readAsBinaryString(Blob|File);
2、FileReader.readAsText(Blob|File, opt_encoding);
3、FileReader.readAsDataURL(Blob|File);
4、FileReader.readAsArrayBuffer(Blob|File)
选择其中的任何一种方式读取文件, 处理过程中这些方法可以被使用onloadstart, onprogress, onload, onabort, onerror,和 onloadend.
//这是一个从Url读取图片的示例
<script>
function handleFileSelect(evt) {
var files = evt.target.files; // FileList object
// Loop through the FileList and render image files as thumbnails.
for (var i = 0, f; f = files[i]; i++) {
// Only process image files.
if (!f.type.match('image.*')) {
continue;
}
var reader = new FileReader();
// Closure to capture the file information.
reader.onload = (function(theFile) {
return function(e) {
// Render thumbnail.
var span = document.createElement('span');
span.innerHTML = ['<img class="thumb" src="', e.target.result,'" title="', theFile.name, '"/>'].join('');
document.getElementById('list').insertBefore(span, null);
};
})(f);
// Read in the image file as a data URL.
reader.readAsDataURL(f);
}

}

document.getElementById('files').addEventListener('change', handleFileSelect, false);
</script>

更多的用法见
Reading local files in JavaScript
Native HTML5 Drag and Drop

虐人心 2017-09-23 3 楼

File API的javascript:

 function imagesSelected(myFiles){
for (var i = 0, f; f = myFiles[i]; i++){
var imageReader = new FileReader();
imageReader.onload = (function(aFile){
return function(e){
var span = document.createElement(’span‘);
span.innerHTML =
['<img class="images" src="', e.target.result,'" title="', aFile.name,'"/>'].join(”);
document.getElementById(‘thumbs’).insertBefore(span, null);
};
})(f);
imageReader.readAsDataURL(f);
}
}

function dropIt(e){
imagesSelected(e.dataTransfer.files);
e.stopPropagation();
e.preventDefault();
}

灵芸 2017-08-24 2 楼

写了一个demo,可以实现所有的问题:

 <body>
<div id="container" style="width:200px;height:200px;border:1px solid"></div>
<script type="text/javascript">
var container = document.getElementById("container");
container.addEventListener("drop", handleDrop, false);
container.addEventListener("dragover", handleDrop, false);
container.addEventListener("dragenter", handleDrop, false);

function handleDrop(evt){
evt.stopPropagation();
evt.preventDefault();
if(evt.type == "drop"){
var dt = evt.dataTransfer;
handleFile(dt.files[0]);
}
}

function handleFile(file){
if(file == null)return;
//alert(file.type);//获取文件的MIME类型
//alert(file.size);//获取文件的Size大小

var reader = new FileReader();
reader.onerror = handleFileError;
reader.onload = handleFileLoad;
reader.onloadend = handleFileLoadEnd;
reader.onprogress = handleFileProgress;
reader.readAsBinaryString(file);
}

function handleFileProgress(evt){
//载入进度显示
//进度获取evt.loaded, evt.total
//alert(["progress", evt.loaded, evt.total]);
}
function handleFileLoad(evt){
//载入完成
var result=evt.currentTarget.result;
//返回的二进制以字符串形式存在,去数据采用result.charCodeAt(i)
//获取一部分数据
result.substring(0, 100);//获取前100个字节数据
}
function handleFileError(evt){
//载入错误
//alert(evt.currentTarget.error);
}
function handleFileLoadEnd(evt){
//载入结束(不管是成功,还是失败)
//alert(evt.currentTarget);
}
</script>
</body>

想挽留 2017-05-20 1 楼

evt.target.files确定能访问到FileList? 应该是 evt.dataTransfer.files吧