javascript如何實(shí)現(xiàn)圖片預(yù)覽和上傳功能

發(fā)布時(shí)間：2020-07-29 10:18:14 來(lái)源：億速云閱讀：158 作者：小豬欄目：web開(kāi)發(fā)

這篇文章主要講解了javascript如何實(shí)現(xiàn)圖片預(yù)覽和上傳功能，內(nèi)容清晰明了，對(duì)此有興趣的小伙伴可以學(xué)習(xí)一下，相信大家閱讀完之后會(huì)有幫助。

對(duì)于現(xiàn)代瀏覽器來(lái)說(shuō)，要實(shí)現(xiàn)圖片預(yù)覽非常簡(jiǎn)單：

1、fileReader.readAsDataURL(file)

2、window.URL.createObjectURL(file)

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

<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 + "\")";
          // 設(shè)置img的src為base64編碼的透明圖片 取消顯示瀏覽器默認(rèn)圖片
          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" >
   </div>    
   </form>
 </body>
</html>

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

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

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

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

true：默認(rèn)值。濾鏡激活。
false：濾鏡被禁止。

sizingMethod：可選。字符串(String)。設(shè)置或檢索濾鏡作用的對(duì)象的圖片在對(duì)象容器邊界內(nèi)的顯示方式。

crop：剪切圖片以適應(yīng)對(duì)象尺寸。
image：默認(rèn)值。增大或減小對(duì)象的尺寸邊界以適應(yīng)圖片的尺寸。
scale：縮放圖片以適應(yīng)對(duì)象的尺寸邊界。

src： 必選項(xiàng)。字符串(String)。使用絕對(duì)或相對(duì) url 地址指定背景圖像。假如忽略此參數(shù)，濾鏡將不會(huì)作用。

以上，可以實(shí)現(xiàn)低版本IE瀏覽器的圖片預(yù)覽，但要上傳到服務(wù)器還需要一番周折。對(duì)于單張圖片，可以通過(guò)<form>表單提交，但對(duì)于多張圖片，這需要flash技術(shù)的支持，實(shí)現(xiàn)起來(lái)相當(dāng)麻煩。

這里，樓主推薦一個(gè)現(xiàn)有的輪子：webuploader 組件。

看完上述內(nèi)容，是不是對(duì)javascript如何實(shí)現(xiàn)圖片預(yù)覽和上傳功能有進(jìn)一步的了解，如果還想學(xué)習(xí)更多內(nèi)容，歡迎關(guān)注億速云行業(yè)資訊頻道。

向AI問(wèn)一下細(xì)節(jié)

javascript如何實(shí)現(xiàn)圖片預(yù)覽和上傳功能

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽