在javascript中隐藏表单文件POST [英] Hidden form file POST in javascript
问题描述
由于在安全环境中上传文件的Flex错误，我正试图在JavaScript中一起解决这个问题。
为此，我试图在javascript中创建一个隐藏表单，将附加一个文件和一些XML元数据，然后将其发送到服务器的多部分形式后。我的第一个想法是让这个工作在HTML中，然后将这个JavaScript代码移植到我的Flex项目。
我的第一个问题是将文件附加到隐藏的窗体在JavaScript 。我在这里做错了事。我对JavaScript不熟悉，所以如果有更好的方法来做到这一点，我很渴望学习。
这里是我正在使用的代码。 / p>
<！DOCTYPE html>
< html lang =en>
< head>
< meta charset =utf-8>
< title>隐藏表单后演示< / title>
< / head>
< body>
< script>
$ b $ //帮助函数来创建表格
函数getNewSubmitForm（）{
var submitForm = document.createElement（FORM）;
document.body.appendChild（submitForm）;
submitForm.method =POST;
submitForm.enctype =multipart / form-data;
返回submitForm;
$ b $ //帮助函数将元素添加到表单
函数createNewFormElement（inputForm，inputType，elementName，elementValue）{
var inputElement = document.createElement INPUT）;
inputElement.name = elementName;
inputElement.type = inputType;
尝试{
inputElement.value = elementValue;
} catch（err）{
alert（err.description）;
}
inputForm.appendChild（inputElement）;
return inputElement;
}
//创建表单的函数，添加一些元素
//然后提交
函数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 =我的网址;
submitForm.submit（）;
}
< / script>
< div id =docList>
< h2>文件清单< / h2>
< ul id =docs>< / ul>
< / div>
< input type =filevalue =点击创建选择文件id =selectedFile/>
< input type =buttonvalue =点击创建表单并提交onclick =createFormAndSubmit（）/>
< / body>
< / html>
你可以看到，我在 在FireBug中，我可以看到 不能设置 如果需要，可以通过绑定一个事件来动态添加其他非文件表单元素到 Because of a Flex bug uploading files in a secure environment, I'm attempting to hack together a workaround for this in 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. My first thought is to get this to work in HTML and then port this javascript code into my Flex project. My first problem is attaching the file to the hidden form in 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. Here's the code I'm current playing with. You can see, I have a try/catch block in In FireBug, I can see that the For security reasons, you cannot set the If you want to, it's possible to dynamically add additional non-file form elements, by binding an event to the
这篇关于在javascript中隐藏表单文件POST的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！ createNewFormElement中有一个try / code>。一个异常是在那里，但消息说未定义。
elementValue 被设置为一个File对象，所以我不确定发生了什么。输入[type = file] 的值属性。您当前的代码不需要JavaScript，可以使用纯HTML编写：
< form method =postenctype =multipart / form-dataaction =myurl>
< input type =filevalue =点击创建选择文件name =selectedFile/>
< input type =hiddenname =xmlvalue =my xml/>
< input type =submitvalue =点击创建表单并提交/>
< / form>
onsubmit 处理程序。
< form ... onsubmit = addMoreinputs（）; ID = 可保存格式 >
...
< script>
function addMoreInputs（）{
var form = document.getElementById（aForm）;
// ...创建并追加额外的元素。
//函数完成后，表单将被提交，因为
//输入[type = submit]元素已被点击。
}
<!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. An exception is being thrown there, but the message says "undefined".elementValue is set to a File object, so I'm not really sure what's going on.value attribute of an input[type=file]. Your current code doesn't need JavaScript, and can be written using pure 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 handler.<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.
}
