2016-08-03 134 views
1

我是新來的網絡發展,我一直有最新的問題是AJAX文件上傳...

現在我有兩個HTML輸入字段;一個文件輸入和一個按鈕。

<input type="file" name="Frame" id="Frame_"/> 
 
<input type="button" name="FrameButton" id="FrameButton_" value="UPLOAD"/>

按鈕被點擊然後我打電話說有下面的代碼功能後..

var frame = document.getElementById('Frame_'); 
 
var frameImg = frame.files[0]; 
 
var form_data = new FormData(); 
 

 
form_data.append('frame', frameImg); 
 

 
jQuery.ajax({ 
 
    url : './handler.php', 
 
    type : 'post', 
 
    data : form_data 
 
    contentType : false, 
 
    processData : false, 
 
    success : alert("Frame Uploaded") 
 
});

當我的var_dump()的$ _POST和$ _FILES數組顯示兩個數組都爲空。儘管Chrome Dev中的「Request Payload」請求是

Content-Disposition:form-data; NAME = 「框架」;文件名=「GoldFrame.jpg」

內容類型:image/JPEG

在其中我的印象是,這意味着文件的,我在前端選擇成功是「的信息張貼「編輯我的handler.php文件。這是一個錯誤的解釋?

無論哪種方式,有人可以給我一個答案我的問題?或至少指向可能有我的答案的資源?似乎有許多類似的問題,但我沒有看到有一個確切的答案。

我在過去曾經使用iframe來處理這種事情,但這看起來像一個非常黑客的方法,並且我希望在將來能夠靈活地使用ajax來處理這類任務。

幫助表示讚賞。

+0

這裏;請訪問http://php.net/manual/en/function.error-reporting.php,然後將其應用於您的代碼。還請檢查您的控制檯。 –

+0

你設置了一個錯誤的內容類型,這意味着jquery不會發送任何類型。如果PHP沒有看到適當的類型進來,它將不會假設表單/文件提交,並且不會解析/填充$ _POST/$ _ FILES的輸入。您還將processData設置爲false,因此您傳遞的對象將被** NOT **處理爲正常提交。 –

+0

檢查文件上傳的內容類型。那裏有一個錯誤。之後,您可以通過瀏覽器控制檯檢查Ajax調用是否正確。如果它給出了錯誤,那麼你應該檢查。 –

回答

1

試試這個。

(的index.html)

<form id="uploadForm"> 
    <input type="file" name="frame" /> 
    <input type="submit" value="UPLOAD" /> 
</form> 

腳本(的script.js)

$("#uploadForm").on('submit',(function(e) { 
    e.preventDefault(); 
    $.ajax({ 
     url: "handler.php", 
     type: "POST", 
     data: new FormData(this), 
     contentType: false, 
     cache: false, 
     processData: false, 
     success: function(data){ 
      console.log(data); 
     }   
    }); 
})); 

服務器端(處理程序。php)

<?php 

var_dump($_FILES); 
+0

$ _FILES數組包含文件!謝謝。在我以前的解決方案中,我有兩個輸入標籤,但它們沒有包含在

中。這就是爲什麼我的解決方案不起作用嗎? – mbricep

+0

是的,當使用ajax時,你必須停止表單的默認提交,並讓ajax處理你的請求。 –

0

你是var_dump() - 你的$ _FILES/$ _ POST數組在handler.php文件中嗎?

如果您試圖在具有ajax調用的文件中轉儲這些變量,它將無法工作,因爲AJAX正在進行前端調用,並且文件/後期變量是服務器端變量...哪些意味着只有handler.php文件將有這些變量可用。

嘗試在handler.php中添加var_dump()調用,並將結果輸出到ajax調用中,我希望您會看到您正在查找的結果。

+0

感謝您的回覆。我目前使用echo'debuggin info'; var_dump($ _ POST); var_dump($ _ FILES);在我的handler.php文件的頂部,並在Chrome開發人員控制檯的網絡選項卡中接收結果。如果我打印ajax調用的輸出,結果會不同嗎? – mbricep

+0

不,他們應該是一樣的。好的。您是否可以發佈handler.php腳本代碼?這將有助於調試。 – MustafaG

相關問題