首頁 > 開發者 > 網站開發

利用js載入本地圖片預覽功能

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

標籤：style   class   blog   java   http   tar   

直接上代碼：

經測試，除safari6包括6以下不支援，其他均可正常顯示。

原因：safari6不支援filereader，同時不能使用IE濾鏡導致失效。

fix: 可以利用canvas，解決safari6的問題

<!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>圖片上傳本地預覽</title>     <style type="text/css">#preview{width:260px;height:190px;border:1px solid #000;overflow:hidden;}#imghead {filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image);}</style><script type="text/javascript">        //圖片上傳預覽    IE是用了濾鏡。        function previewImage(file)        {          var MAXWIDTH  = 260;           var MAXHEIGHT = 180;          var div = document.getElementById(‘preview‘);          if (file.files && file.files[0])          {              div.innerHTML =‘<img id=imghead>‘;              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.marginLeft = rect.left+‘px‘;                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>‘;            var img = document.getElementById(‘imghead‘);            img.filters.item(‘DXImageTransform.Microsoft.AlphaImageLoader‘).src = src;            var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight);            status =(‘rect:‘+rect.top+‘,‘+rect.left+‘,‘+rect.width+‘,‘+rect.height);            div.innerHTML = "<div id=divhead style=‘width:"+rect.width+"px;height:"+rect.height+"px;margin-top:"+rect.top+"px;"+sFilter+src+"\"‘></div>";          }        }        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">    <img id="imghead" width=100 height=100 border=0 src=‘‘></div>             <input type="file" onchange="previewImage(this)" />     </body>     </html>

　　

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More