javascript中的隐藏表单文件POST

Question

Because of a Flex bug uploading files in a secure environment , I'm attempting to hack together a workaround for this in javascript. 由于Flex错误会在安全的环境中上传文件，因此我试图用javascript破解此问题的解决方法。

To do so, I'm attempting to create a hidden form in javascript, to which I'll attach a file and some xml meta data, then send it to the server in a multipart form post. 为此，我尝试在javascript中创建一个隐藏表单，在该表单中我将附加一个文件和一些xml元数据，然后以多部分形式将其发送到服务器。 My first thought is to get this to work in HTML and then port this javascript code into my Flex project. 我的第一个想法是让它在HTML中运行，然后将此JavaScript代码移植到我的Flex项目中。

My first problem is attaching the file to the hidden form in javascript. 我的第一个问题是将文件附加到javascript中的隐藏表单。 I'm doing something wrong here. 我在这里做错了。 I'm pretty inexperienced with javascript so if there's a better way to do this, I'm eager to learn. 我对javascript完全没有经验，所以如果有更好的方法可以做到这一点，我很想学习。

Here's the code I'm current playing with. 这是我当前正在使用的代码。

<!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>

You can see, I have a try/catch block in createNewFormElement . 您可以看到，我在createNewFormElement有一个try / catch块。 An exception is being thrown there, but the message says "undefined". 在那里引发了异常，但消息显示“未定义”。

In FireBug, I can see that the elementValue is set to a File object, so I'm not really sure what's going on. 在FireBug中，我可以看到elementValue设置为File对象，因此我不太确定发生了什么。

Answer 1

For security reasons, you cannot set the value attribute of an input[type=file] . 出于安全原因，您无法设置input[type=file]的value属性。 Your current code doesn't need JavaScript, and can be written using pure HTML: 您当前的代码不需要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>

If you want to, it's possible to dynamically add additional non-file form elements, by binding an event to the onsubmit handler. 如果需要，可以通过将事件绑定到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.
}

Answer 2

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

in your createFormAndSubmit function. 在您的createFormAndSubmit函数中。 and add <div id="formdiv" /> on your page. 并在页面上添加<div id =“ formdiv” />。

javascript中的隐藏表单文件POST

问题描述

2 个解决方案

解决方案1
3 已采纳 2011-10-27 17:25:00

解决方案2
0 2011-10-27 16:48:59

javascript中的隐藏表单文件POST

问题描述

2 个解决方案

解决方案1 3 已采纳 2011-10-27 17:25:00

解决方案2 0 2011-10-27 16:48:59

解决方案1
3 已采纳 2011-10-27 17:25:00

解决方案2
0 2011-10-27 16:48:59