在javascript中隐藏表单文件POST答案

【问题标题】：Hidden form file POST in javascript在javascript中隐藏表单文件POST
【发布时间】：2011-10-27 15:36:08
【问题描述】：

Because of a Flex bug uploading files in a secure environment，我正在尝试在 javascript 中解决此问题。

为此，我尝试在 javascript 中创建一个隐藏的表单，我将附加一个文件和一些 xml 元数据，然后将其以多部分表单的形式发送到服务器。我的第一个想法是让它在 HTML 中工作，然后将此 javascript 代码移植到我的 Flex 项目中。

我的第一个问题是将文件附加到 javascript 中的隐藏表单。我在这里做错了什么。我对javascript非常缺乏经验，所以如果有更好的方法可以做到这一点，我很想学习。

这是我目前正在使用的代码。

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>hidden form post demo</title>
   </head>

   <body>
      <script>
      
         //helper function to create the form
         function getNewSubmitForm(){
             var submitForm = document.createElement("FORM");
             document.body.appendChild(submitForm);
             submitForm.method = "POST";
             submitForm.enctype = "multipart/form-data";
             return submitForm;
         }
         
         //helper function to add elements to the form
         function createNewFormElement(inputForm, inputType, elementName, elementValue) {
             var inputElement = document.createElement("INPUT");
             inputElement.name = elementName;
             inputElement.type = inputType;
             try {
                inputElement.value = elementValue;
             } catch(err) {
                alert(err.description);
             }
             inputForm.appendChild(inputElement);
             return inputElement;
         }
         
         //function that creates the form, adds some elements
         //and then submits it
         function createFormAndSubmit(){
             var submitForm = getNewSubmitForm();
             var selectedFileElement = document.getElementById("selectedFile");
             var selectedFile = selectedFileElement.files[0];
             createNewFormElement(submitForm, "HIDDEN", "xml", "my xml");
             createNewFormElement(submitForm, "FILE", "selectedFile", selectedFile);
             submitForm.action= "my url";
             submitForm.submit();
         }
         
      </script>


      <div id="docList">
        <h2>Documentation List</h2>
        <ul id="docs"></ul>
      </div>

      <input type="file" value="Click to create select file" id="selectedFile"/>
      <input type="button" value="Click to create form and submit" onclick="createFormAndSubmit()"/>
</body>

</html>

你可以看到，我在createNewFormElement 中有一个 try/catch 块。那里抛出异常，但消息显示“未定义”。

在 FireBug 中，我可以看到 elementValue 设置为 File 对象，所以我不太确定发生了什么。

【问题讨论】：

标签： javascript forms file-upload

【解决方案1】：

出于安全原因，您不能设置input[type=file] 的value 属性。您当前的代码不需要 JavaScript，可以使用纯 HTML 编写：

<form method="post" enctype="multipart/form-data" action="myurl">
    <input type="file" value="Click to create select file" name="selectedFile" />
    <input type="hidden" name="xml" value="my xml" />
    <input type="submit" value="Click to create form and submit" />
</form>

如果您愿意，可以通过将事件绑定到 onsubmit 处理程序来动态添加其他非文件表单元素。

<form ... onsubmit="addMoreinputs();" id="aForm">
...
<script>
function addMoreInputs(){
    var form = document.getElementById("aForm");
    // ...create and append extra elements.
    // once the function has finished, the form will be submitted, because
    //  the input[type=submit] element has been clicked.
}

【讨论】：

这实际上并没有“解决”我的问题，但至少它表明它无法以我尝试的方式解决。谢谢！

【解决方案2】：

添加 var dom=document.getElementById("formdiv"); dom.appendChild(submitForm);

在您的 createFormAndSubmit 函数中。并在您的页面上添加

。

【讨论】：

这对我不起作用。我仍然在同一个地方遇到异常。