快捷導(dǎo)航

JavaScript實現(xiàn)圖片本地預(yù)覽功能【不用上傳至服務(wù)器】

更新時間：2017年09月20日 10:37:09 作者：yongh701

這篇文章主要介紹了JavaScript實現(xiàn)圖片本地預(yù)覽功能,針對非IE瀏覽器的HTML5濾鏡功能及IE瀏覽器的相關(guān)組件功能實現(xiàn)不上傳至服務(wù)器預(yù)覽本地圖片的效果,需要的朋友可以參考下

本文實例講述了JavaScript實現(xiàn)圖片本地預(yù)覽功能。分享給大家供大家參考，具體如下：

實現(xiàn)一個在file文件域中選定圖片文件之后，馬上進(jìn)行預(yù)覽。不用預(yù)上傳到服務(wù)器，整縮略圖再打回前端用Ajax去預(yù)覽的。直接利用JavaScript即可以完成，而且還可以兼容IE6。具體效果，如下圖所示：

具體實現(xiàn)是在非IE瀏覽器利用HTML5去顯示，在IE瀏覽器則直接調(diào)用IE的濾鏡功能去實現(xiàn)。具體代碼如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>圖片上傳本地預(yù)覽</title>
    <style type="text/css">
      /*設(shè)置IE濾鏡，這里的id=imghead要與下方利用Javascript生成div的id相呼應(yīng)。*/
      #imghead {filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image);}
    </style>
    <script type="text/javascript">
      //圖片上傳預(yù)覽，非IE則用了HTML5的代碼，IE是用了濾鏡
      function previewImage(file, MAXWIDTH, MAXHEIGHT){//MAXWIDTH、MAXHEIGHT與放預(yù)覽圖片的DIV——preview的大小相呼應(yīng)
        var div = document.getElementById('preview');
        if (file.files && file.files[0]) {//HTML5部分
          div.innerHTML = "<img id='imghead'></img>";
          var img = document.getElementById('imghead');
          img.onload = function(){
            var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight);
            img.width = rect.width;
            img.height = rect.height;
            img.style.marginTop = rect.top + 'px';
          }
          var reader = new FileReader();
          reader.onload = function(evt){
            img.src = evt.target.result;
          }
          reader.readAsDataURL(file.files[0]);
        }
        else //兼容IE
        {
          var sFilter = 'filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src="';
          file.select();
          var src = document.selection.createRange().text;
          div.innerHTML = "<img id='imghead'></img>";
          var img = document.getElementById('imghead');
          img.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = src;
          var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight);
          div.innerHTML = "<div style='width:" + rect.width + "px;height:" + rect.height + "px;margin-top:" + rect.top + "px;" + sFilter + src + "\"'></div>";
        }
      }
      //用于計算預(yù)覽圖片的大小
      function clacImgZoomParam(maxWidth, maxHeight, width, height){
        var param = {
          top: 0,
          left: 0,
          width: width,
          height: height
        };
        if (width > maxWidth || height > maxHeight) {
          rateWidth = width / maxWidth;
          rateHeight = height / maxHeight;
          if (rateWidth > rateHeight) {
            param.width = maxWidth;
            param.height = Math.round(height / rateWidth);
          }
          else {
            param.width = Math.round(width / rateHeight);
            param.height = maxHeight;
          }
        }
        param.left = Math.round((maxWidth - param.width) / 2);
        param.top = Math.round((maxHeight - param.height) / 2);
        return param;
      }
    </script>
  </head>
  <body>
    <div id="preview" style="width:320px;height:240px;"></div><!--用來放預(yù)覽圖片的DIV-->
    <input type="file" onchange="previewImage(this,320,240)" accept="image/*" /><!--一旦用戶選擇了圖片文件，則觸發(fā)上方的previewImage函數(shù)-->
  </body>
</html>

首先在preview這個放圖片預(yù)覽的div中生成一個id=imghead的div。

非IE部分，用HTML5直接可以讀取用戶選擇的文件，通過function clacImgZoomParam(maxWidth, maxHeight, width, height)計算出預(yù)覽圖片的大小，之后直接可以將這張圖片放到id=imghead這個div中。如果是IE，生成的id=imghead的div會被賦予在style標(biāo)簽設(shè)置好的濾鏡，通過濾鏡將用戶選擇的圖片文件加載上去，再用clacImgZoomParam函數(shù)求其大小，得到大小之后，清除preview中的所有內(nèi)容，正式生成被賦予圖片濾鏡，其大小確定的div上去。

在<input type="file">文件域也用到accept="image/*"這個HTML5功能用來限制用戶只能選擇圖片文件，但是，在提交表單的時候，還應(yīng)該通過onSubmit判斷，同時更應(yīng)該在服務(wù)器后臺判斷，防止用戶送些奇奇怪怪的東西到服務(wù)器。

更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《JavaScript圖片操作技巧大全》、《JavaScript圖形繪制技巧總結(jié)》、《JavaScript錯誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運算用法總結(jié)》

希望本文所述對大家JavaScript程序設(shè)計有所幫助。

您可能感興趣的文章: