2010-10-23 46 views
0

我需要通過HTTP Post(表單)通過單擊將文件發送到多個目的地。是否可以發送包含通過JavaScript提交按鈕的HTML表單?

的形式具有提交按鈕

<input type="submit" id="button1" name="submit" value="upload file"> 

action屬性和所需的各種不同的隱藏的字段中,通過JavaScript設置。

點擊button1後,文件將被髮送到第一個目的地,沒有問題。

由於提交按鈕,我不可能第二次發送表單並獲得不同的值。

我不能使用外部按鈕像

<button id="button1">upload file</button> 

這使問題容易解決(我已經嘗試過),但它是不可能在這裏。原因是該消息需要這些線在由一個真正的產生結束時提交HTML表單內按鈕:

Content-Disposition: form-data; name="submit" 

upload file 

我的問題:我如何通過JavaScript包括一個提交按鈕發送表格?我怎樣才能通過JavaScript「點擊」一個提交按鈕?

這是我的Java腳本文件:

// If frame 1 is loaded, the function prepareUpload() will be executed 
$("#frame1").ready(function() { 
    prepareUpload(); 
}); 


function prepareUpload(){ 

    // click-handler is registered to button1 
    $('#button1').click(function(){ 
      // if clicked... 
      // "Please Wait" window 
      $.blockUI({ css: { 
       border: 'none', 
       padding: '15px', 
       backgroundColor: '#000', 
       '-webkit-border-radius': '10px', 
       '-moz-border-radius': '10px', 
       opacity: .5, 
       color: '#fff' 
      } }); 

      //register load handler on iframe which triggers uploadData() 
      $('#frame1').load(function(){ 
       // reload from iframe 
       uploadData(); 
      }); 

      iTargetNumber = 0; 
      // call function uploadData() 
      uploadData(); 
      return true; 
     }); 
} 


function uploadData() { 
    var dataSet = data[iTargetNumber]; 
    document.getElementById("statusbar").style.width = (iTargetNumber/data.length * 200) + "px"; 

    // if file is uploaded to all servers... 
    if (iTargetNumber == data.length) { 
     document.getElementById("statustext").innerHTML = "done"; 
     // Reload browser window 
     document.location.reload(); 
     return; 
    } 

    // status message 
    document.getElementById("statustext").innerHTML = "uploading to " + dataSet.sUrl; 

    //set "action" attribute in HTML form  
    $('#form1').attr('action', dataSet.sUrl); 

    //set hidden fields in HTML form 
    for (var key in dataSet){ 
     $('#' + key).attr('value', dataSet[key]); 
    } 

    // HERE IT HANGS after the first run is completed because of the submit button. 

    //submit HTML form with correct values 
    $('#form1').submit(); 

    // increment variable +1 
    iTargetNumber++; 
} 

// initialize variable 
var iTargetNumber = 0; 

它掛後的第一種形式發送(因爲提交按鈕)。

使用

var myForm = document.forms.form1 
var emptyForm = document.createElement('form'); 
emptyForm.submit.apply(myForm); 

insted的的

$('#form1').submit(); 

於事無補了。將所得的消息沒有這些行包括:

Content-Disposition: form-data; name="submit" 

upload file 

一個附加隱藏字段等

<input type="hidden" id="submit" name="submit" value="submit"> 

,將創建一個內容處置:形狀數據; name =「submit」也沒有幫助,因爲它會在文件的內容之前,最終沒有上傳文件

================

問題解決了。該解決方案是JavaScript的Funktion通過按鈕

<button id="button1">upload file</button> 

形式的內部調用也是一個隱藏的提交按鈕

<input type="submit" style="display:none" id="button2" name="submit" value="upload file"> 

中的JavaScript的Funktion調用這個隱藏提交按鈕。現在,它正在毫無問題地工作。

+0

我找不出什麼問題,但聽起來好像使用AJAX可能更適合您正在嘗試做的事情。 http://api.jquery.com/jQuery.ajax/ – BudgieInWA 2010-10-23 20:41:18

+0

我使用jQuery 1.4.2 – Neverland 2010-10-23 20:45:40

+0

你試過'$(「#button1」)。onclick()'?因爲,這實際上是用戶點擊按鈕時觸發的。另外,我會檢查未定義的值,因爲你放在元素上的閉包(特別是'iTargetNumber'和'data')。 – FK82 2010-10-24 09:33:59

回答

0

從另一個表單獲取提交方法應該可以做到。

var myForm = document.forms.id_of_form; 
var emptyForm = document.createElement('form'); 
emptyForm.submit.apply(myForm); 
+0

我可以在哪裏插入這些行? – Neverland 2010-10-23 21:02:52

+0

在你想提交表格的地方。 – Quentin 2010-10-23 21:07:47

+0

我插入你的行並擦除$('#form1')。submit();但該消息不包括Content-Disposition:form-data;名稱=「提交」上傳文件。我使用wireshark檢查了它,並且我只是在發送文件時才接受它,只有當這些行被包含時 – Neverland 2010-10-23 21:16:27

相關問題