javascript - HTML Javascript 文件上传

Question

我有以下带有文件的 HTML 对象

  <form name='file_form' class="panel-body">
    <input type="file" id="file" name="file[]" />
    <input type='button' id='btnSendFile' value='sendFile' />
    <output id="list"></output>
  </form>

在使用 type="file"中的文件浏览时，我选择要上传的文件。当我单击 btnSendFile 时，所选文件的文件名出现在名称下。但是，当我在下面传递它时，文件变量为空。我需要访问文件对象的文件对象属性。

我有一个发送文件的函数。

var file ;

function sendFile(file) {
var to = $('#to').get(0).value;
var filename = file.name;
var filesize = file.size;
var mime = file.type;

}

$('#btnSendFile').bind('click', function() {
 sendFile(file);
});

如何在 javascript 中获取需要 file.name、file.size 和 file.type 的文件对象？我应该为变量文件分配什么？

更新: 答案:

file= $("#file")[0].files[0];

Answer 1

将 this.previousElementSibling.files[0] 或 $("#file")[0].files[0] 传递给 sendFile

// var file;

function sendFile(file) {
  // var to = $('#to').get(0).value;
  var filename = file.name;
  var filesize = file.size;
  var mime = file.type;
  $("#list").html(filename + " " + filesize + " " + mime)
}

$("#btnSendFile").bind("click", function() {
  sendFile(this.previousElementSibling.files[0]);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<form name='file_form' class="panel-body">
  <input type="file" id="file" name="file[]" />
  <input type='button' id='btnSendFile' value='sendFile' />
  <output id="list"></output>
</form>