Question

我正在创建一个上传图片的功能。但这不会超过400px的高度和400px的宽度，这是代码的一部分

$(() => {
    $(document).on('change', 'input', function (e) {
        let file = event.target.files[0];
        if (!file) {
            e.preventDefault();
            return;
        }else{
            let imageType = /image.*/;
            if (!file.type.match(imageType)) {
                e.preventDefault();
                return;
            }else {
                let reader = new FileReader();
                reader.onload = () => {
                    $('img').attr('src', reader.result);
                }
                reader.readAsDataURL(file);
            }
        }
        //What to do here?
        if ( width > 400 || height > 400) {
            console.log('oversized');
            
        }
    });
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="file">
<img src="">

它不起作用，如何验证图像而不是img标签太大了，我使用Jquery创建了此代码以快速复制问题，但是，如果您可以使用香草Java脚本帮助我，它将非常棒

Answer 1

尝试一下：

$(() => {
    $(document).on('change', 'input', function (e) {
        let file = event.target.files[0];
   
        if (!file) {
            e.preventDefault();
            return;
        }else{
            let imageType = /image.*/;
            if (!file.type.match(imageType)) {
                e.preventDefault();
                return;
            }else {
                let reader = new FileReader();
                reader.onload = () => {
                this.imagePreview = new Image();
                this.imagePreview.onload = (imageEvent) => {

                  if (this.imagePreview.width > 400 || this.imagePreview.height > 400) {
			alert(`Allowed dimensions are 400x400 px`);
			return;
		  }
		};
                  
                 this.imagePreview.src = reader.result;
                 $('img').attr('src', reader.result);
                }
                reader.readAsDataURL(file);
            }
        }
         
    });
})

 
<input type="file" />
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>

知道图像是否过大

1 个答案: