您的位置：首页 > 其它

input文件框选择本地图片后页面预览图片并获取图片长宽以及大小图片上传前预览

2014-03-26 17:03 477 查看

前面有转过一篇通过HTML5来实现图片上传前预览，现在借助FileReader也实现了这个需求。并且同时还可以获得图片的长宽相素以及图片文件的大小。demo如下：

<html>
<head>
<script type="text/javascript" src="jquery.min.js"></script>
<script>
$(function(){
$("#pstimg").change(function(){
var file = this.files[0];
alert("文件大小:"+(file.size / 1024).toFixed(1)+"kB");
if (window.FileReader) {
var reader = new FileReader();
reader.readAsDataURL(file);
//监听文件读取结束后事件
reader.onloadend = function (e) {
showXY(e.target.result,file.fileName);
};
}
});
});
function showXY(source){
var img = document.getElementById("loc_img");
img.src = source;
alert("Width:"+img.width+", Height:"+img.height);
}
</script>
</head>
<body>
<input type="file" name="pstimg" id="pstimg"/>
<img src="" id="loc_img" />
<body>
</html>

要了解更多有关FileReader的知识 FileReader

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 图片上传前预览获取图片长宽 input文件框选择本地图片后页面预览图获取图片长宽以及大小

相关文章推荐

新的分享

章节导航

input文件框选择本地图片后页面预览图片并获取图片长宽以及大小 图片上传前预览

input文件框选择本地图片后页面预览图片并获取图片长宽以及大小图片上传前预览