是否可以使用本机文件浏览器来选择存储在服务器上的文件

Is it possible to use the native filebrowser to pick a file stored on the server?

本文关键字：文件 存储 服务器 选择 可以使 本机 浏览器 是否      更新时间：2023-09-26

我有两个用例，第一，用户可以选择一个本地文件并将其上传到服务器。其次，用户可以选择一个已经在服务器上的文件(他们上传的，通过电子邮件发送的等)。我知道有很多库都能做到这一点，但是否有可能使用本机文件浏览器，并允许它们选择存储在服务器上的文件?如果不支持所有浏览器，也没关系。

没有。文件浏览器是由浏览器和操作系统控制的，你不能决定显示哪个文件夹。

不相信<input type="file">对话框可以引用用户本地文件系统以外的文件系统。

不支持所有浏览器也没关系

一种解决方法是将上传文件的名称或引用保存在数组或对象中，使用requestFileSystem将实际上传的文件保存在FileSystem中，向用户提供上传文件列表，当用户从列表中选择文件时，使用requestFileSystem从FileSystem中检索File对象。

查看jQuery文件上传插件:是否可以保留上传文件夹的结构?

或者，正如@Gorka所建议的，您可以将上传的file.name存储在本地的数组或对象中，其中上传的file对象存储在服务器相同的文件名;用file.name作为value的<option>元素填充<select>元素;在select元素的更改事件中，使用XMLHttpRequest或fetch从服务器检索选定的<option>和value。例如,

<!DOCTYPE html>
<html>
<head>
</head>
<body>
  <input type="file" />
  <select disabled>
    <option>Choose File from server</option>
  </select>
  <br>
  <label></label>
  <br>
  <iframe style="width:95vw;height:98vw"></iframe>
  <script>
    var input = document.querySelector("input[type=file]");
    var select = document.querySelector("select");
    var iframe = document.querySelector("iframe");
    var label = document.querySelector("label");
    var uploads = [];
    select.onchange = function(e) {
      var uploadedFile = uploads.filter(function(file) {
        return file.name === e.target.value;
      }).pop();
      var url = "/uploads/" + uploadedFile.name;
      fetch(url)
        .then(function(response) {
          return response.blob()
        })
        .then(function(file) {
          // do stuff with `file`
          var reader = new FileReader();
          reader.onloadend = function(e) {
            iframe.onload = function() {
              label.textContent = url;
            }
            iframe.src = e.target.result;
          }
          reader.readAsDataURL(file);
        })
    }
    input.onchange = function(e) {
      var file = e.target.files[0];
      // save reference to uploaded file name
      uploads.push({
        name: file.name,
      });
      // post file to server
      var data = new FormData();
      data.append("file", file, file.name);
      var request = new XMLHttpRequest();
      request.open("POST", "/path/to/server");
      request.onload = function() {
        var option = document.createElement("option");
        option.value = file.name;
        option.textContent = file.name;
        select.appendChild(option);
        if (select.disabled) {
          select.removeAttribute("disabled");
        }
        alert(`${file.name} written to server`);
      }
      // save `file` as `file.name` at server,
      // for example, at `/uploads/${file.name}`
      request.send(data);
    }
  </script>
</body>
</html>

plnkr http://plnkr.co/edit/McvuErPOxyNJcpIZXl1G?p=preview

相关文章：