通過FileAPI和PHP上傳圖像

我試圖通過FilesAPI上傳多個圖像。我在這裏有以下代碼：通過FileAPI和PHP上傳圖像

$(document).ready(function() 
{ 
    function handleFileSelect(evt) { 
    var files = evt.target.files; // FileList object 
    // Loop through the FileList and render image files as thumbnails. 
    for (var i = 0, f; f = files[i]; i++) { 

     // Only process image files. 
     if (!f.type.match('image.*')) { 
     continue; 
     } 

     var reader = new FileReader(); 

     // Closure to capture the file information. 
     reader.onload = (function(theFile) { 
     return function(e) { 
      // Render thumbnail. 
      var span = document.createElement('span'); 
      span.innerHTML = ['<img class="thumb" src="', e.target.result, 
          '" title="', escape(theFile.name), '"/>'].join(''); 
      document.getElementById('list').insertBefore(span, null); 
     }; 
     })(f); 

     // Read in the image file as a data URL. 
     reader.readAsDataURL(f); 

    } 
    uploadFile(f); 
    } 

document.getElementById('files').addEventListener('change', handleFileSelect, false); 

    function uploadFile(file) 
    { 
     var xhr = new XMLHttpRequest(); 
     var formData = new FormData(); 

     formData.append('file',file); 

     xhr.open('POST', 'upload_team.php'); 
     xhr.overrideMimeType('text/plain; charset=x-user-defined-binary'); 

     xhr.send(formData); 
     $('#test').load('upload_team.php'); 
    } 
});

如何將圖像信息「傳輸」到上傳的PHP腳本？我已經試過這樣：

<?php 
echo $_FILES['file']; 
if(isset($_FILES['file'])) { 
echo "hej<br>"; 
} 
?>

但不執行回聲內的代碼。

任何人可以幫助我嗎？

來源

2014-02-09 user500468

請確保您在'

http://jsfiddle.net/Tarnum/rya6X/7/（我稍微修改功能uploadFile）

後端在PHP上

<?php 
    if(isset($_FILES['file'])) { 
     echo $_FILES['file']['name']; 
    } 
?>

http://www.php.net/manual/en/features.file-upload.post-method.php

它應該工作。

如果不是，請嘗試使用沒有JavaScript和AJAX的通常方式發送表單。例如，複製<表>代碼http://jsfiddle.net/，修復屬性「操作」，選擇文件並單擊提交按鈕。

對於服務器，這與使用AJAX的HTTP請求完全相同。

如果問題仍然存在 - 那麼問題出在服務器端。也許在服務器配置中禁用了上傳文件的功能。

來源

2014-02-09 22:50:37

謝謝。我會在稍後嘗試。目前在工作:-) – user500468

嗨，這工作得很好。但是，我如何處理多個圖像？用戶可以上傳不止一個圖像。我應該在包含圖像信息的jQuery中使用數組，然後使用此數組調用upload_team.php？ – user500468

使用 http://www.w3schools.com/tags/att_input_multiple.asp上的「multiple」屬性。因此，數組'var files = evt.target.files;'將包含多個用戶文件。你可以發送他們在一個http查詢或發送每個文件在單獨的http查詢。來自jsfiddle的示例代碼發送單個http查詢中的每個文件。 P.S.我的英文不好，但我認爲你能理解我。 –

首先，HTML 「格式」元素應該有這個屬性

enctype= multipart/form-data

答案的其餘部分是在這裏Handle File Uploads/Php Manual

來源

2014-02-09 22:06:20

上有屬性'enctype =「multipart/form-data」'我知道我應該如何處理PHP上傳。但是，如何從我的圖像獲取圖像信息JavaScript到我的PHP文件？ – user500468

對不起，我沒有看到你正在使用的Ajax。我不知道阿賈克斯。我打算在一個月左右的時間裏學習它，但爲什麼要使用Ajax呢？當你提交一個表單時，POST自動進入服務器並且$ _FILES被填充。 –

http://stackoverflow.com/questions/10475313/ajax-file-upload-with-xmlhttprequest –

通過FileAPI和PHP上傳圖像

回答

相關問題