Wie kann ich Dateien asynchron hochladen?

Ich möchte eine Datei asynchron mit jQuery hochladen. Das ist mein HTML:

 <span>File</span> <input type="file" id="file" name="file" size="10"/> <input id="uploadbutton" type="button" value="Upload"/> 

Und hier ist mein Jquery Code:

 $(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: "); } }); }); }); 

Anstelle der hochgeladenen Datei bekomme ich nur den Dateinamen. Was kann ich tun, um dieses Problem zu beheben?

Aktuelle Lösung

Ich benutze das jQuery Form Plugin , um Dateien hochzuladen.

2695
03 окт. eingestellt von Sergio del Amo 03 Okt. 2008-10-03 13:22 08 um 13:22 Uhr 2008-10-03 13:22
@ 33 Antworten
  • 1
  • 2

Mit HTML5 können Sie Dateien mit Ajax und jQuery hochladen. Außerdem können Sie Dateiprüfungen (Name, Größe und MIME-Typ) durchführen oder ein Fortschrittsereignis mit einem HTML5- (oder Div-) Progress-Tag behandeln. Ich musste vor kurzem einen Dateiuploader erstellen, wollte aber kein Flash, kein iframe oder Plugins verwenden, und nach einiger Recherche habe ich eine Lösung gefunden.

HTML:

 <form enctype="multipart/form-data"> <input name="file" type="file" /> <input type="button" value="Upload" /> </form> <progress></progress> 

Erstens können Sie einige Überprüfungen durchführen, wenn Sie möchten. Zum Beispiel im Datei-Ereignis onChange:

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

Jetzt mit Ajax-Button absenden:

 $(':button').on('click', function() { $.ajax({ // Your server script to process the upload url: 'upload.php', type: 'POST', // Form data data: 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 XMLHttpRequest xhr: function() { var myXhr = $.ajaxSettings.xhr(); if (myXhr.upload) { // For handling the progress of the upload myXhr.upload.addEventListener('progress', function(e) { if (e.lengthComputable) { $('progress').attr({ value: e.loaded, max: e.total, }); } } , false); } return myXhr; } }); }); 

Wie Sie sehen, ist das Hochladen von Dateien mit HTML5 (und einigen Recherchen) nicht nur möglich, sondern auch sehr einfach. Probieren Sie Google Chrome aus, da einige der HTML5-Komponenten in den Beispielen nicht in jedem Browser verfügbar sind.

2393
06 янв. Die Antwort wird am 06. Januar gegeben 2012-01-06 16:34 '12 um 16:34 Uhr 2012-01-06 16:34

Es gibt verschiedene vorgefertigte Plugins zum Herunterladen von jQuery-Dateien.

Das Ausführen dieser Art von Boot-Hacks ist keine angenehme Erfahrung, weshalb die Leute gerne fertige Lösungen verwenden.

Hier einige davon:

border=0

Sie können auf NPM nach weiteren Projekten (mit dem Stichwort "jquery-plugin") oder mit Github suchen.

336
15 окт. Die Antwort wird 15 Uhr fröhlich gegeben. 2008-10-15 13:35 08 um 13:35 2008-10-15 13:35

Update 2017: Es hängt immer noch von den Browsern ab, die Ihre Demografien verwenden.

Für die Verwendung der neuen HTML5- file API ist es wichtig zu verstehen, dass sie vor dem IE 10 nicht unterstützt wurde . Wenn der spezifische Markt, auf den Sie abzielen, eine höhere Priorität als ältere Versionen von Windows hat, haben Sie möglicherweise keinen Zugriff darauf.

Seit 2017 sind 5% der Browser IE 6, 7, 8 oder 9. Wenn Sie zu einem großen Unternehmen gehen (z. B. handelt es sich um ein B2B-Tool oder etwas, das Sie für Schulungen bereitstellen), kann diese Zahl eine Rakete sein. Vor wenigen Monaten - im Jahr 2016 - hatte ich mit einem Unternehmen zu tun, das IE8 für mehr als 60% seiner Maschinen verwendet.

Bevor Sie also etwas tun, überprüfen Sie, ob der Browser von Ihrem Benutzer verwendet wird . Wenn Sie dies nicht tun, werden Sie eine schnelle und schmerzhafte Lektion lernen, warum "Arbeiten für mich" nicht gut genug ist, um an einen Kunden geliefert zu werden.

Darauf folgt meine Antwort von 2008.


Es gibt jedoch praktikable Nicht-JS-Datei-Upload-Methoden. Sie können einen iframe auf einer Seite erstellen (die Sie mit CSS ausblenden), und dann Ihr Formular für die Veröffentlichung in einem iframe anvisieren. Auf der Hauptseite müssen Sie sich nicht bewegen.

Dies ist ein "echter" Beitrag, so dass er nicht vollständig interaktiv ist. Wenn Sie Status benötigen, benötigen Sie einen Server, um damit umzugehen. Das hängt von Ihrem Server ab. ASP.NET verfügt über bequemere Mechanismen. PHP plain funktioniert nicht, aber Sie können Perl- oder Apache-Modifikationen verwenden, um dies zu umgehen.

Wenn Sie mehrere Dateien herunterladen möchten, führen Sie am besten jede Datei einzeln aus (um die maximalen Downloadlimits zu überwinden). Senden Sie das erste Formular an den iframe, verfolgen Sie den Fortschritt, verwenden Sie das Obige und platzieren Sie das zweite Formular in das iframe usw., wenn Sie fertig sind.

Oder verwenden Sie eine Java / Flash-Lösung. Sie sind viel flexibler, was sie mit ihren Nachrichten machen können ...

246
03 окт. Die Antwort ist Oli 03 Oct. 2008-10-03 13:41 08 um 13:41 2008-10-03 13:41

Zu diesem Zweck empfehle ich die Verwendung des Fine Uploader- Plugins. Ihr JavaScript Code JavaScript :

 $(document).ready(function() { $("#uploadbutton").jsupload({ action: "addFile.do", onComplete: function(response){ alert( "server response: " + response); } }); }); 
108
21 нояб. die antwort ist gegeben pixxaar 21 nov. 2008-11-21 19:38 08 um 19:38 Uhr 2008-11-21 19:38

Hinweis Diese Antwort ist veraltet. Sie können jetzt Dateien mit XHR hochladen.


Sie können keine Dateien mit XMLHttpRequest (Ajax) hochladen. Sie können den Effekt mit iframe oder Flash simulieren. Ein großartiges jQuery-Formular-Plugin , das Ihre Dateien über einen Iframe sendet, um den Effekt zu erzielen.

92
03 окт. Antwort von Mattias am 3. Oktober 2008-10-03 13:36 08 um 13:36 Uhr 2008-10-03 13:36

Diese AJAX-Datei, die das jQuery-Plugin lädt, lädt die Datei und sendet die Antwort an den Rückruf.

  • Dies ist unabhängig von dem spezifischen HTML-Code. Geben Sie einfach <input type="file">
  • Dies erfordert nicht, dass Ihr Server auf eine bestimmte Weise reagiert.
  • Es spielt keine Rolle, wie viele Dateien Sie verwenden oder wo sie sich auf der Seite befinden.

- Nur verwenden

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

- oder so viel wie -

 $('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'); } }); 
83
29 июля '11 в 3:34 2011-07-29 03:34 Die Antwort gibt Jordan Feldstein am 29. Juli um 3:34 Uhr. 2011-07-29 03:34

Zusammenfassung für zukünftige Leser.

Asynchrone Datei herunterladen

Aus HTML5

Sie können Dateien mit jQuery mit der $.ajax() Methode hochladen, wenn FormData und die Datei-API unterstützt werden (beide HTML5-Eigenschaften).

Sie können Dateien auch ohne FormData senden. In jedem Fall muss jedoch die Datei-API vorhanden sein, damit die Dateien verarbeitet werden können, damit sie mit XMLHttpRequest (Ajax) gesendet werden können.

 $.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!"); }); 

Ein schnelles, sauberes JavaScript-Beispiel ( ohne jQuery ) finden Sie unter " Senden von Dateien mithilfe des FormData-Objekts ".

Rückzug

Wenn HTML5 nicht unterstützt wird (keine Datei-API), ist die einzige saubere JavaScript-Lösung (ohne Flash oder ein anderes Browser-Plugin) die verborgene Iframe- Technik, mit der Sie eine asynchrone Anforderung ohne Verwendung des XMLHttpRequest-Objekts emulieren können.

Es besteht darin, einen iframe als Ziel eines Formulars mit Eingabedateien festzulegen. Wenn ein Benutzer eine Anforderung sendet und die Dateien geladen werden, wird die Antwort jedoch im iframe angezeigt, anstatt die Hauptseite erneut zu rendern. Das Ausblenden eines iframes macht den gesamten Prozess für den Benutzer transparent und emuliert eine asynchrone Anforderung.

Wenn es richtig gemacht wird, sollte es in fast jedem Browser funktionieren, es gibt jedoch einige Warnungen, wie Sie eine Antwort vom iframe erhalten.

In diesem Fall empfiehlt es sich, ein Shell-Plugin wie Bifröst zu verwenden, das die iframe-Technik verwendet, aber auch den jQuery-Ajax-Transport bietet , mit dem Sie Dateien nur mit $.ajax() senden können :

 $.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!"); }); 

Plugins

Bifröst ist nur eine kleine Shell, die Unterstützung für die jQuery-Methode ajax bietet. Viele der oben genannten Plugins, wie z. B. das jQuery Form Plugin oder jQuery File Upload, enthalten jedoch den gesamten HTML5-Stack in verschiedenen Sicherungen und einige nützliche Funktionen, die den Prozess vereinfachen. Abhängig von Ihren Anforderungen und Anforderungen können Sie die reine Version der Implementierung oder eines dieser Plug-Ins berücksichtigen.

82
25 авг. Die Antwort ist 404 25 aug. 2014-08-25 17:17 14 um 17:17 Uhr 2014-08-25 17:17

Ich habe das folgende Skript verwendet, um gut funktionierende Bilder hochzuladen.

HTML

 <input id="file" type="file" name="file"/> <div id="response"></div> 

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('<br /><img src="ajax-loader.gif"/>'); 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); }); 

Erklärung

Ich verwende die Antwort div , um das Laden der Animation und die Antwort nach dem Download anzuzeigen.

Das Beste ist, Sie können mit der Datei mithilfe dieses Skripts zusätzliche Daten wie Kennungen usw. senden. Ich habe die extra-data , wie im Skript.

Auf der PHP-Ebene funktioniert dies wie ein regulärer Dateidownload. Zusätzliche Daten können als $_POST Daten $_POST werden.

Hier benutzen Sie das Plugin nicht und so weiter. Sie können den Code beliebig ändern. Hier codiert man nicht blind. Dies ist die Hauptfunktion für das Herunterladen von jQuery-Dateien. Eigentlich Javascript.

59
25 янв. Antwort von Techie 25. Januar 2013-01-25 14:03 13 am 14:03 2013-01-25 14:03

Ich habe mehrere wirklich leistungsfähige jQuery-Dateien zum Herunterladen von Dateien gefunden. Überprüfen Sie sie heraus:

55
08 апр. Die Antwort ist Hristo 08 April gegeben. 2011-04-08 19:43 '11 am 19:43 2011-04-08 19:43

Sie können dies leicht in Vanilla Javascript tun. Hier ist ein Ausschnitt meines aktuellen Projekts:

 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); 
43
17 февр. die antwort wird mpen 17 feb gegeben . 2013-02-17 12:34 '13 um 12:34 Uhr 2013-02-17 12:34

Sie können es einfach mit jQuery .ajax() .

HTML:

 .progress { display: none; } 

Javascript:

43
08 авг. die antwort wird von Zayn Ali 08 aug gegeben. 2014-08-08 05:59 '14 um 05:59 2014-08-08 05:59

Der einfachste und zuverlässigste Weg, den ich in der Vergangenheit gemacht habe, ist, das versteckte iFrame-Tag einfach auf Ihr Formular auszurichten. Dann wird es an den iframe gesendet, ohne die Seite erneut zu laden.

Das heißt, wenn Sie kein Plugin, Javascript oder eine andere Form von "Magie" außer HTML verwenden möchten. Natürlich können Sie dies mit Javascript oder was auch immer Sie ...

 <form target="iframe" action="" method="post" enctype="multipart/form-data"> <input name="file" type="file" /> <input type="button" value="Upload" /> </form> <iframe name="iframe" id="iframe" style="display:none" ></iframe> 

Sie können den iframe onLoad Inhalt auch auf onLoad oder Erfolgsantworten lesen und sie dem Benutzer anzeigen.

Chrome, iFrames und onLoad

-note - Sie müssen nur lesen, wenn Sie sich fragen, wie Sie beim Laden / Laden eine Benutzeroberflächensperre einrichten können

Chrome löst derzeit kein onLoad-Ereignis für einen Iframe aus, wenn dieser zum Übertragen von Dateien verwendet wurde. Firefox, IE und Edge lösen das Onload-Ereignis aus, um Dateien zu übertragen.

Die einzige Lösung, die ich für Chrome gefunden habe, ist die Verwendung eines Cookies.

Hierfür hauptsächlich beim Laden / Herunterladen:

  • [Clientseite] Startet das Cookie-Suchintervall
  • [Serverseite] Machen Sie alles, was Sie mit Dateidaten benötigen
  • [Serverseite] Cookie für das Clientintervall einstellen
  • [Client-Seite] Das Intervall sieht das Cookie und verwendet es als OnLoad-Ereignis. Sie können beispielsweise einen Benutzeroberflächenblocker starten, und onLoad (oder wenn der Cookie abgeschlossen ist) entfernen Sie den Benutzeroberflächenblocker.

Ein Cookie dafür zu verwenden ist hässlich, aber es funktioniert.

Ich habe ein jQuery-Plugin erstellt, um dieses Problem beim Laden von Chrome zu beheben. Sie finden es hier

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

Das gleiche Prinzip gilt für den Download.

So verwenden Sie den Bootloader (natürlich einschließlich 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'); }); 

Erstellen Sie auf der Serverseite vor dem Übergeben der Dateidaten ein Cookie

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

Das Plugin wird den Cookie sehen und dann den onComplete Callback aktivieren.

39
26 июня '14 в 7:43 2014-06-26 07:43 Die Antwort wird ArtisticPhoenix am 26. Juni 14 um 7:43 2014-06-26 07:43 gegeben

Die Lösung, die ich fand, war, dass das Ziel von <form> der verborgene iFrame war. Dann kann iFrame JS ausführen, um es dem Benutzer anzuzeigen, der es abgeschlossen hat (wenn die Seite geladen wird).

32
18 окт. Antwort von Darryl Hein 18. Oktober. 2008-10-18 22:30 08 um 22:30 Uhr 2008-10-18 22:30 Uhr

Ich habe dies in einer Rails-Umgebung geschrieben . Dies sind nur fünf Zeilen Javascript, wenn Sie das jQuery-Formular-Plugin verwenden.

Die Herausforderung besteht darin, dass das Laden von AJAX funktioniert, da der Standard " remote_form_for die Mehrkomponentenform der Ansicht nicht versteht. Er wird keine Dateidaten senden. Rails sucht nach einer AJAX-Anfrage.

Das, was das jQuery-Formular-Plugin beinhaltet.

Heres Rails-Code dafür:

 <% 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 %> 

Hier ist das entsprechende 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. }, }); }); 

Und hier ist die Aktion des Rails-Controllers, hübsche Vanille:

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

Ich habe es in den letzten Wochen mit Bloggity verwendet und er arbeitete wie ein Champion.

31
14 авг. Die Antwort wird mit 14 Aug. gegeben . 2009-08-14 01:44 09 um 01:44 2009-08-14 01:44

Einfaches Laden von Ajax ist eine weitere Option:

https://github.com/LPology/Simple-Ajax-Uploader

  • Browserübergreifend - funktioniert in IE7 +, Firefox, Chrome, Safari, Opera
  • Unterstützung für mehrere gleichzeitige Downloads - auch in Nicht-HTML5-Browsern
  • Kein Flash oder externes CSS - nur eine Javascript-Datei 5Kb
  • Zusätzliche integrierte Unterstützung für Full-Pass-Bars (mit der PHP-APC-Erweiterung)
  • Flexibel und anpassbar - Verwenden Sie ein beliebiges Element als Download-Button, erstellen Sie eigene Fortschrittsanzeigen.
  • Es ist kein Formular erforderlich. Geben Sie einfach das Element an, das als Download-Schaltfläche verwendet werden soll.
  • MIT-Lizenz - Kostenlose Nutzung in einem kommerziellen Projekt

Anwendungsbeispiel:

30
26 июня '13 в 4:12 2013-06-26 04:12 Die Antwort wird von user1091949 26. Juni 13 um 04:12 2013-06-26 04:12 gegeben

jQuery Uploadify ist ein weiteres gutes Plugin, das ich früher zum Hochladen von Dateien verwendet habe. JavaScript-Code ist einfach, wie unten gezeigt: Code. Die neue Version funktioniert jedoch nicht in Internet Explorer.

 $('#file_upload').uploadify({ 'swf': '/public/js/uploadify.swf', 'uploader': '/Upload.ashx?formGuid=' + $('#formGuid').val(), 'cancelImg': '/public/images/uploadify-cancel.png', 'multi': true, 'onQueueComplete': function (queueData) { // ... }, 'onUploadStart': function (file) { // ... } }); 

Ich habe viel gesucht und bin zu einer anderen Lösung für das Hochladen von Dateien ohne Plugin und nur mit Ajax gekommen. Die Lösung lautet wie folgt:

 $(document).ready(function () { $('#btn_Upload').live('click', AjaxFileUpload); }); function AjaxFileUpload() { var fileInput = document.getElementById("#Uploader"); var file = fileInput.files[0]; var fd = new FormData(); fd.append("files", file); var xhr = new XMLHttpRequest(); xhr.open("POST", 'Uploader.ashx'); xhr.onreadystatechange = function () { if (xhr.readyState == 4) { alert('success'); } else if (uploadResult == 'success') alert('error'); }; xhr.send(fd); } 
22
16 июня '13 в 12:49 2013-06-16 12:49 Die Antwort wird von Farnoush Resa 16. Juni 13 um 12:49 Uhr 2013-06-16 12:49 gegeben

Dies ist nur eine weitere Lösung, wie Sie eine Datei hochladen können ( ohne Plug-In ).

Verwenden von Simple Javascripts und AJAX (mit Fortschrittsbalken)

Teil von HTML

 <form id="upload_form" enctype="multipart/form-data" method="post"> <input type="file" name="file1" id="file1"><br> <input type="button" value="Upload File" onclick="uploadFile()"> <progress id="progressBar" value="0" max="100" style="width:300px;"></progress> <h3 id="status"></h3> <p id="loaded_n_total"></p> </form> 

Js Teil

 function _(el){ return document.getElementById(el); } function uploadFile(){ var file = _("file1").files[0]; // alert(file.name+" | "+file.size+" | "+file.type); var formdata = new FormData(); formdata.append("file1", file); var ajax = new XMLHttpRequest(); ajax.upload.addEventListener("progress", progressHandler, false); ajax.addEventListener("load", completeHandler, false); ajax.addEventListener("error", errorHandler, false); ajax.addEventListener("abort", abortHandler, false); ajax.open("POST", "file_upload_parser.php"); ajax.send(formdata); } function progressHandler(event){ _("loaded_n_total").innerHTML = "Uploaded "+event.loaded+" bytes of "+event.total; var percent = (event.loaded / event.total) * 100; _("progressBar").value = Math.round(percent); _("status").innerHTML = Math.round(percent)+"% uploaded... please wait"; } function completeHandler(event){ _("status").innerHTML = event.target.responseText; _("progressBar").value = 0; } function errorHandler(event){ _("status").innerHTML = "Upload Failed"; } function abortHandler(event){ _("status").innerHTML = "Upload Aborted"; } 

PHP-Teil

 <?php $fileName = $_FILES["file1"]["name"]; // The file name $fileTmpLoc = $_FILES["file1"]["tmp_name"]; // File in the PHP tmp folder $fileType = $_FILES["file1"]["type"]; // The type of file it is $fileSize = $_FILES["file1"]["size"]; // File size in bytes $fileErrorMsg = $_FILES["file1"]["error"]; // 0 for false... and 1 for true if (!$fileTmpLoc) { // if file not chosen echo "ERROR: Please browse for a file before clicking the upload button."; exit(); } if(move_uploaded_file($fileTmpLoc, "test_uploads/$fileName")){ // assuming the directory name 'test_uploads' echo "$fileName upload is complete"; } else { echo "move_uploaded_file function failed"; } ?> 

Hier ist die Anwendung BEISPIEL

21
30 марта '16 в 19:48 2016-03-30 19:48 Die Antwort wird Siddhartha Chowdhury am 30. März '16 um 19:48 Uhr 2016-03-30 19:48 gegeben
 var formData=new FormData(); formData.append("fieldname","value"); formData.append("image",$('[name="filename"]')[0].files[0]); $.ajax({ url:"page.php", data:formData, type: 'POST', dataType:"JSON", cache: false, contentType: false, processData: false, success:function(data){ } }); 

Sie können Formulardaten verwenden, um alle Ihre Werte, einschließlich Bilder, zu veröffentlichen.

15
28 июля '15 в 16:39 2015-07-28 16:39 Die Antwort wird von Vivek Aasaithambi am 28. Juli 15 um 16:39 Uhr 2015-07-28 16:39 gegeben

Gehen Sie folgendermaßen vor, um eine Datei asynchron mit jQuery herunterzuladen:

Schritt 1 Öffnen Sie in Ihrem Projekt den Nuget-Manager und fügen Sie das Paket hinzu (jquery fileupload (Sie müssen es nur in das Suchfeld schreiben, es wird angezeigt und installiert.)) URL: https://github.com/blueimp/jQuery-File-Upload

Schritt 2 Fügen Sie den HTML-Dateien, die bereits zum Projekt hinzugefügt wurden, die folgenden Skripts hinzu, indem Sie sie für das Paket ausführen:

jquery.ui.widget.js

jquery.iframe-transport.js

jquery.fileupload.js

Schritt 3 Zeichnen Sie die Dateidownload-Steuerung wie im folgenden Code gezeigt auf:

 <input id="upload" name="upload" type="file" /> 

Schritt 4 Schreiben Sie die js-Methode wie folgt als uploadFile:

  function uploadFile(element) { $(element).fileupload({ dataType: 'json', url: '../DocumentUpload/upload', autoUpload: true, add: function (e, data) { // write code for implementing, while selecting a file. // data represents the file data. //below code triggers the action in mvc controller data.formData = { files: data.files[0] }; data.submit(); }, done: function (e, data) { // after file uploaded }, progress: function (e, data) { // progress }, fail: function (e, data) { //fail operation }, stop: function () { code for cancel operation } }); }; 

Schritt 5 Gehen Sie nach dem Laden der Aufrufdatei des Funktionsaufrufs wie folgt vor, um den Prozess zu starten:

 $(document).ready(function() { uploadFile($('#upload')); }); 

Шаг 6 Запишите MVC-контроллер и действие, как показано ниже:

 public class DocumentUploadController : Controller { [System.Web.Mvc.HttpPost] public JsonResult upload(ICollection<HttpPostedFileBase> files) { bool result = false; if (files != null || files.Count > 0) { try { foreach (HttpPostedFileBase file in files) { if (file.ContentLength == 0) throw new Exception("Zero length file!"); else //code for saving a file } } catch (Exception) { result = false; } } return new JsonResult() { Data=result }; } } 
13
ответ дан ashish 23 июня '14 в 11:18 2014-06-23 11:18

Преобразуйте файл в base64 с помощью HTML5 readAsDataURL() или некоторый кодировщик base64 . Заклинание здесь

 var reader = new FileReader(); reader.onload = function(readerEvt) { var binaryString = readerEvt.target.result; document.getElementById("base64textarea").value = btoa(binaryString); }; reader.readAsBinaryString(file); 

Затем для получения:

 window.open("data:application/octet-stream;base64," + base64); 
9
ответ дан tnt-rox 23 июня '14 в 21:50 2014-06-23 21:50

Ein beispiel Если вы используете jQuery, вы можете легко загрузить файл. Это небольшой и мощный плагин jQuery, http://jquery.malsup.com/form/ .

Beispiel

 var $bar = $('.ProgressBar'); $('.Form').ajaxForm({ dataType: 'json', beforeSend: function(xhr) { var percentVal = '0%'; $bar.width(percentVal); }, uploadProgress: function(event, position, total, percentComplete) { var percentVal = percentComplete + '%'; $bar.width(percentVal) }, success: function(response) { // Response } }); 

Я надеюсь, что было бы полезно

8
ответ дан MEAbid 14 окт. '16 в 10:17 2016-10-14 10:17

Вы можете увидеть решение с рабочей демонстрацией здесь , которая позволяет просматривать и отправлять файлы формы сервер. Для вашего случая вам необходимо использовать Ajax , чтобы облегчить загрузку файла на сервер:

 <from action="" id="formContent" method="post" enctype="multipart/form-data"> <span>File</span> <input type="file" id="file" name="file" size="10"/> <input id="uploadbutton" type="button" value="Upload"/> </form> 

Представленные данные являются formdata. В jQuery используйте функцию отправки формы вместо кнопки, чтобы отправить файл формы, как показано ниже.

 $(document).ready(function () { $("#formContent").submit(function(e){ e.preventDefault(); var formdata = new FormData(this); $.ajax({ url: "ajax_upload_image.php", type: "POST", data: formdata, mimeTypes:"multipart/form-data", contentType: false, cache: false, processData: false, success: function(){ alert("successfully submitted"); }); }); }); 

Подробнее

8
ответ дан Daniel Nyamasyo 19 июля '16 в 8:18 2016-07-19 08:18

Sie können verwenden

 $(function() { $("#file_upload_1").uploadify({ height : 30, swf : '/uploadify/uploadify.swf', uploader : '/uploadify/uploadify.php', width : 120 }); }); 

Demo

8
ответ дан Amit 12 мая '14 в 13:10 2014-05-12 13:10

Современный подход без Jquery состоит в том, чтобы использовать объект FileList, который вы возвращаете из <input type="file"> когда пользователь выбирает файл (-ы), а затем использовать Fetch для публикации FileList, обернутого вокруг объекта FormData .

 // The input DOM element const inputElement = document.querySelector('input'); // Listen for a file submit from user inputElement.addEventListener('change', () => { const data = new FormData(); data.append('file', inputElement.files[0]); data.append('imageName', 'flower'); // Post to server fetch('/uploadImage', { method: 'POST', body: data }); }); 
8
ответ дан Alister Norris 17 авг. '18 в 14:47 2018-08-17 14:47

Вы можете передать дополнительные параметры вместе с именем файла при выполнении асинхронной загрузки с использованием XMLHttpRequest (без зависимости flash и iframe). Добавьте значение дополнительного параметра с помощью FormData и отправьте запрос на загрузку.


 var formData = new FormData(); formData.append('parameter1', 'value1'); formData.append('parameter2', 'value2'); formData.append('file', $('input[type=file]')[0].files[0]); $.ajax({ url: 'post back url', data: formData, // other attributes of AJAX }); 

Кроме того, загрузка файла интерфейса пользователя Syncfusion JavaScript предоставляет решение для этого сценария, просто используя аргумент события. вы можете найти документацию здесь и более подробную информацию об этом элементе управления здесь, введите описание ссылки здесь

6
ответ дан Karthik Ravichandran 14 нояб. '18 в 15:42 2018-11-14 15:42

Посмотрите, как обрабатывать процесс загрузки файла, асинхронно здесь: https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications

Пример из ссылки

 <?php if (isset($_FILES['myFile'])) { // Example: move_uploaded_file($_FILES['myFile']['tmp_name'], "uploads/" . $_FILES['myFile']['name']); exit; } ?><!DOCTYPE html> <html> <head> <title>dnd binary upload</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script type="text/javascript"> function sendFile(file) { var uri = "/index.php"; var xhr = new XMLHttpRequest(); var fd = new FormData(); xhr.open("POST", uri, true); xhr.onreadystatechange = function() { if (xhr.readyState == 4  xhr.status == 200) { // Handle response. alert(xhr.responseText); // handle response. } }; fd.append('myFile', file); // Initiate a multipart/form-data upload xhr.send(fd); } window.onload = function() { var dropzone = document.getElementById("dropzone"); dropzone.ondragover = dropzone.ondragenter = function(event) { event.stopPropagation(); event.preventDefault(); } dropzone.ondrop = function(event) { event.stopPropagation(); event.preventDefault(); var filesArray = event.dataTransfer.files; for (var i=0; i<filesArray.length; i++) { sendFile(filesArray[i]); } } } </script> </head> <body> <div> <div id="dropzone" style="margin:30px; width:500px; height:300px; border:1px dotted grey;">Drag  drop your file here...</div> </div> </body> </html> 
6
ответ дан Allende 08 июля '15 в 20:59 2015-07-08 20:59

Это мое решение.

 <form enctype="multipart/form-data"> <div class="form-group"> <label class="control-label col-md-2" for="apta_Description">Description</label> <div class="col-md-10"> <input class="form-control text-box single-line" id="apta_Description" name="apta_Description" type="text" value=""> </div> </div> <input name="file" type="file" /> <input type="button" value="Upload" /> </form> 

и js

 <script> $(':button').click(function () { var formData = new FormData($('form')[0]); $.ajax({ url: '@Url.Action("Save", "Home")', type: 'POST', success: completeHandler, data: formData, cache: false, contentType: false, processData: false }); }); function completeHandler() { alert(":)"); } </script> 

Controller

 [HttpPost] public ActionResult Save(string apta_Description, HttpPostedFileBase file) { return Json(":)"); } 
3

Используя HTML5 и JavaScript , загрузка async довольно проста, я создаю логику загрузки вместе с вашим html, это не полностью работает, так как ему нужно api, но демонстрируйте, как это работает, если у вас есть конечная точка, вызываемая /upload из корня вашего веб-сайт, этот код должен работать на вас:

Также есть дополнительная информация о XMLHttpReques:

Объект XMLHttpRequest

Все современные браузеры поддерживают объект XMLHttpRequest. Объект XMLHttpRequest может использоваться для обмена данными с веб-сервером за кулисами. Это означает, что можно обновлять части веб-страницы без перезагрузки всей страницы.


Создать объект XMLHttpRequest

Все современные браузеры (Chrome, Firefox, IE7+, Edge, Safari, Opera) имеют встроенный объект XMLHttpRequest.

Синтаксис для создания объекта XMLHttpRequest:

variable = new XMLHttpRequest();


Доступ во всех доменах

По соображениям безопасности современные браузеры не разрешают доступ к доменам.

Это означает, что и веб-страница, и файл XML, который она пытается загрузить, должны быть расположены на одном сервере.

Примеры в W3Schools открывают все файлы XML, расположенные в домене W3Schools.

Если вы хотите использовать пример выше на одной из ваших собственных веб-страниц, загружаемые файлы XML должны размещаться на вашем собственном сервере.

Для более подробной информации вы можете продолжить чтение здесь ...

3
ответ дан Alireza 12 марта '18 в 15:32 2018-03-12 15:32

Вы можете использовать новый API Fetch с помощью JavaScript. Wie ist es:

 function uploadButtonCLicked(){ var input = document.querySelector('input[type="file"]') fetch('/url', { method: 'POST', body: input.files[0] }).then(res => res.json()) // you can do something with response .catch(error => console.error('Error:', error)) .then(response => console.log('Success:', response)); } 

Преимущество: API-интерфейс Fetch поддерживается всеми современными браузерами, поэтому вам не нужно ничего импортировать. Также обратите внимание, что fetch() возвращает Promise, который затем обрабатывается с помощью .then(..code to handle response..) асинхронно.

2
ответ дан BlackBeard 21 мая '18 в 13:14 2018-05-21 13:14

Вы можете выполнять асинхронную загрузку нескольких файлов, используя JavaScript или jQuery, и это без использования какого-либо плагина. Вы также можете отобразить прогресс загрузки файла в режиме реального времени в контроле прогресса. Я наткнулся на 2 хорошие ссылки -

  1. Функция многократной загрузки файлов на основе веб-форм ASP.NET с индикатором выполнения
  2. ASP.NET MVC на основе нескольких загрузок файлов в jQuery

Серверный язык - С#, но вы можете внести некоторые изменения, чтобы он работал с другим языком, таким как PHP.

Загрузка файла ASP.NET Core MVC:

В представлении создания файла управления загрузкой в HTML:

 <form method="post" asp-action="Add" enctype="multipart/form-data"> <input type="file" multiple name="mediaUpload" /> <button type="submit">Submit</button> </form> 

Теперь создайте метод действия в вашем контроллере:

 [HttpPost] public async Task<IActionResult> Add(IFormFile[] mediaUpload) { //looping through all the files foreach (IFormFile file in mediaUpload) { //saving the files string path = Path.Combine(hostingEnvironment.WebRootPath, "some-folder-path"); using (var stream = new FileStream(path, FileMode.Create)) { await file.CopyToAsync(stream); } } } 

Переменная hostingEnvironment имеет тип IHostingEnvironment, который может быть введен в контроллер с помощью внедрения зависимости, например:

 private IHostingEnvironment hostingEnvironment; public MediaController(IHostingEnvironment environment) { hostingEnvironment = environment; } 
2
ответ дан Joe Clinton 29 авг. '18 в 22:51 2018-08-29 22:51
  • 1
  • 2

Другие вопросы по меткам или Задайте вопрос