1. 程式人生 > 實用技巧 >js規定圖片上傳的尺寸與大小

js規定圖片上傳的尺寸與大小

<div class="file-box layui-col-md6">
	<input type="file" lay-verify="ad_img" value="" name="ad_img[]" id="input_file" class="input_file" accept="image/gif,image/jpeg,image/jpg,image/png,image/svg" onchange="uploadAndShow1(this)">
	<img src="" alt="" style="width: 100%;height: 100%" />
</div>

  js:

//圖片上傳
			function uploadAndShow1(obj) {
				var fileSize = 0;
				var fileMaxSize = 1024; //1M
				var filePath = obj.value;
				var reader = new FileReader();
				if (filePath) {
					fileSize = obj.files[0].size;
					var size = fileSize / 1024;
					if (size > fileMaxSize) {
						layer.msg("圖片大小不能超過1M", {
							time: 2000,
							icon: 10
						});
						obj.value = "";
						return false;
					}else{
						var reader = new FileReader();
						reader.onload = function(e) {
							var image = new Image();
							     image.src = e.target.result;
								 image.onload = function() {
								var height = this.height;
								var width = this.width;
									if(width!=800 && height!=800 ){
										layer.msg("請上傳800*800畫素的圖片", {
											time: 2000,
											icon: 10	
										});
										obj.value = "";
										return false;
									}else{
										$(obj).parent().find('img').attr('src', e.target.result);
										$(obj).css({
										  "position":"absolute",
										  "opacity":"0",
										});
									}
								 };	
						};
						reader.readAsDataURL(obj.files[0]);
					}
				} else {
					return false;
				}
			}