前端圖片預覽，上傳前預覽【兼容IE七、八、九、十、11，Firefox，Chrome】

時間 2019-11-06

標籤前端圖片預覽上傳兼容 firefox chrome 欄目 Firefox 简体版

原文原文鏈接

在如今的Web開發中不可避免的會作一個圖片預覽的功能，好比在上傳圖片的狀況下，一個很簡單的辦法就是講圖片上傳至服務器以後，再將文件的URL返回回來，而後異步經過這個URL加載剛剛上傳的圖片，實現圖片的預覽，很明顯的在這個過程當中兩次Web請求，一次發送文件，一次下載文件，到最後這個文件若是在客戶端被刪除（取消上傳，棄用此次的上傳），這整個過程都白費了。咱們但願可以在圖片上傳以前就能進行圖片的預覽，這樣就避免了沒必要要的網絡請求和時間等待。下面的內容就圍繞這個話題展開。javascript

本地圖片預覽css

IE中的本地圖片預覽（以本地文件的形式訪問）

在IE中可以很方便的實現本地網頁的圖片預覽，IE中的<input type="file" id="file_upload">中的File對象中的value屬性，存儲的是要上傳的文件的完整路徑，在IE中只須要將這個完整路徑做爲一個Image對象的src屬性，就能實如今這個Image對象中對這個上傳的圖片進行預覽。html

在IE中有以下方式:java

var url;
var fileobj = document.getElementById(sourceId);
fileobj.select();
url = document.selection.createRange().text;

或者jquery

var url = document.getElementById(sourceId).value;

兩種方式獲取到的路徑直接給img src 能夠進行本地圖片的預覽（能夠加上file:///協議，效果同樣），這兩種方式對IE七、八、九、十、11下有效。web

Firefox和Chrome的本地圖片預覽瀏覽器

在Firefox和Chrome中使用以下方式:服務器

var url = window.URL.createObjectURL(document.getElementById(sourceId).files[0])網絡

將獲得的值給img src 進行圖片預覽。可能還會看到以下的方式：var url = obj.files.item(0).getAsDataURL();app

這種使用Firefox File對象的getAsDataURL的方式，已經在Firefox 7.0之後棄用，Firefox DOM File，可能緣由是在HTML5標準中有相關的定義。

服務端圖片預覽

IE中的本地圖片預覽（以服務端URL的形式訪問）

上面提到的本地預覽的方式，在以服務端URL的形式方式下沒有預覽的效果，須要使用以下濾鏡的形式。

function PreviewImg(imgFile){
     var newPreview = document.getElementById("newPreview");
     var imgDiv = document.createElement("div");
     document.body.appendChild(imgDiv);
     imgDiv.style.width = "118px";     imgDiv.style.height = "127px";
     imgDiv.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod = scale)";
     imgDiv.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgFile.value;
     newPreview.appendChild(imgDiv);
}

上面的實現能夠在IE七、八、9下運行，在IE十、11下無效。h2. Firefox和Chrome的本地圖片預覽在Firefox和Chrome中使用以下方式:

var url = window.URL.createObjectURL(document.getElementById(sourceId).files[0])

將獲得的值給img src 進行圖片預覽。可能還會看到以下的方式：

var url = obj.files.item(0).getAsDataURL();

這種使用Firefox File對象的getAsDataURL的方式，已經在Firefox 7.0之後棄用，Firefox DOM File，可能緣由是在HTML5標準中有相關的定義。

基礎

在Chrome中，window.URL和window.webkitURL都存在
在Firefox中，僅Window.URL存在
在IE11（Edge），10中僅window.URL存在
在IE七、八、9中不存在window.URL
在IE中能經過FileObject 的value 屬性獲取文件全路徑
在Chrome中沒法獲取FileObject的全路徑，獲得的是一個假路徑
在Firefox中根本獲取不到路徑，獲得的是一個文件名
在IE七、八、9中沒法獲取到FileObject的files屬性

實現

之前咱們老是按照userAgent，經過判斷IE，仍是Chrome，仍是Firefox，或者Safari、Opera等來對應支持代碼，如今這種方式可能須要有所調整，File API是HTML5的規範特性，所以能夠將瀏覽器大體先分爲兩個大類，一個是支持HTML5的一類，另外一個是不支持的。

<html xmlns="http://www.w3.org/1999/xhtml">
 
<head id="Head1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css">
    .image_container {
        width: 48px;
        height: 48px;
        position: relative;
    }
    </style>
    <script type="text/javascript" src="jquery.js"></script>
    <script language="javascript">
    $(function() {
        $("#file_upload").change(function() {
            var $file = $(this);
            var fileObj = $file[0];
            var windowURL = window.URL || window.webkitURL;
            var dataURL;
            var $img = $("#preview");
 
            if(fileObj && fileObj.files && fileObj.files[0]){
                dataURL = windowURL.createObjectURL(fileObj.files[0]);
                $img.attr('src',dataURL);
            }else{
                dataURL = $file.val();
 
                // $img.css("filter",'progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod = scale,src="' + dataURL + '")');
 
                // var imgObj = document.getElementById("preview");
                // imgObj.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src=\"" + dataURL + "\")";
                // imgObj.style.width = "48px";
                // imgObj.style.height = "48px";
 
                var imgObj = document.getElementById("preview");
                // 兩個坑:
                // 一、在設置filter屬性時，元素必須已經存在在DOM樹中，動態建立的Node，也須要在設置屬性前加入到DOM中，先設置屬性在加入，無效；
                // 二、src屬性須要像下面的方式添加，上面的兩種方式添加，無效；
                imgObj.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
                imgObj.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = dataURL;
 
            }
        });
    });
    </script>
</head>
<body>
    <div id="demo">
        <input id="file_upload" type="file" />
        <div class="image_container">
            <img id="preview" width="60" height="60">
        </div>
    </div>
</body>
</html>

相關標籤/搜索

每日一句

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