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

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

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

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

html代码：

<fieldset>
                <legend>使用readAsDataUrl()方法预览图片</legend>
                <input type="file" name="fileUpload" id="fileUpload" οnchange="filePrevImg(this.files);" multiple="true" />
                <ul id="prevUpload"></ul>

</fieldset>

js代码：

function $$(id){

retturn document.getElementById(id);

}

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