javascript - 无法获取输入类型文件的文件

Question

我无法获取<input type="file">的文件.

在下面的代码中，我创建了一个 ui 对话框并有两个输入。其中之一是文本，另一个是文件输入/上传。

我可以获取文本值，但无法获取文件输入。

var $container = $(document.body);
var j = '<div class="form-group fileupload">'
      +      '<label>' + ' Döküman Adı Girin :' + '</label>'
      +      '<input type="text" id="mediatitle" placeholder="Döküman Adı" class="form-control"></br>'
      +      '<label>' + 'File Yükle' + '</label>'
      +      '<input id="FileUpload" type="file"/>'
      + '</div>',
    k = '<button href="#" class="btn btn-primary linkUpload" >' +'Yükle' + "</button>";

this.$dialog = ui.dialog({
    title: 'Döküman Yükle',
    body: j,
    footer: k
}).render().appendTo($container);

单击按钮时，我尝试获取输入的值:

var formData = new FormData();
var fileName = $("#mediatitle").val();
var totalFiles = $("#FileUpload").files.length;

for (var i = 0; i < totalFiles; i++) {
    var file = document.getElementById("FileUpload").files[i];
    formData.append("FileUpload", file);
}

totalfiles返回 0。

如何解决这个问题？提前致谢。

Answer 1

var totalFiles = document.getElementById("FileUpload").files.length;

$("#FileUpload") 不是文件输入。它是一个包含文件输入的 jQuery 集合。 jQuery 集合没有 file 属性。原始 DOM 节点确实如此。

稍微清理一下:

var formData = new FormData();
var fileName = $("#mediatitle").val();
var fileInput = document.getElementById("FileUpload");
var totalFiles = fileInput.files.length;

for (var i = 0; i < totalFiles; i++) {
    var file = fileInput.files[i];
    formData.append("FileUpload", file);
}