首页 > 代码库 > 用HTML5的File API做上传图片预览功能

用HTML5的File API做上传图片预览功能

2024-07-17 07:09:14   219人阅读

  • Js实现图片上传前的预览功能，主要是使用html5 的 Files API实现，ie可兼容部分功能，在火狐和chrome下正常运行。HTML5的 file input标签支持multiple 和 accept ，前一个属性可控制多文件选择，后一个控制上传的文件类型。预了解更多关于File API的资料，有自己查下。
<title>河北草坪</title><input type="file" id="fileElem" multiple accept="image/*"  onchange="handleFiles(this)"><div id="fileList" style="width:200px;height:200px;"></div><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);            //fileList.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=‘image‘,src=http://www.mamicode.com/‘"+nfile+"‘)";        }    }</script>

 


联系
我们