提交動態創建的形式使用javascript

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

這已經有一段時間了，但我認爲瀏覽器安全設置通常不允許您以編程方式設置< input type =「file」/ >的內容，導致您在提交時出現一些安全異常。

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();