上传的文件大小显示未定义答案

【问题标题】：Uploaded file size says undefined上传的文件大小显示未定义
【发布时间】：2015-11-21 06:02:58
【问题描述】：

我正在尝试在 JQuery 中获取上传图像的大小。我为更改表单创建了一个事件，并在其中插入了以下内容：

console.log($(this)[0].size);

它的输出是未定义的。我做错了什么，如何获取上传的图片大小？

JSFiddle

$(document).ready(function() {
  $('#uploadform').on('change', function(evt) {
    console.log($(this)[0].size);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="upload.php" enctype="multipart/form-data" method="POST" id="uploadform">
  <input id="openFile" name="img" type="file" />
</form>

【问题讨论】：

标签： javascript jquery forms

【解决方案1】：

现在您处理的是表单元素而不是文件输入，这就是您遇到复杂情况的原因。

考虑改为绑定到#openFile：

$(document).ready(function() {
  $('#openFile').on('change', function(evt) {
    console.log(this.files[0].size);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="upload.php" enctype="multipart/form-data" method="POST" id="uploadform">
  <input id="openFile" name="img" type="file" />
</form>

您可以使用this[0].files[0].size 使其按照您当前拥有的方式工作，但同样更容易绑定到您需要的特定元素。

更多的 Javascript file input examples 也是一个很好的资源。既然提到了，这里有一些关于 FormData 对象的相关信息：How to inspect FormData? 和 How do i get the content from a formData?

FormData Javascript API Examples

Reading files in JavaScript using the File APIs

这里有一些概念验证代码到 Drag and Drop files into FormData 并通过 POST 上传到服务器。我还创建了一个JS Bin，您可以在其中进行试验并查看 FormData 对象中的数据是否有帮助。

【讨论】：

感谢您的回答！如果我有以下代码怎么办：var formData = new FormData($(this)[0]); 并且我将formData 传递给另一个函数。如何检查该函数中的文件大小？
嗨@Jessica，好问题！如果您在使用 JSFiddle 或 JS Bin 进行测试时遇到问题，则它们启用了沙箱，因此出于安全原因您无法调用某些 <form> 元素函数，因此请确保您正在测试这样的东西自己的计算机或服务器上，否则会让人感到困惑。
要回答您的问题，您可以这样做：$(this).find('#openFile').files[0].size - 如果您有任何其他问题，请告诉我！
我尝试了您在上一条评论中所说的内容，但出现错误。这是一个 JSFiddle：jsfiddle.net/ye78Lqp0/8
@Jessica 我错过了您询问 FormData 的事实。不幸的是，一旦你创建了一个 FormData 对象，你就无法获得它的属性。不过，我整理了一些可以用来在 JSBin 上进行实验的东西：jsbin.com/lofogo/edit?js,output

【解决方案2】：

根据您的小提琴，我更新了代码以使用 FileReader API 读取输入文件

$('#openFile').on('change', function (evt) {

    fr = new FileReader();
    fr.readAsDataURL($(this)[0].files[0]);
    fr.onload = function(file){
        console.log(file);
    }
});

文件大小在名为“total”的键中

http://jsfiddle.net/murnax/880djgf9/

【讨论】：

【解决方案3】：

在您的代码中，将监听更改事件替换为输入字段而不是表单：

$(document).ready(function() {
  $('#openFile').on('change', function(evt) {
    console.log($(this)[0].size);
  });
});

【讨论】：

【解决方案4】：

您的事件当前绑定到表单元素，您想将其绑定到#openfile 并执行以下操作：

$('#openfile')[0].size

或者，如果您的意图是监控整个表单的 change 事件，您可以改为执行以下操作：

 $(this).find('#openfile')[0].size

【讨论】：

【解决方案5】：

它应该是文件 ID，而不是表单 ID。还放 files[0] 以获取您上传的索引 0 上的文件大小，试试这个：

<!DOCTYPE html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>

<body>

<form action="upload.php" enctype="multipart/form-data" method="POST" id="uploadform">
  <input id="openFile" name="img" type="file" />
</form>

<script>
$(document).ready(function() {
  $('#openFile').on('change', function(evt) {
    console.log(this.files[0].size);
  });
});
</script>

</body>
</html>

【讨论】：