如何使用ajax上傳文件？

HTML：如何使用ajax上傳文件？

<form id="confirmresourceform" enctype="multipart/form-data" method="post" style="display: none;"> 
       <input id="uploadlecture" name="fileToUpload1" type="file" value="Upload Resources"/> 
      </form>

使用Javascript/jQuery的/阿賈克斯：

$("#submitchanges").on("click",function(){ 
    //Upload files 
    var formData = new FormData(document.getElementById("confirmresourceform")); 
    formData.append('lecture', $('#uploadlecture')[0].files[0]); 
    $.ajax({ 
     type: 'POST', 
     url: 'upload.php', 
     contentType: false, 
     processData: false, 
     data: formData, 
     success: function (data) { 
      console.log(data); 
     } 
    }); 
});

PHP（upload.php的）：

echo $_FILES['lecture']['name'];

好了，所以我試圖上傳用ajax文件（在點擊一個div而不是使用提交表單的東西）。我已經通過jQuery將關鍵詞'lecture'添加到formdata中。目前，upload.php腳本有一行用於回顯文件名。然而，當阿賈克斯運行，並調用upload.php的，我得到以下錯誤：

Undefined index: lecture in C:\wamp\www\TheClass\lesson_creator_page\upload.php on line 4

我敢肯定，我在FORMDATA定義的「演講」，並通過了FORMDATA到PHP。有什麼我做錯了，是行formData.append('lecture', $('#uploadlecture')[0].files[0]);正確嗎？

來源

2015-05-27 Kevin Shen

這可能會幫助你在這裏：http://stackoverflow.com/questions/6974684/how-to-send-formdata-objects-with-ajax-requests-in-jquery – Notaras

我有同樣的問題，幾個月前，並做了「.ajaxFileUpload」下列解決它：

在你的jQuery

設定如下：

jQuery.ajaxFileUpload({ 
      url    : "upload.php", 
      secureurl  : false, 
      fileElementId : "fileToUpload1", 
      dataType  : 'json', 
      data   : { 
       // if you have another data to pass in your phhp  
      }, 
      success : function() 
      { 

      }, 
      error : function(){ 

      } 
     });

來源

2015-05-27 00:35:54 Kentot

感謝您的快速答案！不會fileElementId是'uploadlecture'而不是fileToUpload1？ –

據我瞭解，這是您的輸入文件的名稱，並在您的PHP文章中使用上傳，但如果這不起作用嘗試將其更改爲'uploadlecture' – Kentot

好的。我得到：Uncaught TypeError：jQuery.ajaxFileUpload不是函數 –

有大量的文獻在線關於此。

使用Ajax進行文件上傳的最佳方式是使用插件。這裏有幾個，你要考慮：

來源：How can I upload files asynchronously?

Multiple File Upload Plugin

Mini Multiple File Upload

jQuery File Upload

You can search more from jQuery's plugin site.

，如果你不想使用插件，那麼你最好的選擇是使用iframe。

您也可以使用javascript的文件API，但並不支持所有瀏覽器。這裏檢查：https://developer.mozilla.org/en/docs/Web/API/File

編輯：如果你想更有趣，你可以開發一個JAVA或SWF應用程序嵌入到你的頁面來做到這一點。

來源

2015-05-27 02:18:00 Notaras

謝謝！這些插件會顯着影響網頁加載時間嗎？ –

完全沒有。您可以下載這些插件的源代碼並檢查與它們關聯的.js文件的大小。我不認爲他們那麼大 – Notaras

如何使用ajax上傳文件？

回答

相關問題