html5上傳圖片實時預覽

時間 2019-12-06

標籤 html5 html 上傳圖片實時預覽欄目 HTML5 简体版

原文原文鏈接

最近項目中客戶提出需求，上傳圖片、或者修改圖片時須要可以預覽圖片，防止圖片上傳錯誤。html

因爲功能原來已經作好，只有圖片上傳到服務器端了，而後統計img標籤的url屬性來獲取已經上傳了的圖片進行查看，但沒有作到實時預覽的功能，ajax

須要預覽有兩種解決辦法：服務器

1、在選擇文件時，除非ajax請求直接上傳到服務器，而後給img的url賦值this

2、經過FileReader讀取本地文件路徑。url

因爲第一種方法須要和後臺交換，沒有保存又須要刪除文件，因此不可行。spa

下面就介紹第二種實現方式。code

FileReader做爲文件API用於讀取文件，FileReader接口提供了讀取文件的方法和包含讀取結果的事件模型。orm

腳本：

function preview(file){  
     var prevDiv = document.getElementById('photoDivId');  
     if (file.files && file.files[0]){ 
         if(window.FileReader) {  
            var fr = new FileReader();
         } 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>';  
    }  
 }

html代碼htm

<body>
<div id="photoDivId" >
<img  id="photoId" name="member.photo_path"  style="width:142px;height:198px;" />
</div>
<input type="file" accept="image/gif,image/jpeg,image/png" class="file-input"   name="photoFile" onchange="preview1(this)">
</body>

經過readAsDataURL方法去讀取內容。接口

這樣就能夠實現圖片上傳實時預覽功能了。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。