Question

我正在尝试提交一个我用html字符串创建的表单，如下所示：

        var upload_form = "`<form action=\"uploadSong.php\" method=\"POST\" class=\"upload_form\" enctype = \"multipart/form-data\" target=\"upload_form\">`";

        upload_form += "<input type=\"hidden\" name=\"showId\" value=\"" + showId + "\" />";
        upload_form += "<input type=\"hidden\" name=\"band_abb\" value=\"" + band_abb + "\" />";
        upload_form += "<input type=\"hidden\" name=\"showDate\" value=\"" + date + "\" />";
        upload_form += "<input type=\"hidden\" name=\"city\" value=\"" + city + "\" />";
        upload_form += "<input type=\"hidden\" name=\"state\" value=\"" + state + "\" />";
        upload_form += "<input type=\"hidden\" name=\"venue\" value=\"" + venue + "\" />";
        upload_form += "<input type=\"hidden\" name=\"setNum\" value=\"" + setNum + "\" />";
        upload_form += "<input type=\"hidden\" name=\"songNum\" value=\"" + songNum + "\" />";
        upload_form += "<input type=\"hidden\" name=\"songId\" value=\"" + songId + "\" />";
        upload_form += "<input type=\"hidden\" name=\"showId\" value=\"" + showId + "\" />";
        upload_form += "<input type=\"hidden\" name=\"songName\" value=\"" + songName + "\" />";
        upload_form += "<input type=\"file\" name=\"upload[]\" value=\"" + songLoc + "\" />";
        upload_form += "<input type=\"hidden\" name=\"partOfASegue\" value=\"" + partOfASeuge + "\" />";
        upload_form += "<input type=\"hidden\" name=\"addInfo\" value=\"" + addInfo + "\" />";
        upload_form += "<input type=\"submit\" name=\"submit_btn\" value=\"submited\" />";
        upload_form += "</form>";

        $('#upload_form').html(upload_form);

        alert(upload_form);

        $('form .upload_form').submit();

        $('form .upload_form').remove();

我有像这样的html目标：

`<iframe id="upload_form"></iframe>

我正在尝试重复上传一系列文件，有谁知道为什么这不起作用？

Answer 1

已经有一段时间了，但我认为浏览器安全设置通常不允许您设置＆lt; input type =“file”/＆gt;的内容。以编程方式，在您提交时会导致一些安全性异常。

Answer 2

我看到的唯一不起作用的是提交调用的选择器。

你有：

$('form .upload_form').submit();
$('form .upload_form').remove();

应该是什么：

$('form.upload_form').submit().remove();

另外，从代码中的这一行开始：

$('#upload_form').html(upload_form);

我推断您有一个ID为upload_form的容器，但您的iframe也具有相同的ID。我建议你改变其中一个id，否则你可能会出现毛病行为。

总结一下我的变化如下：

HTML：

<div id="uploadFormContainer"></div>
<iframe id="upload_form"></iframe>

使用Javascript：

var upload_form = ... /* your form string unchanged - excluded for brevity */

$('#uploadFormContainer').html(upload_form);

alert(upload_form);

$('form.upload_form').submit().remove();

Answer 3

您的jquery选择器是错误的。您需要删除空格字符，如下所示：

$('form.upload_form')

Answer 4

您可能会考虑稍微重写代码以避免使用不必要的选择器。例如：

//assuming upload_form is defined as it is in the question

//build a DOM/jQuery node from the html string
upload_form = $(upload_form);

//set the contents of #upload_form to the upload form
$('#upload_form').empty().append(upload_form);

//submit the form
upload_form.submit();

//delete the form
upload_form.remove();

正如其他人所提到的，您也可以链接jQuery调用，并使用类似upload_form.submit().remove();

的内容

使用javascript提交动态创建的表单

4 个答案: