您的位置：首页 > 其它

于鹏：input实现上传图片的预览以及获取图片的真实尺寸

2017-05-12 00:00 190 查看

我们在上传图片的时候，有时候需要实现图片的预览以及对图片尺寸进行校验，下面是一种简单的实现方式。

页面

<input type="file" name="uploader" id="uploader"/>
<img src="" id="screenshot" / style="width:200px">

img 标签就是用来显示我们上传的图片

JS

$(function () {
$("#uploader").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("screenshot");
img.src = source;
alert("真实尺寸：Width:" + img.naturalWidth + ", Height:" + img.naturalHeight);
alert("显示尺寸：Width:" + img.width+ ", Height:" + img.height);
}
</script>

完整代码

<html>
<head>
<script type="text/javascript" src="jquery.min.js"></script>
<script>
$(function () {
$("#uploader").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("screenshot");
img.src = source;
alert("真实尺寸：Width:" + img.naturalWidth + ", Height:" + img.naturalHeight);
alert("显示尺寸：Width:" + img.width + ", Height:" + img.height);
}
</script>
</head>

<body>
<input type="file" name="uploader" id="uploader" />
<img src="" id="screenshot" / style="width:200px">

<body>

</html>

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

标签： 于鹏图片上传图片真实尺寸 input图片

相关文章推荐

新的分享

章节导航