javascript實現(xiàn)的圖片預覽和上傳功能示例【兼容IE 9】

更新時間：2020年05月01日 12:05:01 作者：廖飛銀

這篇文章主要介紹了javascript實現(xiàn)的圖片預覽和上傳功能,結合實例形式分析了javascrpt圖片預覽和上傳功能相關實現(xiàn)技巧與操作注意事項,需要的朋友可以參考下

本文實例講述了javascript實現(xiàn)的圖片預覽和上傳功能。分享給大家供大家參考，具體如下：

下載DEMO：https://github.com/CaptainLiao/zujian/tree/master/Upload

對于現(xiàn)代瀏覽器來說，要實現(xiàn)圖片預覽非常簡單：

1、fileReader.readAsDataURL(file)

2、window.URL.createObjectURL(file)

以上兩種方法分別可以得到一個base64和一個blob對象的URL地址，從而實現(xiàn)預覽。但是，他們只支持在IE10+，顯然這是不夠的，如何實現(xiàn)低版本IE瀏覽器的圖片預覽呢？代碼如下：

<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <script type="text/javascript" language="javascript">
    $('#preview_fake').change(function () {
      previewImg($(this), $('#preview'));

    });
    function previewImg($inputId, $previewId) {
      var inputId = $inputId[0],
        previewId = $previewId[0];
      $previewId.empty();
      if(/msie/.test(navigator.userAgent.toLowerCase())){
        if($.support.version == 6.0){
          $previewId.attr("src",inputId.value);
        }else{
          inputId.select();
          var reallocalpath = document.selection.createRange().text;
          previewId.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod='scale',src=\"" + reallocalpath + "\")";
          // 設置img的src為base64編碼的透明圖片 取消顯示瀏覽器默認圖片
          previewId.src = 'data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==';
        }
      }else {
        $previewId.attr("src",window.URL.createObjectURL(previewFake.files[0]));
      }
    }
 </script>

 </head>
 <body>
   <form id="form1" runat="server">
   <div>
     選擇圖片：<input type="file" size="20" id='preview_fake'" /> 
   </div>
    <div id="preview" style="width: 300px; height: 300px">
   </div>    
   </form>
 </body>
</html>

這樣，我們就能夠在IE10- 下預覽上傳的圖片了。

在這里，有必要對幾個參數(shù)說明一下，以免后人再入坑！

progid:DXImageTransform.Microsoft.AlphaImageLoader([enabled=bEnabled ,] [sizingMethod=sSize ,] src=sURL)

enabled： 可選。布爾值(Boolean)。設置或檢索濾鏡是否激活。