[HTML]代码
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
//设置图片上传后预览的div样式
<style type="text/css">
#preview, .img, img
{
width:200px;
height:200px;
}
#preview
{
border:1px solid #000;
}
</style>
</head>
<body>
<div id="preview"></div>
<input type="file" onchange="preview(this)" />
//图片上传和预览
<script type="text/javascript">
function preview(file)
{
var prevDiv = document.getElementById('preview');
if (file.files && file.files[0])
{
var reader = new FileReader();
reader.onload = function(evt){
prevDiv.innerHTML = '
<img src="' + evt.target.result + '" />
';
}
reader.readAsDataURL(file.files[0]);
}
else
{
prevDiv.innerHTML = '
<div class="img"
style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src=\'' + file.value + '\'"></div>
';
}
}
</script>
</body>
</html>
为此代码点赞！
建议
#preview, .img, img {
width:200px;
}
这样，显示出来的图象，仍然保持原有的 宽/高 之比例。
2. 删去 <div > 的属性：
style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,
即:
var s = '<div class="img"';
s+='src=\'' + file.value + '\'"></div>';
prevDiv.innerHTML=s;
这样，仍然保持原有的功能。
最后编辑 2 年 前
不错的js 代码，二楼建议也不错。
好的，谢谢
I found that site very usefull and this survey is very cirious, I ' ve never seen a blog that demand a survey for this actions, very curious... new futura new futura new futura new futura new futura new futura new futura new futura new futura new futura
我收集了很多图片上传代码，有兴趣可以看看
http://www.sucaihuo.com/js/101-0-0-0
赞
Great article with excellent idea!Thank you for such a valuable article. I really appreciate for this great information.. Contract Phone Deals
This is a smart blog. I mean it. You have so much knowledge about this issue, and so much passion. You also know how to make people rally behind it, obviously from the responses.
Things to do
不错，效果很好，学习了
不错，效果很好，学习了