SOURCE

console 命令行工具 X clear

                    
>
console
$(function(){
	$('#upload').change(function(e){
	console.log(e)
		let imgInfo = e.target.files[0];
		$('#name').html(imgInfo.name)
		$('#size').html(imgInfo.size / 1024)
		$('#type').html(imgInfo.type)
		$('#lastTime').html(Date.parse(imgInfo.lastModifiedDate))
		//效验
		//检测大小
		if(imgInfo.size/(1024 * 1024) > 1){ //不能大于1M
			alert('上传图片不能大于1M');
			return ;
		}
		//检测类型
		if(!/\.(jpg|png)/.test(imgInfo.name)){
			alert('上传图片类型jpg,png');
			return ;
		}
		//预览
		let windowURL = window.URL || window.webkitURL;
        let imgsrc = windowURL.createObjectURL(imgInfo);
		$('#img').attr('src',imgsrc);
		
		//检测图片宽,高
		let _img = new Image();
		_img.onload = function(){
			let imgW = _img.width,
			    imgH=_img.height;
		    if(imgW!= 200 || imgH != 200){
				alert('请上传200px * 200px 图片');
				return false;
		    }			
		};
         _img.src = imgsrc;			
				
		//上传
		let formData = new FormData();
		formData.append('file', imgInfo);
		
		//保存
		$.post('url',formData,function(data){
			//成功后做某些事
		});
	});

});
<input id="upload" type="file" accept="image/gif, image/png, image/jpg, image/jpeg">
	<div>
		<p>文件信息:</p>
		<p><img id="img" style="width:100px;"></p>
		<p>文件名:<span id="name"></span> </p>
		<p>文件大小:<span id="size"></span>KB</p>
		<p>文件类型:<span id="type"></span></p>
		<p>最后修改时间:<span id="lastTime"></span>(时间戳)</p>	
	</div>