先貼代碼，之后完善：
<!doctype html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <title>js多種方式圖片預覽-持續更新</title> </head> <body> <body> <input type="file" id="file" value="選擇" accept="image/*"> <div style="width:300px;height:300px;border:1px solid #ccc"> <img id="img_show" src="" /> </div> </body> <script type="text/javascript" src="./jquery-3.1.1.min.js"></script> <script type="text/javascript"> //設置自己的變量存儲區 var Util = { file : $("#file"), image_show:$("#img_show") } Util.file.onchange=function(f){ if(this.files[0].type.indexOf('image')<0){ alert("請選擇圖片文件!"); return; } if(this.files[0].size/1024 > 5*1024){ alert("圖片過大，請選擇5M以下的文件"); return; } if(typeof FileReader=='undefined'){//如果支持,typeOf返回的也是 Function alert("您的瀏覽器不支持html5 fileReader請更換瀏覽器重試!"); return; } var reader = new FileReader(); reader.readAsDataURL(this.files[0]);//這里傳的是一個blob ，其實file對象就是繼承自bolob reader.onload=function(e){ console.log(reader.result);//這里拿到的是一個base64編碼后的圖片 Util.image_show.src=reader.result; } }; </script></html>
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持VeVb武林網。
新聞熱點
疑難解答
