如何预览将要上传的图片-使用H5的FileAPI

标签：

这篇将要说的东西已经不新鲜了.

　　参考资料: Reading files in JavaScript using the File APIs (鉴于作者在美国, 我姑且认为作者母语是英语, 当然链接中有本地化可以选择中文)

要做什么效果呢, 就是页面上有个<input type="file" />, 用户选择需要上传的图片后, 页面上显示将要上传的图片.

以前呢, 需要Ajax将原图上传到服务器, 得到成功响应后在页面上添加一张图片. 如果用户发现上传错了, 需要把服务器上的相应图片删除.

现在呢, 可以这样, 先上代码:

document.querySelector(‘#upfile‘).onchange = function (evt) {
    var files = evt.target.files;
    for(var i = 0, f; f = files[i]; i++){
        if(!f.type.match(‘image.*‘)) continue;
        
        var reader = new FileReader();
        reader.onload = (function(theFile){
            return function(e){
                var img = document.createElement(‘img‘);
                img.title = theFile.name;
                img.src = e.target.result;
                document.body.appendChild(img); //这里你想插哪插哪  
            }
        })(f);
        reader.readAsDataURL(f);
    }  
}

 1 document.querySelector(‘#upfile‘).onchange = function () {
 2     var fileReader = new FileReader();
 3     fileReader.onload = function (e) {
 4         if (fileReader.readyState == FileReader.DONE) {
 5             var img = document.createElement(‘img‘);
 6             img.src = this.result;
 7             document.body.appendChild(img); //示例只是简单插入body
 8         }
 9     }
10     //一次加载多个文件
11     var i = 0, src = this.files;
12     fileReader.readAsDataURL(src[i]);
13     fileReader.onloadend = function () {
14         i++;
15         if (i < src.length) fileReader.readAsDataURL(src[i]);
16     }
17 }

这是我写的, 你们就别看了

　　转载请注明出处: http://www.cnblogs.com/zaiyuzhong/p/reading-files-by-fileAPIs.html

相应的html节点: <input type="file" id="upfile" multiple /> (如果不使用多选除去multiple)

这段代码的关键在被实例化的FileReader对象上, FileReader包括四个异步读取文件的选项:

• FileReader.readAsBinaryString(File|Blob) // result将包含二进制字符串形式的数据
• FileReader.readAsText(File|Blob, [encoding]) // result将包含字符串形式的数据, 编码格式默认utf-8, 可通过encoding参数指定
• FileReader.readAsDataURL(File|Blob) // result将包含数据网址形式的数据
• FileReader.readAsArrayBuffer(File|Blob) // result将包含ArrayBuffer形式的数据

调用某种方法后, 会有 onloadstart, onprogress, onload, onabort, onerror 和 onloadend 这几种事件.

如何预览将要上传的图片-使用H5的FileAPI

标签：

原文地址：http://www.cnblogs.com/zaiyuzhong/p/reading-files-by-fileAPIs.html