第一种方法：
<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml" xml:lang="en"lang="en">
<head>
<meta http-equiv="Content-Type"content="text/html; charset=utf-8" />
<script>
var picPath;
var image;
// preview picture
function preview(){
// 下面代码用来获得图片尺寸，这样才能在IE下正常显示图片
document.getElementById('box').innerHTML
= "<img width='"+image.width+"' height='"+image.height+"'id='aPic' src='"+picPath+"'>";
}
function loadImage(ele) {
picPath = getPath(ele);
image = new Image();
image.src = picPath;
preview();
}
function getPath(obj){
if(obj){
//ie
if (window.navigator.userAgent.indexOf("MSIE")>=1){
obj.select();
// IE下取得图片的本地路径
returndocument.selection.createRange().text;
}
//firefox
else if(window.navigator.userAgent.indexOf("Firefox")>=1){
if(obj.files){
// Firefox下取得的是图片的数据
returnobj.files.item(0).getAsDataURL();
}
return obj.value;
}
return obj.value;
}
}
</script>
</head>
<body>
<input type="file"name="pic" id="pic" οnchange='loadImage(this);' />
<div id='box'></div>
</body>
</html>
第二种方法：
<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml" xml:lang="en"lang="en">
<head>
<meta http-equiv="Content-Type"content="text/html; charset=utf-8" />
<script language="UTF-8"type="text/javascript">
function PreviewImage(imgFile) {
var filextension =imgFile.value.substring(imgFile.value
.lastIndexOf("."),imgFile.value.length);
document.getElementById("imgPreviewone").style.display= "block";
filextension =filextension.toLowerCase();
if ((filextension != '.jpg') &&(filextension != '.gif')
&& (filextension != '.jpeg')&& (filextension != '.png')
&& (filextension != '.bmp')) {
alert("对不起，系统仅支持标准格式的照片，请您调整格式后重新上传，谢谢!");
imgFile.focus();
} else {
varpath;
if(document.all)//IE
{
imgFile.select();
path =document.selection.createRange().text;
document.getElementById("imgPreviewone").innerHTML= "";
document.getElementById("imgPreviewone").style.filter= "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='scale',src=\""
+ path + "\")";//使用滤镜效果
}else//FF
{
path = imgFile.files[0].getAsDataURL();
document.getElementById("imgPreviewone").innerHTML= "<img id='img1' width='120px' height='100px' src='"+path+"'/>";
//document.getElementById("img1").src= path;
}
}
}
</script>
</head>
<body>
<ul>
<listyle="margin-left:10px;margin-top:50px;">
<div id="imgPreviewone"style="width:200px;height:200px;">
<img src=""id="imgPreview" style="width:200px;height:200px;" />
</div>
<br/>
</li>
<listyle="margin-left:10px;margin-top:50px;">
<inputname="upload" id="upload"style="width:200px;height:20px;line-height:20px;"
type="file"οnchange="PreviewImage(this)"/>
<br/>
</li>
<!--一定要给出预览图片div的大小 -->
</ul>
</body>
</html>
2482
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
