講干貨，不啰嗦，開發中有時會遇到上傳圖片並即時生成圖片預覽的需求，以下為具體實現，主要是應用FileReader對象，有需要的請拿走。
具體實現：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>圖片上傳預覽</title> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> </head> <body> <!-- 設置input的type和accept，當然也可設置multiple允許多文件上傳，這里不做設置--> <input type="file" accept="image/*" onchange="showImg(this)" /> <h2>以下為預覽效果：</h2> <img src="" alt="" id="img"> <script> function showImg(obj) { var file=$(obj)[0].files[0]; //獲取文件信息 var imgdata=''; if(file) { var reader=new FileReader(); //調用FileReader reader.readAsDataURL(file); //將文件讀取為 DataURL(base64) reader.onload=function(evt){ //讀取操作完成時觸發。 $("#img").attr('src',evt.target.result) //將img標簽的src綁定為DataURL }; } else{ alert("上傳失敗"); } } </script> <style> img{ width: 400px; } </style> </body> </html>
測試結果：
能力有限，水平一般，錯誤之處，歡迎指正，感謝關注和評論！