限制文件上传的大小(html输入)

Question

我想简单地限制用户可以上传的文件的大小.

我认为maxlength = 20000 = 20k但这似乎根本不起作用.

我正在运行Rails,而不是PHP,但是我认为在HTML/CSS中做客户端更简单,或者使用jQuery作为最后的手段.这是非常基本的,但必须有一些我遗漏或不知道的HTML标记.

希望支持IE7 +,Chrome,FF3.6 +.我想如果有必要,我可以支持IE8 +.

谢谢.

Answer 1

这是完全可能的.使用Javascript.

我使用jQuery来选择输入元素.我设置了一个on change事件.

$("#aFile_upload").on("change", function (e) {

    var count=1;
    var files = e.currentTarget.files; // puts all files into an array

    // call them as such; files[0].size will get you the file size of the 0th file
    for (var x in files) {

        var filesize = ((files[x].size/1024)/1024).toFixed(4); // MB

        if (files[x].name != "item" && typeof files[x].name != "undefined" && filesize <= 10) { 

            if (count > 1) {

                approvedHTML += ", "+files[x].name;
            }
            else {

                approvedHTML += files[x].name;
            }

            count++;
        }
    }
    $("#approvedFiles").val(approvedHTML);

});

在提交实际发生之前,上面的代码会保存我认为值得持久保存到提交页面的所有文件名.我使用jQuery将"已批准"文件添加到输入元素的val中,因此表单提交将发送我要保存的文件的名称.所有文件都将被提交,但是,现在在服务器端我们必须过滤掉这些文件.我还没有为此编写任何代码,但要运用你的想象力.我假设可以通过for循环完成此操作并匹配从输入字段发送的名称,并将它们与$ _FILES(PHP Superglobal,抱歉我不知道ruby文件变量)变量匹配.

我的观点是你可以在提交之前检查文件.我这样做,然后在他/她提交表单之前将其输出给用户,让他们知道他们上传到我的网站的内容.任何不符合标准的内容都不会显示给用户,因此他们应该知道,太大的文件不会被保存.这应该适用于所有浏览器,因为我没有使用FormData对象.

Answer 2

var uploadField = document.getElementById("file");

uploadField.onchange = function() {
    if(this.files[0].size > 2097152){
       alert("File is too big!");
       this.value = "";
    };
};

这个例子应该可以正常工作 我将其设置为大约2MB,1MB的字节数为1,048,576,因此您可以将其乘以所需的限制.

以下是更加清晰的jsfiddle示例:https://jsfiddle.net/7bjfr/808/

Answer 3

你不能在客户端做到这一点.你必须在服务器上这样做.

编辑:这个答案已经过时了!

在编辑时,所有主流浏览器都支持 HTML文件API .

我会提供解决方案的更新,但@ mark.inman.winning 已经做到了.

请记住,即使现在可以在客户端上进行验证,您仍应在服务器上验证它.可以绕过所有客户端验证.

Answer 4

const input = document.getElementById('input')

input.addEventListener('change', (event) => {
  const target = event.target
  	if (target.files && target.files[0]) {

      /*Maximum allowed size in bytes
        5MB Example
        Change first operand(multiplier) for your needs*/
      const maxAllowedSize = 5 * 1024 * 1024;
      if (target.files[0].size > maxAllowedSize) {
      	// Here you can ask your users to load correct file
       	target.value = ''
      }
  }
})

<input type="file" id="input" />

如果您需要验证文件类型，请写在下面的评论中，我将分享我的解决方案。

（剧透：accept属性不是防弹解决方案）

Answer 5

const input = document.getElementById('input')

input.addEventListener('change', (event) => {
  const target = event.target
  	if (target.files && target.files[0]) {

      /*Maximum allowed size in bytes
        5MB Example
        Change first operand(multiplier) for your needs*/
      const maxAllowedSize = 5 * 1024 * 1024;
      if (target.files[0].size > maxAllowedSize) {
      	// Here you can ask your users to load correct file
       	target.value = ''
      }
  }
})

<input type="file" id="input" />