如何使用簡單的jquery-ajax調用上傳文件

Question

我正在搜索一個簡單的客戶端腳本來使用ajax上傳文件。 搜索此腳本的Web只會帶來很多具有多功能的插件。 我不需要多功能 - 只是為了能夠使用ajax盡可能簡單地上傳它

有可能寫一些簡單的東西：

$.get('server/upload.php?file = ' + $('#uploadInput').val(), function(data) {
   $('.result').html(data);    
 });

如果有可能 - 我應該如何正確編寫它（ $('#uploadInput').val()不會給我正確的目錄路徑 - 所以我需要做什么來使用Ajax傳遞位置）。

除此之外 - 為了獲取文件的拖放 - 是否有一個簡單的腳本或我需要使用插件（並且有一個非常小而簡單的沒有多功能）

Answer 1

您不能使用AJAX上傳文件（除非客戶端瀏覽器支持HTML 5元素，它允許訪問文件對象。）。

你的解決方案是偽造它

創建一個表單元素

<form id="myForm" action="upload.php" method="POST" target="results_frame">
  <input name="fileUpload" type="file" />
  <input type="submit" value="Submit" />
</form>

我們為'results_frame'設置了框架的目標，我們將在HTML中的表單之后將其定義為空iframe。

<iframe id="results_frame" name="results_frame" style="display:none;"></iframe>

然后，在您的php文件的后端，您可以捕獲該文件 -

$_FILE['file']['param']; //where param accepts multiple values
//such as name, type, size, error, and tmp_name

完成對文件的操作后，您可以回顯所需的任何信息，包括此時刷新初始表單。

Answer 2

您可以使用一些HTML5功能（例如File API）來實現此目的（請參閱本文中的示例：上載用戶選擇的文件部分）。

但如果您想要跨瀏覽器解決方案，我建議您使用客戶端上傳插件。 例如， jQuery表單插件很容易設置。 Valums Ajax上傳也很不錯。 它提供了許多功能，例如拖放和上傳進度，但如果您不關心它們，可以輕松關閉它們。

Answer 3

在現代瀏覽器上，您可以使用新的xhr2（請參閱http://www.html5rocks.com/en/tutorials/file/xhr2/ ）執行整潔的AJAX文件上傳...包括進度條。 我真的不知道這是否已經嵌入到最新的jQuery中。 也許其他人可以對此有所了解。

Answer 4

Uploadify是ajax上傳的另一個很好的解決方案。 它的

• 非常容易設置，
• 很時尚，而且
• 交叉broswer 。

看演示

Answer 5

如果你想制作一個適用於所有現代瀏覽器的ajax上傳器，你應該查看一些jQuery插件。 查看本文例如： http ： //www.tutorialchip.com/jquery/9-powerful-jquery-file-upload-plugins/ 。

您在第一篇文章中建議的內容不起作用。 即使您從表單中獲取內容，也無法將信息放入GET中。 URL最長可達200​​0（？）個字符，因此上傳較大的文件會導致上傳崩潰。 你需要使用POST發送它。

順便說一句，我對這個插件有一些很好的經驗： http ： //valums.com/ajax-upload/ 。 它非常簡單，因此您可以根據需要自定義它（具有一些基本的jQuery / js體驗）。

希望能幫助到你。