兼容IE和FF的圖片上傳前預(yù)覽js代碼
更新時(shí)間：2013年05月28日 17:06:51 作者：
上傳前預(yù)覽使用js實(shí)現(xiàn)還是比較cool的，同時(shí)還可以兼容IE和FF的能做到這一點(diǎn)已經(jīng)相當(dāng)不容易了，下面與大家一起分享下具體的實(shí)現(xiàn)，感興趣的你可不要錯(cuò)過(guò)了哈
效果圖如下：
代碼如下：
<!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">
#preview{width:100px;height:100px;border:1px solid #000;overflow:hidden;}
#imghead {filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image);}
</style>
<script type="text/javascript">
function previewImage(file)
{
var MAXWIDTH = 100;
var MAXHEIGHT = 100;
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
{
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;margin-left:"+rect.left+"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='../images/head01_big.jpg'>
</div>
<br/>
<input type="file" onchange="previewImage(this)" />
</body>
</html>
代碼如下：
復(fù)制代碼 代碼如下:
<!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">
#preview{width:100px;height:100px;border:1px solid #000;overflow:hidden;}
#imghead {filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image);}
</style>
<script type="text/javascript">
function previewImage(file)
{
var MAXWIDTH = 100;
var MAXHEIGHT = 100;
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
{
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;margin-left:"+rect.left+"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='../images/head01_big.jpg'>
</div>
<br/>
<input type="file" onchange="previewImage(this)" />
</body>
</html>
您可能感興趣的文章:
- js實(shí)現(xiàn)圖片上傳并預(yù)覽功能
- Javascript圖片上傳前的本地預(yù)覽實(shí)例
- js圖片上傳前預(yù)覽功能（兼容所有瀏覽器）
- js實(shí)現(xiàn)圖片上傳預(yù)覽原理分析
- 圖片上傳之前檢查大小、尺寸、格式并預(yù)覽的js代碼
- Vue.js 2.0 移動(dòng)端拍照壓縮圖片上傳預(yù)覽功能
- js前端實(shí)現(xiàn)多圖圖片上傳預(yù)覽的兩個(gè)方法(推薦)
- vue.js 圖片上傳并預(yù)覽及圖片更換功能的實(shí)現(xiàn)代碼
- AngularJS實(shí)現(xiàn)圖片上傳和預(yù)覽功能的方法分析
- JavaScript實(shí)現(xiàn)圖片上傳并預(yù)覽并提交ajax
相關(guān)文章
本文主要分享了js+div+css下拉導(dǎo)航菜單的完整代碼。可直接復(fù)制保存到HTML文件就可以體驗(yàn)效果。下面跟著小編一起來(lái)看下吧2016-12-12
js實(shí)現(xiàn)DIV的一些簡(jiǎn)單控制
js實(shí)現(xiàn)DIV的一些簡(jiǎn)單控制...2007-06-06
本文給大家介紹js獲取url中的參數(shù)實(shí)例代碼，通過(guò)取得整個(gè)地址欄，取得所有參數(shù)以及各個(gè)參數(shù)放到數(shù)組里，代碼比較簡(jiǎn)單，有需要的朋友可以參考下2016-06-06
解決echarts的多個(gè)折現(xiàn)數(shù)據(jù)出現(xiàn)坐標(biāo)和值對(duì)不上的問(wèn)題
這篇文章主要介紹了解決echarts的多個(gè)折現(xiàn)數(shù)據(jù)出現(xiàn)坐標(biāo)和值對(duì)不上的問(wèn)題，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-12-12
獲取對(duì)象...2006-08-08
本文主要介紹了原生js實(shí)現(xiàn)可拖拽效果的實(shí)例，具有很好的參考價(jià)值，下面跟著小編一起來(lái)看下吧2017-02-02
這篇文章主要介紹了JavaScript對(duì)象原型鏈原理解析,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-01-01
webpack5的loader配置小白學(xué)習(xí)篇
這篇文章主要為大家介紹了webpack5的loader配置非常適合webpack入門的小白學(xué)習(xí)，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-05-05
通過(guò)sails和阿里大于實(shí)現(xiàn)短信驗(yàn)證
本篇文章主要介紹了通過(guò)sails和阿里大于實(shí)現(xiàn)短信驗(yàn)證的方法。具有一定的參考價(jià)值，下面跟著小編一起來(lái)看下吧2017-01-01
JavaScript利用img實(shí)現(xiàn)前端頁(yè)面埋點(diǎn)功能
做數(shù)據(jù)分析的時(shí)候需要獲取足量的有效數(shù)據(jù)，這個(gè)時(shí)候就需要我們?cè)谇岸隧?yè)面埋點(diǎn)。如何來(lái)實(shí)現(xiàn)一個(gè)前端埋點(diǎn)功能，本文就帶你上手試試2022-06-06