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

我在尋找簡單的客戶端腳本來使用ajax上傳文件。在這個腳本中搜索網站只會帶來很多帶有多功能的插件。我不需要多的feautres - 只是爲了能夠把它上傳儘可能使用AJAX如何使用簡單的jQuery-ajax調用來上傳文件

是否可以寫一些簡單簡單：

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

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

從

一邊 - 爲了得到拖&下降的文件 - 是否有一個簡單的腳本或我需要使用插件（並且是有一個非常微小和簡單的一個無多的功能）

來源

2012-02-28 Alon

「簡單」，「阿賈克斯」和「上傳」這兩個詞並不是我害怕的詞語。沒有快速的方法來做到這一點。 – BenOfTheNorth 2012-02-28 09:10:32

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

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

來源

2012-02-28 09:07:57

我不明白爲什麼它不能簡單。我可以使用一個PHP文件來做到這一點。所以爲什麼我不能用同一個php文件來做，而是用一個ajax調用來發送它的參數？ – Alon 2012-02-28 09:13:40

@Alon，因爲要將文件上傳到服務器，您需要能夠訪問其內容。由於很明顯的原因，您無法使用JavaScript訪問客戶端計算機上的文件內容。實際上，HTML5 File API允許您假設用戶已經在文件輸入中選擇了一個文件。此外，我沒有看到使用專爲此任務設計的插件的任何複雜內容。 – 2012-02-28 09:14:34

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

來源

2012-02-28 09:20:04 devnull69

您不能使用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

一旦你已經做了該文件的操縱，你可以讓你想要的任何信息的回聲包括在這一點上刷新最初的表格。

來源

2012-02-28 09:22:08 Ohgodwhy

iFrames來解決這個問題。不，不是。 – OptimusCrime 2012-02-28 09:29:00

看到我的答案，我認爲這很清楚我的意思是正確的。你的答案是否包含ajax？或者我錯過了什麼。 – OptimusCrime 2012-02-28 09:36:40

我一直在使用這個很長時間，再次告訴我，這不是純ajax/jQuery：http://valums.com/ajax-upload/ – OptimusCrime 2012-02-28 09:45:08

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

非常容易安裝，
非常時尚，而且
交叉broswer。

見demos

來源

2012-02-28 09:23:06 Starx

下載按鈕導致PayPal捐贈程序？「好」！ – 2013-07-05 13:33:26

@AleksandrMakov，哦它曾經是一個免費的產品。僅僅因爲你必須爲此付費，並不能證明我的觀點。他們是努力工作的開發人員，而不是像你這樣的freeloader，他們現在應該得到一些捐助。它已經有這麼多年了。請向開發商 – Starx 2013-07-05 15:35:38

嗯，我在哪裏「反駁」你的觀點？嘿，Starx，這是你的啤酒！哦，現在當你拿着那個冷瓶 - 請付錢，我應得的。 – 2013-07-05 19:23:36

如果你想使一個AJAX上傳，在所有現代人瀏覽器上運行，你應該檢查出一些jQuery插件。看看這篇文章，例如：http://www.tutorialchip.com/jquery/9-powerful-jquery-file-upload-plugins/。

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

順便說一句，我對這個插件有一些很好的體驗：http://valums.com/ajax-upload/。這非常簡單，所以你可以像你想要的那樣定製它（帶有一些基本的jQuery/js體驗）。

希望它有幫助。

來源

2012-02-28 09:28:27 OptimusCrime

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

回答

相關問題