Html5 FileReader實現(xiàn)即時上傳圖片功能實例代碼
來源:易賢網(wǎng) 閱讀:2181 次 日期:2014-11-20 15:11:39
溫馨提示:易賢網(wǎng)小編為您整理了“Html5 FileReader實現(xiàn)即時上傳圖片功能實例代碼”,方便廣大網(wǎng)友查閱!

下面的是在ie9下面實現(xiàn)的預(yù)覽,跟ie8還是不一樣的,不過我記得貌似ie8好像也是利用了fiter的功能,因為項目只要求在ie9以上,所以就沒有寫出ie8的啦

代碼如下:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document</title>

</head>

<body>

<p><style type="text/css">

#kk{

width:400px;

height:400px;

overflow: hidden;

}

#preview_wrapper{

width:300px;

height:300px;

background-color:#CCC;

overflow: hidden;

}

#preview_fake{ /* 該對象用于在IE下顯示預(yù)覽圖片 */

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);

width:300px;

overflow: hidden;

}

#preview_size_fake{ /* 該對象只用來在IE下獲得圖片的原始尺寸,無其它用途 */

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image);

width:300px;

visibility:hidden;

overflow: hidden;

}

#preview{ /* 該對象用于在FF下顯示預(yù)覽圖片 */

width:300px;

height:300px;

overflow: hidden;

}

</style><script type="text/javascript">

function onUploadImgChange(sender){

if( !sender.value.match( /.jpg|.gif|.png|.bmp/i ) ){

alert('圖片格式無效!');

return false;

}

var objPreview = document.getElementById('preview');

var objPreviewFake = document.getElementById('preview_fake');

var objPreviewSizeFake = document.getElementById('preview_size_fake');

if( sender.files && sender.files[0] ){ //這里面就是chrome和ff可以兼容的了

objPreview.style.display = 'block';

objPreview.style.width = 'auto';

objPreview.style.height = 'auto';

// Firefox 因安全性問題已無法直接通過 input[file].value 獲取完整的文件路徑

objPreview.src = sender.files[0].getAsDataURL();

}else if( objPreviewFake.filters ){

// IE7,IE8 在設(shè)置本地圖片地址為 img.src 時出現(xiàn)莫名其妙的后果

//(相同環(huán)境有時能顯示,有時不顯示),因此只能用濾鏡來解決

// IE7, IE8因安全性問題已無法直接通過 input[file].value 獲取完整的文件路徑

sender.select();

sender.blur();

var imgSrc = document.selection.createRange().text;

objPreviewFake.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = imgSrc;

objPreviewSizeFake.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = imgSrc;

alert("已成功選擇圖片!");

alert(objPreviewSizeFake.offsetWidth);

autoSizePreview( objPreviewFake,objPreviewSizeFake.offsetWidth, objPreviewSizeFake.offsetHeight );

objPreview.style.display = 'none';

}

}

function onPreviewLoad(sender){

autoSizePreview( sender, sender.offsetWidth, sender.offsetHeight );

}

function autoSizePreview( objPre, originalWidth, originalHeight ){

var zoomParam = clacImgZoomParam( 300, 300, originalWidth, originalHeight );

objPre.style.width = zoomParam.width + 'px';

objPre.style.height = zoomParam.height + 'px';

objPre.style.marginTop = zoomParam.top + 'px';

objPre.style.marginLeft = zoomParam.left + 'px';

}

function clacImgZoomParam( maxWidth, maxHeight, width, height ){

var param = { width:width, height:height, top:0, left:0 };

if( width>maxWidth || height>maxHeight ){

rateWidth = width / maxWidth;

rateHeight = height / maxHeight;

if( rateWidth > rateHeight ){

param.width = maxWidth;

param.height = height / rateWidth;

}else{

param.width = width / rateHeight;

param.height = maxHeight;

}

}

param.left = (maxWidth - param.width) / 2;

param.top = (maxHeight - param.height) / 2;

return param;

}

</script> <input name="localfile" type="file" id="localfile" size="28" onchange="onUploadImgChange(this)"/> <!--以下是預(yù)覽圖片用的-->

<div id="kk">

<div id="preview_wrapper">

<div id="preview_fake">

<img id="preview" src="" onload="onPreviewLoad(this)"/>

</div>

</div>

<br/>

<img id="preview_size_fake" />

</div></p>

</body>

</html>

更多信息請查看IT技術(shù)專欄

更多信息請查看網(wǎng)頁制作
易賢網(wǎng)手機(jī)網(wǎng)站地址:Html5 FileReader實現(xiàn)即時上傳圖片功能實例代碼
由于各方面情況的不斷調(diào)整與變化,易賢網(wǎng)提供的所有考試信息和咨詢回復(fù)僅供參考,敬請考生以權(quán)威部門公布的正式信息和咨詢?yōu)闇?zhǔn)!

2025國考·省考課程試聽報名

  • 報班類型
  • 姓名
  • 手機(jī)號
  • 驗證碼
關(guān)于我們 | 聯(lián)系我們 | 人才招聘 | 網(wǎng)站聲明 | 網(wǎng)站幫助 | 非正式的簡要咨詢 | 簡要咨詢須知 | 加入群交流 | 手機(jī)站點 | 投訴建議
工業(yè)和信息化部備案號:滇ICP備2023014141號-1 云南省教育廳備案號:云教ICP備0901021 滇公網(wǎng)安備53010202001879號 人力資源服務(wù)許可證:(云)人服證字(2023)第0102001523號
云南網(wǎng)警備案專用圖標(biāo)
聯(lián)系電話:0871-65099533/13759567129 獲取招聘考試信息及咨詢關(guān)注公眾號:hfpxwx
咨詢QQ:526150442(9:00—18:00)版權(quán)所有:易賢網(wǎng)
云南網(wǎng)警報警專用圖標(biāo)