文件上传不使用 Javascript 中的文件上传控件答案

【问题标题】：File Upload without using the file upload control in Javascript文件上传不使用 Javascript 中的文件上传控件
【发布时间】：2016-11-10 22:57:11
【问题描述】：

我现在正在使用 html 文件上传控件在我的应用程序中上传文件。而不是文件上传控件，在选择复选框控件时，我需要从本地磁盘获取文件。我在我的应用程序中使用 Javascript 代码。任何人都可以帮我解决这个问题。

【问题讨论】：

使用隐藏的文件上传控件，点击复选框，触发文件上传点击
你能分享一些代码吗？当您单击复选框时，fie 是否已经填充？

标签： javascript file-upload

【解决方案1】：

您可以使用 FormData javascript 对象https://developer.mozilla.org/en-US/docs/Web/API/FormData/Using_FormData_Objects，但只有现代浏览器才会有那个。对于旧版浏览器，您可以使用 iframe How to make Asynchronous(AJAX) File Upload using iframe?

【讨论】：

【解决方案2】：

您可以使用隐藏文件上传控件并使用 JavaScript 对其进行操作。我使用下面的代码允许用户选择个人资料图片并在上传之前查看它。我使用了一个链接，但您可以按照您的要求将其更改为一个复选框：

function LoadImage() {
  document.getElementById("ImageFile").click();
}

function DisplayImage(FileBrowser) {
  if (FileBrowser.files.length < 1)
    return;
  var file = FileBrowser.files[0].name;
  if (file == null || file == "")
    return;
  var reader = new FileReader();
  reader.onload = function() {
    document.getElementById("ImageDisplay").src = this.result;
  };
  reader.readAsDataURL(FileBrowser.files[0]);
}

<input id="ImageFile" type="file" style="visibility: hidden; height : 0; width: 0;" onchange="DisplayImage(this);" />
<a href="javascript: void LoadImage();">
  <img id="ImageDisplay" alt="Select an image" src="" />
</a>

【讨论】：

感谢代码。我只是想避免手动选择文件。而是我想选择文件作为后端进程。这可能吗。文件路径和文件名将是静态的。
选择文件必须是手动过程，因为出于安全和隐私原因，Web 浏览器无法访问文件系统。在 Web 浏览器中执行此操作的唯一方法是包含一个二进制可执行文件，例如可以访问文件系统的 Java Applet，但它必须得到用户的信任。