<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>HTML5 Upload</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script type="text/javascript">
//前台处理获取到的图片并预览，前台限制图片的高度和宽度及其图片大小
var src;
// //处理file input加载的图片文件
$(document).ready(function (e) {
//获取input图片宽高和大小
function getImageWidthAndHeight(id, callback) {
var _URL = window.URL || window.webkitURL;
$("#" + "imgUpload").change(function (e) {
var file, img;
if ((file = this.files[0])) {
img = new Image();
img.onload = function () {
callback && callback({"width": this.width, "height": this.height, "filesize": file.size});
};
img.src = _URL.createObjectURL(file);
}
});
}
getImageWidthAndHeight('imgUpload', function (obj) {
// //文件上传后本质上就是上传的一个文件对象的列表,获取上传的列表中的第一个
var f = document.getElementById('imgUpload').files[0];
//通过下面的方法将文件读成流的形式
src = window.URL.createObjectURL(f);
//生成图片的预览
//判断图片的高度、宽度、大小
var height = obj.height;
var width = obj.width;
var size = obj.size;
var imageVaildInfo = vaildImage(height,width,size);
//如果不正确,进行将之前的清楚
if("success" !=imageVaildInfo ){
alert(imageVaildInfo);
$("#imgUpload").val("");
return;
}
document.getElementById('imageView').style.height=height+"px";
document.getElementById('imageView').style.width=width+"px";
document.getElementById('imageView').src = src;
});
//图片的大小等信息的验证
function vaildImage(height,width,size){
var imageVaildInfo;
if(height > 500){
imageVaildInfo = "你上传的图片已超出限定的图片高度,请重新上传!";
}else if(width > 500){
imageVaildInfo = "你上传的图片已超出限定的图片宽度,请重新上传!";
}else{
imageVaildInfo = "success";
}
return imageVaildInfo;
}
})
</script>
</head>
<body>
<input type="file" id="imgUpload" name="imgUpload" draggable="true" single/> <!--允许file控件接受的文件类型-->
<!--<input type="file" id="imgUpload" name="imgUpload" accept="image/*" multiple/>-->
<img id="imageView" src="" style="width:500px;height:500px;border:1px solid #000000;"/>
</body>
</html>
