HTML使用FileReader对象的readAsDataURL()方法实现图片的上传预览效果

FileReader接口提供了一个异步的API，通过这个API可以从浏览器中异步访问文件系统中的数据。因此，FileReader接口可以读取文件中的数据，并将读取的数据放入到内存中去。

通过FileReader接口中的readAsDataURL()方法可以获取API异步读取的文件数据，另存为数据URL;将该URL绑定到img标签的src属性上，就可以实现图片的上传预览效果了。

注意：当访问不同的文件时，必须重新调用FileReader的构造函数，也就是重新new一个FileReader对象，因为每调用一次，FileReader对象都将返回一个新的FileReader实例，只有这样，才能实现访问不同文件的数据

html代码：

                

使用readAsDataUrl()方法预览图片

                
                

js代码：

function $$(id){

retturn document.getElementById(id);

}

function filePrevImg(files){
                //检测浏览器是否支持FileReader对象
                if(typeof FileReader == "undefined"){
                    alert("您的浏览器不支持FileReader对象！");
                }
                var strHtml = "";
                for(var intI=0;intI                     var tmpFile = files[intI];
                    var reader = new FileReader();//每循环一次都要重新new一个FileReader实例
                    reader.readAsDataURL(tmpFile);
                    reader.οnlοad=function(e){
                        alert(e.target.result);
                        strHtml += "";
                        strHtml += "";
                        strHtml += "";
                        $$("prevUpload").innerHTML = "

"+strHtml+"

";
                    };
                }
            }