js預覽上傳圖片
阿新 • • 發佈：2018-03-23
輸出 rip BE hang gin filter gid onchange QQ
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <style type="text/css"> #preview, .img, img { width: 200px; height: 200px; } #preview { border: 1px solid #000; margin-left: 88px; margin-top: -15px; } </style> </head> <body> <div style="margin-bottom: 15px; clear: both"> <label style="padding: 9px 15px;"> <span style="color: red;">*</span>輪播圖 </label> <input type="file" onchange="preview(this)" /> </div> <div style="margin-bottom: 15px; position: relative;"> <label style="padding: 9px 15px;"> 縮略圖 </label> <div id="preview"></div> </div> <div style="margin-bottom: 15px; clear: both"> <label style="padding: 9px 15px;"> <span style="color: red;">*</span>鏈接 </label><input type="text" /> </div> <div style="margin-bottom: 15px; clear: both"> <label style="padding: 9px 15px;"> <span style="color: red;">*</span>描述 </label> <input type="text" /> </div> <div> <input type="button" value="增加" id="tj"> </div> <script type="text/javascript"> document.getElementById("tj").onclick = function(){ alert("添加按鈕事件!"); }; function preview(file) { //輸出數據 //console.log("12312000111222"); //console.log(file); //<input type="file" onchange="preview(this)"> //console.log(file.files);//FileList {0: File(88977), length: 1} //console.log(file.files[0]);//File(88977) {name: "QQ截圖20180323131837.png", lastModified: 1521782319792, lastModifiedDate: Fri Mar 23 2018 13:18:39 GMT+0800 (中國標準時間), webkitRelativePath: "", size: 88977, …} //-- var prevDiv = document.getElementById(‘preview‘);//獲取這個div對象 console.log(file.files && file.files[0]); //File(88977) {name: "QQ截圖20180323131837.png", lastModified: 1521782319792, lastModifiedDate: Fri Mar 23 2018 13:18:39 GMT+0800 (中國標準時間), webkitRelativePath: "", size: 88977, …} if (file.files && file.files[0]) { //--檢測瀏覽器是否支持Filereader if(window.FileReader) { var fr = new FileReader(); // add your code here } else { alert("Not supported by your browser!"); } //-- var reader = new FileReader(); reader.onload = function(evt) { prevDiv.innerHTML = ‘<img src="‘ + evt.target.result + ‘" />‘; } reader.readAsDataURL(file.files[0]); } else { prevDiv.innerHTML = ‘<div class="img" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src=\‘‘ + file.value + ‘\‘"></div>‘; } } </script> </body> </html>
js預覽上傳圖片