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

来源：互联网发布：java.hhit.edu.cn 编辑：程序博客网时间：2024/05/16 10:58

前面有转过一篇通过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

0 0

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

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