2010-03-25 57 views
2

我想找到一種方法來上傳單個文件*,在後臺,它有文件選擇後自動啓動,而不需要Flash上​​傳,所以我想用兩個偉大的機制(jQuery.Form和JQuery MultiFile)結合在一起。我沒有成功,但我很確定這是因爲我錯過了一些基本的東西。以編程方式提交表單時使用AjaxForm

剛開始使用多文件,我定義的形式如下...

<form id="photoForm" action="image.php" method="post" enctype="multipart/form-data"> 

文件輸入按鈕被定義爲...

<input id="photoButton" "name="sourceFile" class="photoButton max-1 accept-jpg" type="file"> 

和JavaScript是...

$('#photoButton').MultiFile({ 
    afterFileSelect: function(){ 
     document.getElementById("photoForm").submit(); 
    } 
}); 

這很好。只要用戶選擇單個文件,MultiFile就會將表單提交給服務器。


如果不是使用多文件,如上圖所示,假設我包括與定義如下JQuery的表單插件沿着一個提交按鈕...

var options = { 
    success: respondToUpload 
}; 

$('#photoForm').ajaxForm(options); 

...這也完美的作品。點擊提交按鈕後,表單將在後臺上傳。


我不知道該怎麼做是讓這兩個一起工作。如果我使用Javascript來提交表單(如上面的MultiFile示例所示),表單將被提交,但JQuery.Form函數未被調用,所以表單不會在後臺提交。

我想,也許我需要改變的形式登記如下...

$('#photoForm').submit(function() { 
$('#photoForm').ajaxForm(options); 
}); 

...但是,這並沒有解決問題。當我嘗試.ajaxSubmit而不是.ajaxForm時也是如此。

我錯過了什麼?

  • BTW:我知道這聽起來奇怪使用多文件單文件上傳,但這個想法是,文件的數量將根據用戶的帳戶是動態的。所以,我從一個開始,但數量根據條件而變化。

回答

1

答案結果是令人尷尬的簡單。

而不是使用編程方式提交...

document.getElementById("photoForm").submit(); 

...我用...

$("#photoForm").submit(); 

而且,因爲我只需要上傳有時多個文件,我使用了一種更簡單的技術...

1)表單與我原來的相同...

<form id="photoForm" action="image.php" method="post" enctype="multipart/form-data"> 

2)文件輸入字段基本上是相同的...

<input id="photoFile" "name="sourceFile" style="cursor:pointer;" type="file"> 

3)如果該文件輸入場的變化,提交執行...

$("#photoFile").change(function() { 
    $("#photoForm").submit(); 
}); 

4 )AjaxForm監聽器做它的事...

var options = { 
    success: respondToUpload 
}; 
$('#photoForm').ajaxForm(options); 
相關問題