Question

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

select sum   (no) as no,datet from  ( SELECT  COUNT   (*) as no ,(convert(varchar,datepart (yyyy,[ Start] )) + '-' + convert(varchar, MONTH([ Start] ))) as datet
FROM <tbl>
GROUP BY (convert(varchar,datepart (yyyy,[ Start] )) + '-' + convert(varchar, MONTH([ Start] )))
union SELECT  COUNT   (*) as no ,(convert(varchar,datepart (yyyy,[ End] )) + '-' + convert(varchar, MONTH([ End] ))) as datet
FROM <tbl>
GROUP BY (convert(varchar,datepart (yyyy,[ End] )) + '-' + convert(varchar,   MONTH([ End] )) ) ) t

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

JSFiddle

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

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

Answer 1

现在您正在处理表单元素而不是文件输入，这就是您遇到并发症的原因。

考虑绑定到#openFile：

＆＃13;

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

＆＃13;

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

＆＃13;

您可以使用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对象中的数据是否有用。

Answer 2

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

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

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

文件大小在名为＆＃34; total＆＃34;

的键中

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

Answer 3

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

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

Answer 4

您的活动当前已绑定到表单元素，您希望将其绑定到#openfile并执行以下操作：

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

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

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

Answer 5

它应该是文件ID，而不是表单ID。同时放置文件[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>

上传的文件大小表示未定义

JSFiddle

5 个答案: