在javascript中隐藏的表单文件POST

时间:2011-10-27 15:36:09

标签: javascript forms file-upload

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对象,所以我不确定发生了什么。

2 个答案:

答案 0 :(得分:3)

出于安全原因,您无法设置value的{​​{1}}属性。您当前的代码不需要JavaScript,可以使用纯HTML编写:

input[type=file]

如果您愿意,可以通过将事件绑定到<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

答案 1 :(得分:0)

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

在createFormAndSubmit函数中。 并添加&lt; div id =“formdiv”/&gt;在你的页面上。