問(wèn)：

我想用 jQuery 異步上傳文件。

$(document).ready(function () { $(“#uploadbutton”).click(function () { var filename = $(“#file”).val(); $.ajax({ type: “POST” , url: “addFile.do”, enctype: ‘multipart/form-data’, data: { file: filename }, success: function () { alert("Data Uploaded: "); } }); }); } ); 文件

我只獲取文件名，而不是上傳文件。我能做些什么來(lái)解決這個(gè)問(wèn)題？

答1:

huntsbot.com匯聚了國(guó)內(nèi)外優(yōu)秀的初創(chuàng)產(chǎn)品創(chuàng)意，可按收入、分類等篩選，希望這些產(chǎn)品與實(shí)踐經(jīng)驗(yàn)?zāi)芙o您帶來(lái)靈感。

使用 HTML5，您可以使用 Ajax 和 jQuery 進(jìn)行文件上傳。不僅如此，您還可以進(jìn)行文件驗(yàn)證（名稱、大小和 MIME 類型）或使用 HTML5 進(jìn)度標(biāo)記（或 div）處理進(jìn)度事件。最近我不得不制作一個(gè)文件上傳器，但我不想使用 Flash 也不想使用 iframe 或插件，經(jīng)過(guò)一番研究，我想出了解決方案。

的HTML：

首先，您可以根據(jù)需要進(jìn)行一些驗(yàn)證。例如，在文件的 .on(‘change’) 事件中：

$(':file').on('change', function () {var file = this.files[0];if (file.size > 1024) {alert('max upload size is 1k');}// Also see .name, .type });

現(xiàn)在點(diǎn)擊按鈕提交 $.ajax()：

$(':button').on('click', function () {$.ajax({// Your server script to process the uploadurl: 'upload.php',type: 'POST',// Form datadata: new FormData($('form')[0]),// Tell jQuery not to process data or worry about content-type// You *must* include these options!cache: false,contentType: false,processData: false,// Custom XMLHttpRequestxhr: function () {var myXhr = $.ajaxSettings.xhr();if (myXhr.upload) {// For handling the progress of the uploadmyXhr.upload.addEventListener('progress', function (e) {if (e.lengthComputable) {$('progress').attr({value: e.loaded,max: e.total,});}}, false);}return myXhr;}}); });

如您所見(jiàn)，使用 HTML5（和一些研究）文件上傳不僅變得可能而且超級(jí)容易。嘗試使用 Google Chrome，因?yàn)槭纠哪承?HTML5 組件并非在所有瀏覽器中都可用。

我有文件部分工作......但你可以在其中包含文本字段嗎？這似乎與 var formData = new FormData($('form')[0]); 或 serialize() 無(wú)關(guān)？

然后我可以在upload.php 中使用$_FILES 嗎？

這應(yīng)該可以在 Internet Explorer 中使用，但只能在版本 10 中使用。(caniuse.com/xhr2)

嗨，我很欣賞 PHP 是您選擇的語(yǔ)言...但我想知道您是否知道這是否也適用于 ASP.NET MVC？我是一名 .NET 開(kāi)發(fā)人員，我嘗試?yán)媚暮?jiǎn)單示例進(jìn)行一些 AJAX 文件上傳，但服務(wù)器端我沒(méi)有獲得通過(guò) AJAX 發(fā)布的文件。我正在使用最新的 Chrome。

FormData 在這里施展了所有魔法。請(qǐng)務(wù)必查看這些文檔——它涵蓋了您關(guān)于多個(gè)文件和字段的所有問(wèn)題。

答2:

huntsbot.com – 高效賺錢，自由工作

2019 年更新：這仍然取決于您的人口統(tǒng)計(jì)使用的瀏覽器。

了解“新”HTML5 file API 的重要一點(diǎn)是它wasn’t supported until IE?10。如果您瞄準(zhǔn)的特定市場(chǎng)對(duì)舊版本 Windows 的傾向高于平均水平，您可能無(wú)法訪問(wèn)它。

截至 2017 年，大約 5% 的瀏覽器是 IE 6、7、8 或 9 之一。如果你進(jìn)入一家大公司（例如，這是一個(gè) B2B 工具或你提供的培訓(xùn)工具），這個(gè)數(shù)字可能會(huì)飆升。 2016 年，我與一家公司打交道，他們 60% 以上的機(jī)器都使用 IE8。

到本次編輯時(shí)是 2019 年，距離我最初的回答已經(jīng)過(guò)去了將近 11 年。 IE9 及更低版本的全球使用率在 1% 左右，但仍有較高使用率的集群。

從中獲得的重要收獲（無(wú)論功能如何）是，檢查您的用戶使用的瀏覽器。如果你不這樣做，你將快速而痛苦地學(xué)到為什么“為我工作”在交付給客戶時(shí)不夠好。 caniuse 是一個(gè)有用的工具，但請(qǐng)注意他們從何處獲取人口統(tǒng)計(jì)數(shù)據(jù)。它們可能與您的不一致。這從來(lái)沒(méi)有比企業(yè)環(huán)境更真實(shí)。

我在 2008 年的回答如下。

但是，有一些可行的非 JS 文件上傳方法。您可以在頁(yè)面上創(chuàng)建一個(gè) iframe（使用 CSS 隱藏），然后將表單定位到該 iframe。主頁(yè)不需要移動(dòng)。

這是一個(gè)“真實(shí)”的帖子，所以它不是完全互動(dòng)的。如果您需要狀態(tài)，則需要在服務(wù)器端進(jìn)行處理。這取決于您的服務(wù)器。 ASP.NET 有更好的機(jī)制。 PHP plain 失敗，但您可以使用 Perl 或 Apache 修改來(lái)繞過(guò)它。

如果您需要上傳多個(gè)文件，最好一次上傳一個(gè)文件（以克服最大文件上傳限制）。將第一個(gè)表單發(fā)布到 iframe，使用上述方法監(jiān)視其進(jìn)度，完成后，將第二個(gè)表單發(fā)布到 iframe，依此類推。

或者使用 Java/Flash 解決方案。他們可以更靈活地處理他們的帖子…

作為記錄，如果瀏覽器支持 File API，現(xiàn)在可以進(jìn)行純 AJAX 文件上傳 - developer.mozilla.org/en/using_files_from_web_applications

這是一個(gè)相當(dāng)古老的答案，但它有點(diǎn)誤導(dǎo).. IE 早在 IE7 就本機(jī)支持 XHR，并且早在 IE5 就通過(guò) ActiveX 支持它。 w3schools.com/ajax/ajax_xmlhttprequest_create.asp。執(zhí)行此操作的實(shí)際方法當(dāng)然是針對(duì) Flash（沖擊波）組件，或推出 Flash/ActiveX (Silverlight) 控件。如果您可以通過(guò) javascript 發(fā)起請(qǐng)求并處理響應(yīng)，那么它就是 ajax。盡管如此，ajax 是 xhr 的同義詞，但它本身并沒(méi)有描述傳遞/交換有效負(fù)載的下劃線機(jī)制/組件。

@BrettCaswell 我并不是說(shuō) AJAX/XHR 是不可能的，只是不可能在舊的——但永遠(yuǎn)存在的——IE 版本上發(fā)布文件。那是并且仍然是完全正確的。

答3:

HuntsBot周刊–不定時(shí)分享成功產(chǎn)品案例，學(xué)習(xí)他們?nèi)绾纬晒⒆约旱母睒I(yè)–huntsbot.com

為此，我建議使用 Fine Uploader 插件。您的 JavaScript 代碼將是：

$(document).ready(function() {$("#uploadbutton").jsupload({action: "addFile.do",onComplete: function(response){alert( "server response: " + response);}}); });

“這個(gè)插件在 GNU GPL 2 或更高版本以及 GNU LGPL 2 或更高版本下開(kāi)源?！币虼?#xff0c;只要您不分發(fā)副本或修改版本，您就不必打開(kāi)您的項(xiàng)目。

如果有人試圖走這條路，FineUploader 已于 2018 年停產(chǎn)。github.com/FineUploader/fine-uploader/issues/2073

答4:

huntsbot.com高效搞錢，一站式跟進(jìn)超10+任務(wù)平臺(tái)外包需求

注意：此答案已過(guò)時(shí)，現(xiàn)在可以使用 XHR 上傳文件。

您無(wú)法使用 XMLHttpRequest (Ajax) 上傳文件。您可以使用 iframe 或 Flash 模擬效果。優(yōu)秀的 jQuery Form Plugin 通過(guò) iframe 發(fā)布您的文件以獲得效果。

小備注：在最新版本的 chrome 和 firefox 中是可能的，stackoverflow.com/questions/4856917/…

答5:

打造屬于自己的副業(yè)，開(kāi)啟自由職業(yè)之旅，從huntsbot.com開(kāi)始!

為未來(lái)的讀者總結(jié)。

異步文件上傳

使用 HTML5

如果支持 FormData 和 File API（兩種 HTML5 功能），您可以使用 $.ajax() 方法使用 jQuery 上傳文件。

您也可以發(fā)送文件 without FormData，但無(wú)論哪種方式，文件 API 都必須存在以處理文件，以便它們可以通過(guò) XMLHttpRequest (Ajax) 發(fā)送。

$.ajax({url: 'file/destination.html', type: 'POST',data: new FormData($('#formWithFiles')[0]), // The form with the file inputs.processData: false,contentType: false // Using FormData, no need to process data. }).done(function(){console.log("Success: Files sent!"); }).fail(function(){console.log("An error occurred, the files couldn't be sent!"); });

如需快速、純 JavaScript（無(wú) jQuery）示例，請(qǐng)參閱“Sending files using a FormData object”。

倒退

當(dāng)不支持 HTML5（無(wú) File API）時(shí)，唯一的其他純 JavaScript 解決方案（無(wú) Flash 或任何其他瀏覽器插件）是隱藏 iframe 技術(shù)，它允許在不使用 XMLHttpRequest 對(duì)象的情況下模擬異步請(qǐng)求。

它包括使用文件輸入將 iframe 設(shè)置為表單的目標(biāo)。當(dāng)用戶提交請(qǐng)求并上傳文件時(shí)，響應(yīng)顯示在 iframe 內(nèi)，而不是重新呈現(xiàn)主頁(yè)。隱藏 iframe 使整個(gè)過(guò)程對(duì)用戶透明并模擬異步請(qǐng)求。

如果處理得當(dāng)，它幾乎可以在任何瀏覽器上運(yùn)行，但它有一些關(guān)于如何從 iframe 獲取響應(yīng)的警告。

在這種情況下，您可能更喜歡使用像 Bifr?st 這樣的包裝插件，它使用 iframe 技術(shù)，但還提供了一個(gè) jQuery Ajax transport，允許僅使用 $.ajax()send files像這樣的方法：

$.ajax({url: 'file/destination.html', type: 'POST',// Set the transport to use (iframe means to use Bifr?st)// and the expected data type (json in this case).dataType: 'iframe json', fileInputs: $('input[type="file"]'), // The file inputs containing the files to send.data: { msg: 'Some extra data you might need.'} }).done(function(){console.log("Success: Files sent!"); }).fail(function(){console.log("An error occurred, the files couldn't be sent!"); });

插件

Bifr?st 只是一個(gè)小型包裝器，它為 jQuery 的 ajax 方法添加了回退支持，但許多上述插件（如 jQuery Form Plugin 或 jQuery File Upload）包含從 HTML5 到不同回退的整個(gè)堆棧以及一些有用的功能來(lái)簡(jiǎn)化流程。根據(jù)您的需要和要求，您可能需要考慮裸實(shí)現(xiàn)或其中任何一個(gè)插件。

Bifrost 甚至不附加 POST 數(shù)據(jù)……強(qiáng)烈不推薦這個(gè)，粗略的插件，浪費(fèi)時(shí)間。

答6:

huntsbot.com – 程序員副業(yè)首選，一站式外包任務(wù)、遠(yuǎn)程工作、創(chuàng)意產(chǎn)品分享訂閱平臺(tái)。

此 AJAX file upload jQuery plugin 上傳文件，并將響應(yīng)傳遞給回調(diào)，僅此而已。

它不依賴于特定的 HTML，只需給它一個(gè)

它不需要您的服務(wù)器以任何特定方式響應(yīng)

使用多少文件或它們?cè)陧?yè)面上的位置都沒(méi)有關(guān)系

– 少用 –

$('#one-specific-file').ajaxfileupload({'action': '/upload.php' });

——或多于——

$('input[type="file"]').ajaxfileupload({'action': '/upload.php','params': {'extra': 'info'},'onComplete': function(response) {console.log('custom handler for file:');alert(JSON.stringify(response));},'onStart': function() {if(weWantedTo) return false; // cancels upload},'onCancel': function() {console.log('no file selected');} });

答7:

huntsbot.com聚合了超過(guò)10+全球外包任務(wù)平臺(tái)的外包需求，尋找外包任務(wù)與機(jī)會(huì)變的簡(jiǎn)單與高效。

我一直在使用下面的腳本來(lái)上傳恰好可以正常工作的圖像。

HTML

JavaScript

jQuery('document').ready(function(){var input = document.getElementById("file");var formdata = false;if (window.FormData) {formdata = new FormData();}input.addEventListener("change", function (evt) {var i = 0, len = this.files.length, img, reader, file;for ( ; i < len; i++ ) {file = this.files[i];if (!!file.type.match(/image.*/)) {if ( window.FileReader ) {reader = new FileReader();reader.onloadend = function (e) {//showUploadedItem(e.target.result, file.fileName);};reader.readAsDataURL(file);}if (formdata) {formdata.append("image", file);formdata.append("extra",'extra-data');}if (formdata) {jQuery('div#response').html('');jQuery.ajax({url: "upload.php",type: "POST",data: formdata,processData: false,contentType: false,success: function (res) {jQuery('div#response').html("Successfully uploaded");}});}}else{alert('Not a vaild image!');}}}, false); });

解釋

我使用響應(yīng) div 來(lái)顯示上傳動(dòng)畫和上傳完成后的響應(yīng)。

最好的部分是您可以發(fā)送額外的數(shù)據(jù)，例如 ids &等使用此腳本時(shí)的文件。我在腳本中提到了它extra-data。

在 PHP 級(jí)別，這將像正常的文件上傳一樣工作。額外數(shù)據(jù)可以作為 $_POST 數(shù)據(jù)檢索。

在這里，您沒(méi)有使用插件和東西。您可以根據(jù)需要更改代碼。您不是在這里盲目編碼。這是任何 jQuery 文件上傳的核心功能。實(shí)際上是Javascript。

答8:

huntsbot.com聚合了超過(guò)10+全球外包任務(wù)平臺(tái)的外包需求，尋找外包任務(wù)與機(jī)會(huì)變的簡(jiǎn)單與高效。

你可以很容易地在 vanilla JavaScript 中做到這一點(diǎn)。這是我當(dāng)前項(xiàng)目的一個(gè)片段：

var xhr = new XMLHttpRequest(); xhr.upload.onprogress = function(e) {var percent = (e.position/ e.totalSize);// Render a pretty progress bar }; xhr.onreadystatechange = function(e) {if(this.readyState === 4) {// Handle file upload complete} }; xhr.open('POST', '/upload', true); xhr.setRequestHeader('X-FileName',file.name); // Pass the filename along xhr.send(file);

答9:

huntsbot.com – 程序員副業(yè)首選，一站式外包任務(wù)、遠(yuǎn)程工作、創(chuàng)意產(chǎn)品分享訂閱平臺(tái)。

您可以簡(jiǎn)單地使用 jQuery .ajax() 上傳。

HTML：

File:

CSS

.progress { display: none; }

Javascript：

$(document).ready(function(ev) {$("#upload-form").on('submit', (function(ev) {ev.preventDefault();$.ajax({xhr: function() {var progress = $('.progress'),xhr = $.ajaxSettings.xhr();progress.show();xhr.upload.onprogress = function(ev) {if (ev.lengthComputable) {var percentComplete = parseInt((ev.loaded / ev.total) * 100);progress.val(percentComplete);if (percentComplete === 100) {progress.hide().val(0);}}};return xhr;},url: 'upload.php',type: 'POST',data: new FormData(this),contentType: false,cache: false,processData: false,success: function(data, status, xhr) {// ...},error: function(xhr, status, error) {// ...}});})); });

進(jìn)展很好;-)

答10:

HuntsBot周刊–不定時(shí)分享成功產(chǎn)品案例，學(xué)習(xí)他們?nèi)绾纬晒⒆约旱母睒I(yè)–huntsbot.com

我過(guò)去做過(guò)的最簡(jiǎn)單和最可靠的方法是簡(jiǎn)單地將隱藏的 iFrame 標(biāo)記與您的表單一起定位 - 然后它將在 iframe 內(nèi)提交而無(wú)需重新加載頁(yè)面。

也就是說(shuō)，如果您不想使用插件、JavaScript 或 HTML 以外的任何其他形式的“魔法”。當(dāng)然，你可以將它與 JavaScript 或你有什么結(jié)合起來(lái)…

您還可以讀取 iframe onLoad 的內(nèi)容以了解服務(wù)器錯(cuò)誤或成功響應(yīng)，然后將其輸出給用戶。

Chrome、iFrame 和 onLoad

-注意-如果您對(duì)如何在上傳/下載時(shí)設(shè)置 UI 阻止程序感興趣，您只需要繼續(xù)閱讀

目前，Chrome 在用于傳輸文件時(shí)不會(huì)觸發(fā) iframe 的 onLoad 事件。 Firefox、IE 和 Edge 都會(huì)觸發(fā)文件傳輸?shù)?onload 事件。

我發(fā)現(xiàn)適用于 Chrome 的唯一解決方案是使用 cookie。

基本上在開(kāi)始上傳/下載時(shí)做到這一點(diǎn)：

[Client Side] 啟動(dòng)一個(gè)間隔來(lái)尋找cookie的存在

[服務(wù)器端] 對(duì)文件數(shù)據(jù)做任何你想做的事

[服務(wù)器端] 為客戶端間隔設(shè)置 cookie

[客戶端] Interval 看到 cookie 并像 onLoad 事件一樣使用它。例如，您可以啟動(dòng) UI 阻止程序，然后 onLoad（或在制作 cookie 時(shí)）刪除 UI 阻止程序。

為此使用 cookie 很難看，但它確實(shí)有效。

我在下載時(shí)為 Chrome 制作了一個(gè) jQuery 插件來(lái)處理這個(gè)問(wèn)題，你可以在這里找到

https://github.com/ArtisticPhoenix/jQuery-Plugins/blob/master/iDownloader.js

同樣的基本原則也適用于上傳。

使用下載器（顯然包括 JS）

$('body').iDownloader({"onComplete" : function(){$('#uiBlocker').css('display', 'none'); //hide ui blocker on complete}});$('somebuttion').click( function(){$('#uiBlocker').css('display', 'block'); //block the UI$('body').iDownloader('download', 'htttp://example.com/location/of/download');});

在服務(wù)器端，就在傳輸文件數(shù)據(jù)之前，創(chuàng)建 cookie

setcookie('iDownloader', true, time() + 30, "/");

插件將看到 cookie，然后觸發(fā) onComplete 回調(diào)。

答11:

huntsbot.com高效搞錢，一站式跟進(jìn)超10+任務(wù)平臺(tái)外包需求

I’ve written this up in a Rails environment。如果你使用輕量級(jí)的 jQuery-form 插件，它只有大約五行 JavaScript。

挑戰(zhàn)在于讓 AJAX 上傳工作，因?yàn)闃?biāo)準(zhǔn) remote_form_for 不理解多部分表單提交。它不會(huì)發(fā)送 Rails 通過(guò) AJAX 請(qǐng)求返回的文件數(shù)據(jù)。

這就是 jQuery-form 插件發(fā)揮作用的地方。

這是它的 Rails 代碼：

<% remote_form_for(:image_form, :url => { :controller => "blogs", :action => :create_asset }, :html => { :method => :post, :id => 'uploadForm', :multipart => true }) do |f| %>Upload a file: <%= f.file_field :uploaded_data %> <% end %>

這是相關(guān)的 JavaScript：

$('#uploadForm input').change(function(){$(this).parent().ajaxSubmit({beforeSubmit: function(a,f,o) {o.dataType = 'json';},complete: function(XMLHttpRequest, textStatus) {// XMLHttpRequest.responseText will contain the URL of the uploaded image.// Put it in an image element you create, or do with it what you will.// For example, if you have an image elemtn with id "my_image", then// $('#my_image').attr('src', XMLHttpRequest.responseText);// Will set that image tag to display the uploaded image.},}); });

這是 Rails 控制器動(dòng)作，非常普通：

@image = Image.new(params[:image_form])@image.saverender :text => @image.public_filename

在過(guò)去的幾周里，我一直在用 Bloggity 使用它，它的工作就像一個(gè)冠軍。

原文鏈接：https://www.huntsbot.com/qa/xMlx/how-can-i-upload-files-asynchronously-with-jquery?lang=zh_CN&from=csdn

huntsbot.com高效搞錢，一站式跟進(jìn)超10+任務(wù)平臺(tái)外包需求

總結(jié)

以上是生活随笔為你收集整理的如何使用 jQuery 异步上传文件？的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。