文件上传预览
<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>