一、簡單的圖片上傳並預覽功能input[file]
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <title>簡單的上傳圖片並預覽</title> <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.1.min.js"></script> <style> *{ padding: 0; margin: 0 auto; } .yg_content{ margin-top: 50px; text-align: center; } #upimg{ display: none; } .yg_content p{ padding: 10px; display: inline-block; color: #fff; background: #08c; border: 1px #ccc solid; border-radius: 10px; } .yg_content p:active{ opacity: .5; } .showimg{ margin: 20px auto; border: 1px #ccc solid; border-radius: 10px; width: 200px; height: 200px; } .showimg img{ width: 100%; height: 100%; } </style> </head> <body> <div class="yg_content"> <input type="file" id="upimg" accept="image/*" onchange="upLoad()"> <label for="upimg"> <p>點擊上傳圖片</p> </label> <div class="showimg"> <img id="img" src="images/tx_1.jpg" alt=""> </div> </div> </body> <script> function upLoad(){ var fileInput = document.getElementById("upimg"); var file = fileInput.files[0]; //創建讀取文件的對象 var reader = new FileReader(); //創建文件讀取相關的變量 var imgFile; //為文件讀取成功設置事件 reader.onload=function(e) { // alert('文件讀取完成'); imgFile = e.target.result; console.log(imgFile); $("#img").attr('src',imgFile); }; //正式讀取文件 reader.readAsDataURL(file); } </script> </html>