HTML / JS：如果您不允许其完整路径，您如何上传文件？

Question

我有一个＆＃34;选择文件＆＃34;按钮，打开文件对话框以选择要上载的文件。我得到文件名（但不是完整路径）并将其保存到相邻的输入。

现在我有一个上传按钮，我想将文件上传到我的PHP后端，而无需重新加载整个页面。但是 - 如果您只提供文件名，而不是完整的本地路径，您如何知道从哪里获取文件？

Answer 1

您必须使用files property。

假设您在HTML代码中的表单中包含以下input type=file：

<input type="file" id="upload" />

然后你将它用作：

(function(d) {
  d.querySelector('form').addEventListener('submit', function(e) {
    var files = d.getElementById('upload').files;
    if (files.length > 0) {
      var xhr = new XMLHttpRequest();
      var formData = new FormData();
      for (var i = 0, ii = files.length; i < ii; i++)
        formData.append("file" + i, files[i]);
      xhr.open('POST', url); // change the url variable to some URL you're using
      xhr.send(formData);
    }
  });
})(document);

PS：请注意，files属性适用于所有常绿浏览器（Chrome，Opera，Firefox，Safari等）和IE10 +。它在旧的IE版本中不起作用，并且没有其他方法可以通过AJAX上传文件。

修改

阅读评论后：

  

理想情况下，我想使用一个按钮来选择文件，而另一个按钮，一旦选择了文件，就可以通过ajax或任何其他方法开始上传，而无需重新加载整个页面。

你可以完全按我上面所说的做，但以不同的方式，例如：

<input type="file" id="myfile" />
<button id="upload">Upload</button>

然后：

(function(d) {
  d.getElementById('upload').addEventListener('click', function(e) {
    var files = d.getElementById('myfile').files;
    if (files.length > 0) {
      var xhr = new XMLHttpRequest();
      var formData = new FormData();
      for (var i = 0, ii = files.length; i < ii; i++)
        formData.append("file" + i, files[i]);
      xhr.open('POST', url); // change the url variable to some URL you're using
      xhr.send(formData);
    }
  });
})(document);

如果您需要支持IE9或更低版本，您将无法通过xhr进行上传，并且您需要将form定位到隐身iframe，并且然后它不会重新加载整个页面。 E.g：

<form target="other" action="url"><!-- change the url to what you're using -->
  <input type="file" id="upload" />
  <iframe name="other" style="display: none"></iframe>
</form>