Question

以下是如何在javascript中创建FileUpload按钮的示例（来自w3schools，但它非常通用）。

function myFunction() {
    var x = document.createElement("INPUT");
    x.setAttribute("type", "file");
    document.body.appendChild(x);
}

要获取文件本身，我们必须使用按钮的files []属性，但我相信必须使用回调。虽然我原则上理解回调的概念，但我不确定如何将其应用于这种情况。在我的案例中只会上传一个文件，但随意给出一般答案。

基本上，当我尝试抓取文件[0]时，它会在文件选择器启动时生成错误而无需等待完成。这就是我认为需要回调的原因。

感谢。

更新：

以下是一些不起作用的代码。它只是添加到上面的两个文件。没有错误消息，文件选择器出现，＆＃34;文件内容：未定义＆＃34;当选择器出现时记录。

var x = document.createElement("INPUT");
x.setAttribute("type", "file");
document.body.appendChild(x);
x.click();
console.log("File contents: " + x.files[0]);

我唯一真正的目标是得到它，以便最后一行工作，而不是显示未定义。即我有实际的文件。

Answer 1

您正在使用的代码会创建一个输入标记，该标记没有多个属性集。在你的情况下，你不会得到一个数组，但只有一个文件对象。要启用多项选择，您需要设置多个属性。

你可以试试这个

function myFunction() {
  var x = document.createElement("INPUT");
  x.setAttribute("type", "file");
  x.setAttribute("multiple", "multiple");
  document.body.appendChild(x);
}

阅读所选文件 有一些基本的方法来读取用户选择的文件 1.发布表单，在这种情况下，您将获得POST params中的文件 2.获取对 INPUT 标记的引用，然后访问所选文件

要上传文件，您通常应使用第二个选项，您可以按照以下步骤进行操作。

var inputTag = document.querySelectorAll('input'); // querySelectorAll returns an array so you will need to access the tag with proper index
var selectedFile = inputTag[0].files;// you will find the selected file in **files** property of the inputTag.

要阅读所选文件内容，您需要使用FileReader。有关如何使用它的完整示例here是一个很棒的教程。

希望这有帮助。

文件上传者

1 个答案: