Question

此代码已验证高度，宽度和文件格式。如何在源代码上添加文件大小验证？当我在表单中使用时，此代码不起作用。谢谢！

$(function() {
  $("#upload").bind("click", function() {
    //Get reference of FileUpload.
    var fileUpload = $("#fileUpload")[0];

    //Check whether the file is valid Image.
    var regex = new RegExp("([a-zA-Z0-9\s_\\.\-:])+(.jpg|.png|.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 > 100 || width > 100) {
              alert("Height and Width must not exceed 100px.");
              return false;
            }
            alert("Uploaded image has valid Height and Width.");
            return true;
          };
        }
      } else {
        alert("This browser does not support HTML5.");
        return false;
      }
    } else {
      alert("Please select a valid Image file.");
      return false;
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <input type="file" id="fileUpload" />
  <input id="upload" type="submit" value="Upload" />
</form>

https://jsfiddle.net/Sakib00123/veakomn3/3/

Answer 1

function bytesToSize(bytes) {
   var sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
   if (bytes == 0) return '0 Byte';
   var i = parseInt(Math.floor(Math.log(bytes) / Math.log(1024)));
   return Math.round(bytes / Math.pow(1024, i), 2) + ' ' + sizes[i];
};
$(function() {
  $("#upload").bind("click", function() {
    //Get reference of FileUpload.
    var fileUpload = $("#fileUpload")[0];
    alert(bytesToSize(fileUpload.files[0].size));

    //Check whether the file is valid Image.
    var regex = new RegExp("([a-zA-Z0-9\s_\\.\-:])+(.jpg|.png|.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 > 100 || width > 100) {
              alert("Height and Width must not exceed 100px.");
              return false;
            }
            alert("Uploaded image has valid Height and Width.");
            return true;
          };
        }
      } else {
        alert("This browser does not support HTML5.");
        return false;
      }
    } else {
      alert("Please select a valid Image file.");
      return false;
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <input type="file" id="fileUpload" />
  <input id="upload" type="submit" value="Upload" />
</form>

在这里你可以选择尺寸。请检查一下，它可以帮助你：）

文件大小验证形式冲突

1 个答案: