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>出處
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>出處
沒有留言:
張貼留言