測試文字功能,小工具,標題

記錄很重要,不然會浪費很多時間在找以前的記憶

一個人的氣度,決定他未來的高度。

2014年3月19日 星期三

FileUpload上傳圖片前預遊覽圖片,使用javascript,相容多數遊覽器

FileUpload 上傳圖片前預遊覽圖片,使用 javascript,相容多數遊覽器

1030320測試IE8、Chrome可用

=============圖   示===================================




















==============說       明=================================

Chrome、Firefox、IE10 使用FileReader秀圖。
IE6~9 要用濾鏡 filter:progid:DXImageTransform.Microsoft.AlphaImageLoader 來秀圖

==============下面是code===============================

<head>

<style type="text/css">
#picview, .img, img
{
 width:200px;
 height:200px;
 }
 #picview
 {
border:1px solid #000;
 }
 </style>

 <script type="text/javascript">
 function picview(file)
 {
 var picviewDiv = document.getElementById('picview');
 if (file.files && file.files[0])
 {
 var reader = new FileReader();
 reader.onload = function(evt){
 picviewDiv.innerHTML = '<img src="' + evt.target.result + '" />';
 }
 reader.readAsDataURL(file.files[0]);
 }
 else
 {
 picviewDiv.innerHTML = '<div class="img" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src=\'' + file.value + '\'"></div>';
 }
 }
</script>

 </head>


 <body>
 <div id="picview"></div>
<asp:FileUpload ID="FileUpload1" runat="server" onchange="picview(this)" />


</body>

 </html>

沒有留言:

張貼留言