如何在javascript上传之前验证图像的尺寸？ [英] How to validate the dimensions of image before uploading it in javascript?

问题描述

如果有任何解决方案可以验证图片尺寸，请在使用javascript进行上传之前告知我们。



我尝试了什么：



我在javascript中尝试了下面的代码，它正确地返回错误信息，但表格正在提交，尽管图像尺寸无效。

 $（function（）{
 $（＃btnSubmit）。bind（click，function（）{
 / /获取FileUpload的引用。
 var fileUpload = $（＃fuLogo）[0]; 
 //event.preventDefault（）; 
 if（（fileUpload.value！= null& ;& fileUpload.value！=）||（document.getElementById（LogoDiv）。style.display ===none））{
 //检查文件是否有效Image。
 var regex = / ^（（[a-zA-Z] :) |（\\ {2} \w +）\ $？）（\\（\\\ [\\\ 。] *））+（JPG | .JPG | .JPEG | .JPEG | .BMP | .BMP |巴纽| .PNG | .ICO | .ICO | .gif注意|。 GIF）$ /; 
 if（regex.test（fileUpload.value.toLowerCase（）））{
 //检查是否支持HTML5。 
 if（typeof（fileUpload.files）！=undefined）{
 //启动FileReader对象。 
 var reader = new FileReader（）; 
 //读取图像文件的内容。 
 reader.readAsDataURL（fileUpload.files [0]）; 
 reader.onload = function（e）{
 //启动JavaScript Image对象。 
 var image = new Image（）; 
 //设置从FileReader返回的Base64字符串作为源。 
 image.src = e.target.result; 
 image.onload = function（）{
 //确定高度和宽度。 
 var height = this.height; 
 var width = this.width; 
 if（height> 150 || width> 1500）{
 // alert（请上传包含有效尺寸的图片。）; 
 //event.preventDefault（）; 
 document.getElementById（lblLogoMsg）。innerHTML =请上传有效尺寸的图片。; 
 //event.preventDefault（）; 
返回false; 
} 
}; 
} 
} 
} 
} 
}）; 
}）; 
 

解决方案

（function（）{

（＃btnSubmit） .bind（click，function（）{
//获取FileUpload的引用。
var fileUpload =

（＃fuLogo）[0];
//event.preventDefault（）;
if（（fileUpload.value！= null&& fileUpload.value！=）||（document.getElementById（LogoDiv）。style .display ===none））{
//检查文件是否有效Image。
var regex = / ^（（[a-zA-Z] :) |（\\\ \\ {2} \w +）\

Please let me know if there is any solution to validate the image dimensions before uploading it in javascript.

What I have tried:

I have tried the below code in javascript which returns the error message correctly but the form is getting submitting despite the image dimensions are not valid.

$(function () {
           $("#btnSubmit").bind("click", function () {
               //Get reference of FileUpload.
               var fileUpload = $("#fuLogo")[0];
               //event.preventDefault();
               if ((fileUpload.value != null && fileUpload.value != "") ||(document.getElementById("LogoDiv").style.display==="none")) {
                   //Check whether the file is valid Image.
                   var regex = /^(([a-zA-Z]:)|(\\{2}\w+)\$?)(\\(\w[\w].*))+(.jpg|.JPG|.jpeg|.JPEG|.bmp|.BMP|.png|.PNG|.ico|.ICO|.gif|.GIF)$/;
                   if (regex.test(fileUpload.value.toLowerCase())) {
                       //Check whether HTML5 is supported.
                       if (typeof (fileUpload.files) != "undefined") {
                           //Initiate the FileReader object.
                           var reader = new FileReader();
                           //Read the contents of Image File.
                           reader.readAsDataURL(fileUpload.files[0]);
                           reader.onload = function (e) {
                               //Initiate the JavaScript Image object.
                               var image = new Image();
                               //Set the Base64 string return from FileReader as source.
                               image.src = e.target.result;
                               image.onload = function () {
                                   //Determine the Height and Width.
                                   var height = this.height;
                                   var width = this.width;
                                   if (height > 150 || width > 1500) {
                                       //alert("Please upload image with valid dimensions.");
                                       //event.preventDefault();
                                       document.getElementById("lblLogoMsg").innerHTML = "Please upload image with valid dimensions.";
                                       //event.preventDefault();
                                       return false;
                                   }
                               };
                           }
                       }
                   }
               }
           });
       });

解决方案

(function () {

("#btnSubmit").bind("click", function () { //Get reference of FileUpload. var fileUpload =

("#fuLogo")[0]; //event.preventDefault(); if ((fileUpload.value != null && fileUpload.value != "") ||(document.getElementById("LogoDiv").style.display==="none")) { //Check whether the file is valid Image. var regex = /^(([a-zA-Z]:)|(\\{2}\w+)\

这篇关于如何在javascript上传之前验证图像的尺寸？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！