Скрытая форма файла POST в JavaScript - PullRequest
Новая
       22

Скрытая форма файла POST в JavaScript

0 голосов
/ 27 октября 2011

Из-за ошибки Flex, загружающей файлы в защищенной среде , я пытаюсь найти обходной путь для этого в 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>

Вывидите, у меня есть блок try / catch в createNewFormElement.Там создается исключение, но в сообщении говорится «undefined».

В FireBug я вижу, что elementValue установлен для объекта File, поэтому я не совсем уверен, что происходит.

Ответы [ 2 ]

3 голосов
/ 27 октября 2011

В целях безопасности вы не можете установить атрибут value для input[type=file]. Ваш текущий код не нуждается в 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.
}
0 голосов
/ 27 октября 2011

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

в вашей функции createFormAndSubmit.и добавитьна вашей странице.

...