HTML5中file方法上傳檔案預覽 示例
阿新 • • 發佈:2018-12-11
效果圖如下:
程式碼如下:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> *{margin: 0;padding: 0;} ul li{ list-style: none; } textarea{ resize: none; } .btn{ outline: none; padding: 8px 10px; border: none; cursor: pointer; color: #fff; border-radius: 4px; } .fr{ float: right; } .container{ width: 600px; margin: 20px auto; border:1px solid #ddd; border-radius: 4px; padding: 10px 12px; } .header{ position: relative; } .header_detail{ height: 40px; } .send{ background: blueviolet; } .view{ min-height: 100px; border: 1px solid black; padding: 10px 12px; display: none; } .view .item{ display: inline-block; margin-right: 19px; margin-bottom: 5px; } .view img{ width:120px; height: 120px; } .load{ display: inline-block; width: 24px; height: 24px; overflow: hidden; position: relative; background:url(img/load.png) no-repeat; background-size: 100% 100%; } .load input{ /*font-size: 100px;*/ position: absolute; right: 0; top: 0; opacity: 0; } .list{ margin-top: 20px; } </style> </head> <body> <div class="container"> <div class="header"> <div class="header_detail"> <a href="javascript:;" class="load"> <input type="file" name="file" id="flie" /> </a> <button class="btn fr send">傳送</button> </div> <div class="view" id="view"> <!--<div class="item"> <img src="img/1.jpg" /> </div>--> <!--<div class="item"> <img src="img/2.jpg" /> </div> <div class="item"> <img src="img/3.jpg" /> </div> <div class="item"> <img src="img/4.jpg" /> </div> <div class="item"> <img src="img/5.jpg" /> </div>--> </div> </div> </div> <script> var oFile = document.getElementById("flie") var oView = document.getElementById("view") var obj = {} oFile.addEventListener("change",function(){ var fs = this.files[0] var reader = new FileReader() reader.onload = function(){ oView.style.display = "block" if(!obj[this.result]){ var oImg = document.createElement("img") var oDiv = document.createElement("div") oDiv.className = "item" oImg.src = this.result oDiv.appendChild(oImg) oView.appendChild(oDiv) obj[this.result] = this.result } else { alert('不可以重複上傳') } } reader.onprogress = function(){ console.log("正在讀取") } reader.readAsDataURL(fs) }) </script> </body> </html>
謝謝大家----