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为mostly supported on all major browsers。

我会提供解决方案的更新，但@ mark.inman.winning already did it。

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

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" />

Answer 6

视频文件示例（HTML + Javascript）：

<form action="some_script" method="post" enctype="multipart/form-data">
<input id="max_id" type="hidden" name="MAX_FILE_SIZE" value="250000000" />
<input onchange="upload_check()" id="file_id" type="file" name="file_name" accept="video/*" />
<input type="submit" value="Upload"/>
</form>

<script>
function upload_check()
{
    var upl = document.getElementById("file_id");
    var max = document.getElementById("max_id").value;

    if(upl.files[0].size > max)
    {
       alert("File too big!");
       upl.value = "";
    }
};
</script>

Answer 7

这个问题是很久以前的问题，但也许这可以帮助一些挣扎的人。如果您正在处理表单，最简单的方法是创建一个新的 FormData 用你的表格。例如：

form.addEventListener("submit", function(e){
  e.preventDefault()

  const fd = new FormData(this)

  for(let key of fd.keys()){

    if(fd.get(key).size >= 2000000){
      return console.log(`This archive ${fd.get(key).name} is bigger than 2MB.`)
    }

    else if(fd.get(key).size < 2000000){
      console.log(`This archive ${fd.get(key).name} is less than 2MB.`)
    }

    else{
      console.log(key, fd.get(key))
    }

  }

  this.reset()
})

如您所见，您可以通过键入以下内容从随表单提交的存档中获取大小：

fd.get(key).size

而且文件名也是可达的：

fd.get(key).name

希望这对您有所帮助！

限制文件上传的大小（html输入）

8 个答案: