Javascript 上载的文件大小表示未定义_Javascript_Jquery_Forms

Javascript 上载的文件大小表示未定义

javascript jquery forms

Javascript 上载的文件大小表示未定义,javascript,jquery,forms,Javascript,Jquery,Forms,我试图在JQuery中获取上传图像的大小。我为表单更改创建了一个事件，并在其中插入了以下内容： console.log($(this)[0].size); 其输出未定义。我做错了什么，如何获得上传的图像大小 $（文档）.ready（函数（）{ $（'#uploadform'）。on（'change'，function（evt）{ console.log（$（this）[0].size）； }); }); 基于您的小提琴，我使用FileReader API更新了代码以读取输入文件 $('#o

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

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

其输出未定义。我做错了什么，如何获得上传的图像大小

$（文档）.ready（函数（）{
$（'#uploadform'）。on（'change'，function（evt）{
console.log（$（this）[0].size）；
});
});
基于您的小提琴，我使用FileReader API更新了代码以读取输入文件
$('#openFile').on('change', function (evt) {

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

文件大小在名为“total”的项中
它应该是文件id，而不是表单id。还要将文件[0]放在索引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>


$（文档）.ready（函数（）{
$（'#openFile'）。on（'change'，function（evt）{
console.log（此.files[0].size）；
});
});
现在您处理的是表单元素而不是文件输入，这就是为什么您会遇到麻烦的原因
考虑绑定到#openFile
：

$（文档）.ready（函数（）{
$（'#openFile'）。on（'change'，function（evt）{
console.log（此.files[0].size）；
});
});
在代码中，将侦听更改事件替换到输入字段，而不是表单上：
$(document).ready(function() {
  $('#openFile').on('change', function(evt) {
    console.log($(this)[0].size);
  });
});

您的事件当前已绑定到表单元素，您希望将其绑定到#openfile
并执行以下操作：
$('#openfile')[0].size

或者，如果您打算监视整个表单的更改
事件，您可以执行以下操作：
 $(this).find('#openfile')[0].size

谢谢你的回答！如果我有以下代码：var formData=new formData（$（this）[0]）formData
传递给另一个函数。如何检查该函数中的文件大小？嗨@Jessica，问得好！如果您在使用JSFIDLE或JS Bin进行测试时遇到问题，他们启用了沙箱，因此出于安全原因，您无法调用某些
元素函数，因此请确保您在自己的计算机或服务器上测试此类内容，否则可能会混淆。要回答您的问题，您可以这样做：$（this）.find（'#openFile'）.files[0]。size
-如果您有任何其他问题，请告诉我！我试过你在最后一条评论中所说的，但我得到了一个错误。这里有一个JSFiddle:@Jessica我错过了你询问FormData的事实。不幸的是，一旦创建了FormData对象，就无法获取其属性。但是，我收集了一些可以用来在JSBin上进行实验的东西：