文件上传预览

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

</fieldset>
<script>
function $$(id){return 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.onload=function(e){
                        alert(e.target.result);
                        strHtml += "<span>";
                        strHtml += "<img src='"+e.target.result+"' alt=''/>";
                        strHtml += "</span>";
                        $$("prevUpload").innerHTML = "<li>"+strHtml+"</li>";
                    };
                }
            }</script>
原文地址:https://www.cnblogs.com/zywf/p/6179736.html