javascript - 用于文件上传的 HTML 表单 - 由 JavaScript 生成

Question

我一直在尝试使用 JavaScript 创建并提交表单，以便将文件上传到我的网络服务器。我读到，由于安全原因，input type="file" 无法由 JavaScript 自动填充。既然如此，我该如何发送 POST 命令来上传我的文件呢？

我意识到下面的代码片段将无法工作，但我该怎么做？

我最终希望做的是为用户拖放的多个文件调用此函数，以便它们位于一个数组中。我的网络服务器上没有 PHP(它只会处理简单的 HTTP 命令)。

 function uploadFile( fileName )
   {
     var form     = document.createElement("form");
     var element1 = document.createElement("file");

     form.method  = "post";
     form.action  = "upload.html";
     form.enctype = "multipart/form-data";
     form.charset = "utf-8";

     element1.value = "/Temp/TestFile.txt";
     element1.name = "upload1";
     form.appendChild( element1 );

     document.body.appendChild( form );

     form.submit();
   }

阅读 Tom 提供的第一个链接后，我想到了以下内容:

   function uploadFile( fileName )
   {
     var form     = document.createElement("form");
     var element1 = document.createElement("file");

     form.method  = "post";
     form.action  = "upload.html";
     form.enctype = "multipart/form-data";
     form.charset = "utf-8";

     element1.value = "/JScript/TestText.txt"
     element1.id    = "fileselect";
     element1.name  = "fileselect[]";
     element1.multiple = "multiple";
     form.appendChild( element1 );

     document.body.appendChild( form );

     form.submit();
   }

..但我不明白 fileselect[] 的用法..我理解它是一个数组，但如何填充一个数组，然后将其分配回 HTML 元素？举例来说，我只有一个要发回的文件，即/JScript/TestText.txt .. 如何分配 fileselect[0]="/JScript/TestText.txt";然后反馈到'element'中提交？

Answer 1

更正，您无法填充文件输入的值。如果可以的话，您可以访问用户计算机上的任何文件，这将是一个巨大的安全问题。

此外，如果没有某种服务器端脚本来验证文件并将其存储到正确的位置，您根本无法将文件上传到服务器。如果仅使用 apache 就可以做到这一点，那么您网站的访问者就可以将他们想要的任何内容上传到您的服务器，包括病毒。

如果您确实设法让服务器端上传工作(我将首先使用带有标准文件输入字段的静态 html 表单进行测试)，那么为了让您通过拖放接受文件并将该文件推送到服务器，您将需要 html5 文件 api。有很多教程，例如 this one .

如果您想要一些可以轻松跨平台工作的强大功能，请查看类似 PlUpload 的内容。它可以实现您想要的一切，至少从客户端来看。