【小月博客】用HTML5的File API做上传图片预览功能

时间：2022-07-14 05:53:39

前段时间做了一个项目，涉及到上传本地图片以及预览的功能，正好之前了解过 html5（点击查看更多关于web前端的有关资源） 可以上传本地图片，然后再网上看了一些demo结合自己的需求，终于搞定了。（PS ： 不得不承认我这个人有多懒，没有需求的时候我向来不主动去学习）。移动端完全支持哦！已测试。

下面给大家看看代码吧怎么实现的

第一：HTLM部分（这里不去做漂亮的样式了我们注重学习功能）

<input type="file" id="fileElem" multiple accept="image/*"  onchange="handleFiles(this)">

<div id="fileList" style="width:200px;height:200px;"></div>

注：如果想写成很漂亮的那种上传按钮，告诉大家我的写法就是模拟上传，即在input下面决定定位一张图片（上传按钮），input的宽高和图片色值一样大小，透明度为0 ，最后别忘记涉及z-index的顺序。

第二：JS利用H5新功能处理上传

Js实现图片上传前的预览功能，主要是使用html5 的 Files API 实现，ie可兼容部分功能，在火狐和chrome下正常运行。HTML5的 file input标签支持multiple 和 accept ，前一个属性可控制多文件选择，后一个控制上传的文件类型。预了解更多关于File API的资料，有自己查下。

如有不明白请查看注解，或者给我留言都可以的。

注解：

这里我们就说一下思路吧（我自己的理解）：

  1. 首先 img.src = window.URL.createObjectURL(files[0]) 是我们创建的本地路径，为了本地预览而设置的。
  2. 第二我们就涉及到了H5上传那么我们第一步就是读出来这个图片的信息 reader.onload 这个方法就是读取img的信息数据
  3. 当读取成功就可以调用上传的后台接口，来处理文件上传到什么位置了。
<script>

    window.URL = window.URL || window.webkitURL;

    var fileElem = document.getElementById("fileElem"),

    fileList = document.getElementById("fileList");

    function handleFiles(obj) {

        var files = obj.files,

        img = new Image();

        if(window.URL){

            //File API

            alert(files[0].name + "," + files[0].size + " bytes");

            img.src = window.URL.createObjectURL(files[0]); //创建一个object URL，并不是你的本地路径

            img.width = 200;

            img.onload = function(e) {

                window.URL.revokeObjectURL(this.src); //图片加载后，释放object URL

            }

            fileList.appendChild(img);

        }else if(window.FileReader){

            //opera不支持createObjectURL/revokeObjectURL方法。我们用FileReader对象来处理

            var reader = new FileReader();

            reader.readAsDataURL(files[0]);

            reader.onload = function(e){

                alert(files[0].name + "," +e.total + " bytes");

                img.src = this.result;

                img.width = 200;

                fileList.appendChild(img);

            }

        }else{

            //ie

            obj.select();

            obj.blur();

            var nfile = document.selection.createRange().text;

            document.selection.empty();

            img.src = nfile;

            img.width = 200;

            img.onload=function(){

                alert(nfile+","+img.fileSize + " bytes");

            }

            fileList.appendChild(img);

        }

    }

</script>

PS: ：大家在用的时候有什么问题及时给我反馈，我写的肯定不是做好的，其实我想学习一下可以多张上传的功能。但是现阶段只能分享到这里了。

相关文章