html输入文件 - 选择新文件时如何保存所选文件？

Question

我尝试创建像facebook这样的上传面板，但我遇到了<input type="file" />的问题。

这是facebook上传图片面板：

我的麻烦是：如果我点击添加更多（如上图），则表示将再次点击<input type="file" />。因此，该值将被覆盖。

之后，如果我点击submit按钮，则只能上传1张图片。

我上传的jquery代码如下所示：

function Upload(evt, id)
{
    var file = document.getElementById("file");
    var formData = new FormData();
    for (i = 0; i < file.files.length; i++) {
        formData.append(file.files[i].name, file.files[i]);
    }
    formData.append("id", id);

    $.ajax({
        url: "/Home/Upload",
        type: "POST",
        dataType: "json",
        data: formData,
        contentType: false,
        processData: false,
        success: function (data) {
            alert('upload successful...');
        },
        error: function () {
            alert('upload failed...');
        }
    });
}

第一行：var file = document.getElementById("file");。这意味着：获取<input type="file" name="file" id="file" />的最新值（之前不保留所选文件）。

您能告诉我如何获取所有选定的文件吗？ （我不是在谈论multiple）。

谢谢！

Answer 1

＆＃34;我的麻烦是：如果我点击添加更多（如上图），这意味着将再次点击。因此，该值将被覆盖。＆＃34;

以下是您的脚本的基本问题： ＆＃34;您无法从脚本中设置文件选择器的值＆＃34;所以不能直接操纵形式 https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#File_inputs

您无法以任何有意义的方式操作来自javascript的文件输入（出于明显的安全原因），您只能阅读它们。但是，您可以操纵DOM。 facebook和其他多部分选择器实际上做的是创建和销毁文件输入元素以允许他们想要的流，而不是尝试将任何东西绑定到输入的文件值。

有许多插件可以帮助您处理这种复杂性，但是一旦您了解了您正在解决的问题，它就可以让它工作。

进一步澄清：

是的，听起来你现在正在考虑它！只需将文件输入视为只读，并使用另一个变量来存储所有值，并且任何处理显示dom预览的函数都可以从中读取，而不是直接从文件输入中绑定。

我要回复But the value can only append, not remove :((的另一件事是，如果您可能需要删除值，则不应将值存储在FormData中。而是仅使用常规对象来存储要添加/修改的所有值，然后在用户提交表单时构造对象。有点像这样：

var myFormDataObject = {}; // can store inputs in this
// watch onchange and add/remove from myFormDataObject

function sendStuff(){
  var formData = new FormData();
  for (var key in myFormDataObject) {
    formData.append(key, myFormDataObject[key]);
  }
  // then post/put/patch/etc the form
}