Question

我正在使用php进行帖子提交处理，但在这里我想在提交表单之前将图片上传大小限制为20kb。在这里，我试图在不同的领域逐个上传3个图像。需要帮助

谢谢

user.php的

<input type="file" text-align="right" class="filestyle" name="p1" id="p1" data-size="sm" data-input="false" required/>
<input type="file" text-align="right" class="filestyle" name="p2" id="p2" data-size="sm" data-input="false" required/>
<input type="file" text-align="right" class="filestyle" name="p3" id="p3" data-size="sm" data-input="false" required/>

脚本的我在这里查看文件大小

$('#p1').bind('change', function() {
        alert('This file size is: ' + this.files[0].size/1024/1024 + "MB");
    });

如何在单击“提交按钮”之前限制图像的大小

Answer 1

可以在change事件处理程序中比较文件大小，如果超出输入，则清除文件大小。它也可以在submit上完成。

＆＃13;

$('input#file').bind('change', function() {
  var maxSizeKB = 20; //Size in KB
  var maxSize = maxSizeKB * 1024; //File size is returned in Bytes
  if (this.files[0].size > maxSize) {
    $(this).val("");
    alert("Max size exceeded");
    return false;
  }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="file" id="file">

＆＃13;

Answer 2

您可以使用<form>元素作为每个<input type="file">元素的父元素，包括<input type="submit">元素，其中disabled元素设置在每个<input type="file">元素旁边。如果.files[0].size小于20000，请将disabled元素的<input type="submit">设置为false，否则将disabled属性设置为true。

const SIZE = 20 * 1024;

$(".filestyle").on("change", function(e) {
  console.log(this.files[0].size);
  let VALID = false;
  if (this.files[0].size > SIZE) {
    this.value = "";
    console.log("file size greater than " + SIZE);
  } else {
    console.log("file size less than " + SIZE);
    VALID = true;  
  }
  $("+ input[type=submit]", this).prop("disabled", !VALID)
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<input type="file" text-align="right" class="filestyle" name="p1" id="p1" data-size="sm" data-input="false" required/><input type="submit" disabled/>
</form>
<form>
<input type="file" text-align="right" class="filestyle" name="p2" id="p2" data-size="sm" data-input="false" required/><input type="submit" disabled/>
</form>
<form>
<input type="file" text-align="right" class="filestyle" name="p3" id="p3" data-size="sm" data-input="false" required/><input type="submit"  disabled/>
</form>

在客户端使用jquery将图像上载大小限制为20kb

2 个答案: