2011-12-12 64 views
1

我有一個HTML表單,以前只用於用戶的文本屬性,這是所有使用AJAX通過URL調用PHP控制器函數來刷新頁面內容通過數據庫和服務器端調用(刪節版)PHP jQuery .ajax()文件上傳服務器端理解

<input type="text" id="firstname" name="FIRSTNAME"/> 
<input type="text" id="lastname" name="LASTNAME"/> 
<input name="Submit"type="submit" value="Submit" /> 

這種「創建用戶」的形式現在需要整合文件上傳機制,爲

<input type="file" name="userImage" /> 

的問題是,形式正在通過用戶提交的圖片.serialize.ajax#創建表單提交

 $.ajax({ 
      url: 'controller.php?command=create', 
      type: 'POST', 
      data: $(form).serialize(), 

創建URL調用PHP控制器echo $dmv->create();,這是模型公共function create(){ //execute database insert and execute

我已閱讀,連載沒有意義的文件,這是真的,但我也想試圖找出如何更新我現有的表單,以合併文件上傳功能

我試圖瞭解jquery.form.js插件(http://malsup.com/jquery/form/#file-upload),但無法理解如何將它們結合在一起。

我相信我需要做的是將文件上傳作爲一個單獨的邏輯執行,然後再與原始文件名邏輯聯繫起來,這是文件存儲與唯一映像名稱存儲在數據庫下的記錄,不是BLOB圖像存儲。

讓我知道,如果我可以提供任何進一步的信息,並感謝任何可以給予的幫助。

+0

您無法使用ajax調用進行上傳。獲得ajax感覺的唯一方法是使用框架提交onchange文件。然後返回圖像作爲結果。 – Michael

+0

我知道如何用ajax和javascript做這個(我不知道jquery)。這會有幫助嗎? –

+0

是的。我想我對PHP處理文件上傳感興趣,但是提交之前或之後仍然處理其他表單值。我無法繞過我的頭說如何說jQuery插件的結果可以使用一次提交,或如何完成文件上傳與這些值 –

回答

0

下面是Michael正在談論的一個例子。 http://www.phpletter.com/Our-Projects/AjaxFileUpload/

+0

這是我對邁克爾的反應,但我似乎無法對他作出反應。所以這是一個答案... – jivanrij

+0

那是什麼? AjaxFileUpload? 這個鏈接不通過Ajax提供文件上傳功能, 他們正在提出整個發佈請求和刷新整個頁面。 –

1

您無法通過AJAX上傳文件。您唯一可能使用Flash(例如Uploadify:http://www.uploadify.com/),iFrame或僅提交表單。該表單必須具有設置爲multipart的enctype。

<form action="script.php" method="post" enctype="multipart/form-data"> 

插件可能通過創建一個「隱藏的」iframe來模仿AJAX文件上傳。 示例:http://valums.com/ajax-upload/

+0

我不能通過ajax上傳文件,但有沒有辦法通過AJAX調用php腳本來上傳?我已經完成了多次能夠提交表單並使用php編寫文件,但在這個特定的實例中,因爲整個應用程序都是通過php調用通過ajax加載的,所以我不能通過通常的POST來刷新頁面。所以不一定是處理文件上傳的ajax,而是調用php處理程序的ajax –

+0

如果您問是否可以提交AJAX文章,請回電PHP腳本,讓它抓取文件並上傳它是可能的,答案是否定的。PHP是後端處理語言,這意味着它將處理您發送給它的內容,並回顯(打印)任何輸出。它不能處理該範圍之外的事物。爲了使您的上傳工作像AJAX一樣,您需要使用Flash或iframe,如上所述。它模仿AJAX類似的功能,但實際上並不是AJAX。 (因爲你無法使用AJAX上傳文件) –

1

您可以使用隱藏的iframe來模仿AJAX調用。你甚至可以實現一個回調函數,並得到就像一個AJAX調用服務器響應:

HTML -

<form enctype="multipart/form-data" target="workFrame"></form> 
<iframe id="workFrame" style="display:none;"></iframe> 

JS--

//bind an event handler to the form with the file input 
$('form').on('submit', function() { 

    //check to make sure the user has selected an image, if not then stop the form from submitting 
    if ($('#userImage').val().length == 0) return false; 

    //bind an event handler to the `load` event for the iframe so we will have a callback for the form submission 
    $('#workFrame').on('load', function() { 
     var $this = $(this); 

     //remove this event handler 
     $this.off('load'); 

     //get the response from the server 
     var response = $this.contents().find('body').html(); 
     //you can now access the server response in the `response` variable 
    }); 

    //return true so the form submits normally 
    return true; 
}); 

注意.on()在jQuery的1.7是新的在這種情況下與.bind()相同。