wake-up-neo.com

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

Anstatt die Datei hochzuladen, erhalte 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.

2802
Sergio del Amo

Mit HTML5 können Sie Dateien mit Ajax und jQuery hochladen. Darüber hinaus können Sie Dateiüberprüfungen (Name, Größe und MIME-Typ) durchführen oder das Fortschrittsereignis mit dem HTML5-Fortschritts-Tag (oder einem Div) behandeln. Vor kurzem musste ich einen Datei-Uploader erstellen, wollte aber weder Flash noch Iframes oder Plugins verwenden, und nach einiger Recherche kam ich auf die Lösung.

Der HTML:

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

Zuerst können Sie eine Validierung durchführen, wenn Sie möchten. Zum Beispiel im Ereignis .on('change') der Datei:

$(':file').on('change', function () {
  var file = this.files[0];

  if (file.size > 1024) {
    alert('max upload size is 1k');
  }

  // Also see .name, .type
});

Nun wird die $.ajax() mit dem Klick des Buttons übermittelt:

$(':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, wird das Hochladen von Dateien mit HTML5 (und einigen Nachforschungen) nicht nur möglich, sondern auch ganz einfach. Probieren Sie es mit Google Chrome aus, da einige der HTML5-Komponenten der Beispiele nicht in jedem Browser verfügbar sind.

2460
olanod

2019 Update: Es hängt immer noch von den Browsern ab , die Ihre Bevölkerungsgruppe verwendet.

Eine wichtige Sache, die mit der "neuen" HTML5 file-API zu verstehen ist, ist, dass es wurde erst in IE 10 unterstützt . Wenn der spezifische Markt, den Sie anstreben, eine überdurchschnittliche Neigung zu älteren Windows-Versionen aufweist, haben Sie möglicherweise keinen Zugriff darauf.

Ab 2017 sind ungefähr 5% der Browser IE 6, 7, 8 oder 9. Wenn Sie in ein großes Unternehmen eintreten (z. B. ein B2B-Tool oder etwas, für das Sie liefern) Training) kann diese Zahl explodieren. Im Jahr 2016 habe ich mit einem Unternehmen zusammengearbeitet, das IE8 auf über 60% seiner Maschinen einsetzte.

Es ist 2019, fast 11 Jahre nach meiner ersten Antwort. IE9 und niedriger liegen global um die 1% -Marke, aber es gibt immer noch Cluster mit höherer Auslastung.

Das wichtigste Problem dabei ist - unabhängig von der Funktion -, zu überprüfen, welchen Browser Ihre Benutzer verwenden . . Wenn Sie dies nicht tun, lernen Sie schnell und schmerzhaft, warum "für mich arbeitet" nicht gut genug ist, um einem Kunden etwas zu liefern. caniuse ist ein nützliches Werkzeug, aber beachten Sie, woher sie ihre demografischen Daten beziehen. Sie sind möglicherweise nicht auf Ihre ausgerichtet. Dies ist niemals wahrer als in Unternehmensumgebungen.

Meine Antwort von 2008 folgt.


Es gibt jedoch praktikable Nicht-JS-Methoden zum Hochladen von Dateien. Sie können einen Iframe auf der Seite erstellen (den Sie mit CSS verbergen) und dann Ihr Formular so ausrichten, dass es in diesem Iframe veröffentlicht wird. Die Hauptseite muss sich nicht bewegen.

Es ist ein "echter" Beitrag, also nicht vollständig interaktiv. Wenn Sie den Status benötigen, benötigen Sie etwas Server-seitiges, um dies zu verarbeiten. Dies ist je nach Server sehr unterschiedlich. ASP.NET hat bessere Mechanismen. PHP plain schlägt fehl, aber Sie können Perl oder Apache-Modifikationen verwenden, um es zu umgehen.

Wenn Sie mehrere Datei-Uploads benötigen, ist es am besten, jede Datei einzeln hochzuladen (um die maximale Anzahl von Datei-Uploads zu überschreiten). Veröffentlichen Sie das erste Formular im iframe, überwachen Sie den Fortschritt mithilfe der oben genannten Informationen und senden Sie das zweite Formular nach Abschluss des Vorgangs an den iframe.

Oder verwenden Sie eine Java/Flash-Lösung. Sie sind viel flexibler darin, was sie mit ihren Beiträgen anfangen können ...

260
Oli

Ich empfehle dazu das Fine Uploader Plugin. Ihr JavaScript Code wäre:

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

Hinweis: Diese Antwort ist veraltet. Es ist jetzt möglich, Dateien mit XHR hochzuladen.


Sie können keine Dateien mit XMLHttpRequest (Ajax) hochladen. Sie können den Effekt mit einem Iframe oder Flash simulieren. Das ausgezeichnete jQuery Form Plugin , das Ihre Dateien über einen iframe veröffentlicht, um den Effekt zu erzielen.

96
Mattias

Einpacken für zukünftige Leser.

Asynchroner Datei-Upload

Mit HTML5

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

Sie können auch Dateien senden ohne FormData , aber in beiden Fällen muss die Datei-API vorhanden sein, um Dateien so zu verarbeiten, dass sie mit XMLHttpRequest gesendet werden können. ( Ajax).

$.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, reines JavaScript ( no jQuery ) - Beispiel finden Sie unter " Senden von Dateien mit einem FormData-Objekt ".

Zurückfallen

Wenn HTML5 nicht unterstützt wird (no File API ) die einzige andere reine JavaScript-Lösung (no Flash oder ein anderes Browser-Plugin) ist die versteckte iframe Technik, mit der eine asynchrone Anfrage ohne Verwendung des XMLHttpRequest Objekts emuliert werden kann.

Es besteht darin, einen Iframe als Ziel des Formulars mit den Dateieingaben festzulegen. Wenn der Benutzer eine Anforderung sendet und die Dateien hochgeladen werden, wird die Antwort jedoch im iframe angezeigt, anstatt die Hauptseite erneut zu rendern. Das Ausblenden des Iframes macht den gesamten Prozess für den Benutzer transparent und emuliert eine asynchrone Anforderung.

Wenn es richtig gemacht wird, sollte es auf jedem Browser funktionieren, aber es gibt einige Einschränkungen, wie man die Antwort vom iframe erhält.

In diesem Fall bevorzugen Sie möglicherweise ein Wrapper-Plugin wie Bifröst , das die iframe-Technik verwendet, aber auch einen jQuery Ajax-Transport liefert = Erlauben , Dateien nur mit der $.ajax() -Methode wie folgt zu senden:

$.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 ein kleiner Wrapper, der die Fallback-Unterstützung für die Ajax-Methode von jQuery hinzufügt, aber viele der oben genannten Plugins mögen jQuery Form Plugin oder jQuery File Upload Enthalten Sie den gesamten Stapel von HTML5 bis zu verschiedenen Fallbacks und einige nützliche Funktionen, um den Prozess zu vereinfachen. Abhängig von Ihren Bedürfnissen und Anforderungen möchten Sie möglicherweise eine reine Implementierung oder eines dieser Plugins in Betracht ziehen.

89
404

Dieses AJAX-Datei-Upload-jQuery-Plugin lädt die Datei irgendwie hoch und übergibt die Antwort an einen Rückruf, sonst nichts.

  • Es hängt nicht von spezifischem HTML ab, geben Sie ihm einfach einen <input type="file">
  • Es ist nicht erforderlich, dass Ihr Server auf eine bestimmte Weise antwortet
  • Es spielt keine Rolle, wie viele Dateien Sie verwenden oder wo sie sich auf der Seite befinden

- Verwenden Sie so wenig wie -

$('#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');
  }
});
84

Ich habe das folgende Skript zum Hochladen von Bildern verwendet, was zufällig funktioniert.

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);
});

Erläuterung

Ich verwende die Antwort div, um die Upload-Animation und die Antwort nach dem Upload anzuzeigen.

Das Beste daran ist, dass Sie zusätzliche Daten wie z. B. IDs und andere mit der Datei senden können, wenn Sie dieses Skript verwenden. Ich habe es extra-data wie im Skript erwähnt.

Auf der Ebene PHP funktioniert dies wie ein normaler Dateiupload. Extra-Daten können als $_POST -Daten abgerufen werden.

Hier benutzt du kein Plugin und so. Sie können den Code nach Belieben ändern. Sie codieren hier nicht blind. Dies ist die Kernfunktionalität jedes Uploads von jQuery-Dateien. Eigentlich Javascript.

60
Techie

Sie können es in Vanilla JavaScript ziemlich einfach tun. Hier ist ein Ausschnitt aus meinem aktuellen Projekt:

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);
46
mpen

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

HTML:

<form id="upload-form">
    <div>
        <label for="file">File:</label>
        <input type="file" id="file" name="file" />
        <progress class="progress" value="0" max="100"></progress>
    </div>
    <hr />
    <input type="submit" value="Submit" />
</form>

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) {
                // ...
            }
       });
    }));
});
45
Zayn Ali

Die einfachste und robusteste Methode, mit der ich dies in der Vergangenheit getan habe, besteht darin, einfach ein verstecktes iFrame-Tag mit Ihrem Formular auszurichten. Es wird dann im iframe gesendet, ohne die Seite neu zu laden.

Dies ist der Fall, wenn Sie kein Plugin, JavaScript oder eine andere Form von "Magie" als HTML verwenden möchten. Natürlich können Sie dies mit JavaScript kombinieren oder was haben 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 auch den Inhalt des iframe onLoad auf Serverfehler oder Erfolgsantworten lesen und diesen dann an den Benutzer ausgeben.

Chrome, iFrames und onLoad

- Hinweis - Sie müssen nur weiterlesen, wenn Sie interessiert sind, wie Sie einen UI-Blocker beim Hochladen/Herunterladen einrichten

Derzeit löst Chrome das Ereignis onLoad für den Iframe nicht aus, wenn er zum Übertragen von Dateien verwendet wird. Firefox, IE und Edge lösen alle das Onload-Ereignis für Dateiübertragungen aus.

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

Um dies im Grunde zu tun, wenn der Upload/Download gestartet wird:

  • [Client-Seite] Starten Sie ein Intervall, um festzustellen, ob ein Cookie vorhanden ist
  • [Serverseite] Tun Sie alles, was Sie mit den Dateidaten tun müssen
  • [Serverseitig] Cookie für clientseitiges Intervall festlegen
  • [Client Side] Interval erkennt das Cookie und verwendet es wie das Ereignis onLoad. Zum Beispiel können Sie einen UI-Blocker starten und dann beim Laden (oder wenn ein Cookie erstellt wird) den UI-Blocker entfernen.

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

Ich habe ein jQuery-Plugin erstellt, um dieses Problem für Chrome beim Herunterladen zu beheben. Sie finden es hier

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

Das gleiche Prinzip gilt auch für das Hochladen.

So verwenden Sie den Downloader (natürlich mit 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');
 });

Und auf der Serverseite erstellen Sie kurz vor dem Übertragen der Dateidaten das Cookie

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

Das Plugin sieht das Cookie und löst dann den Rückruf onComplete aus.

42
ArtisticPhoenix

Ich habe dies in einer Rails Umgebung geschrieben . Wenn Sie das einfache jQuery-Form-Plugin verwenden, sind es nur fünf Zeilen JavaScript.

Die Herausforderung besteht darin, dass das Hochladen von AJAX als Standard funktioniert. remote_form_for versteht das Übermitteln mehrteiliger Formulare nicht. Die Dateidaten, die Rails mit der Anforderung AJAX zurücksucht, werden nicht gesendet.

Hier kommt das jQuery-Form-Plugin ins Spiel.

Hier ist der 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 zugehörige 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 Controller-Aktion Rails, hübsche Vanille:

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

Ich habe dies in den letzten Wochen mit Bloggity verwendet und es hat wie ein Champion funktioniert.

32
wbharding

Eine Lösung, die ich gefunden habe, war, dass <form> auf einen versteckten iFrame abzielt. Der iFrame kann dann JS ausführen, um dem Benutzer anzuzeigen, dass der Vorgang abgeschlossen ist (beim Laden der Seite).

32
Darryl Hein

Simple Ajax Uploader ist eine weitere Option:

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

  • Cross-Browser - funktioniert in IE7 +, Firefox, Chrome, Safari, Opera
  • Unterstützt mehrere gleichzeitige Uploads - auch in Nicht-HTML5-Browsern
  • Kein Flash oder externes CSS - nur eine 5-KB-Javascript-Datei
  • Optionale, integrierte Unterstützung für vollständig browserübergreifende Fortschrittsbalken (unter Verwendung der APC-Erweiterung von PHP)
  • Flexibel und in hohem Maße anpassbar - verwenden Sie ein beliebiges Element als Upload-Schaltfläche und gestalten Sie Ihre eigenen Fortschrittsanzeigen
  • Es sind keine Formulare erforderlich. Geben Sie lediglich ein Element an, das als Upload-Schaltfläche dient
  • MIT Lizenz - frei zur Verwendung in kommerziellen Projekten

Anwendungsbeispiel:

var uploader = new ss.SimpleUpload({
    button: $('#uploadBtn'), // upload button
    url: '/uploadhandler', // URL of server-side upload handler
    name: 'userfile', // parameter name of the uploaded file
    onSubmit: function() {
        this.setProgressBar( $('#progressBar') ); // designate elem as our progress bar
    },
    onComplete: function(file, response) {
        // do whatever after upload is finished
    }
});
31
user1091949

jQuery ploadify ist ein weiteres gutes Plugin, das ich zuvor zum Hochladen von Dateien verwendet habe. Der JavaScript-Code ist so einfach wie der folgende: 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 zum Hochladen von Dateien gekommen, die kein Plugin und nur Ajax enthält. Die Lösung ist 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);
}
23
farnoush resa

Hier ist nur eine andere Lösung zum Hochladen von Dateien ( ohne Plugin )

Mit einfachen Javascripten und AJAX (mit Fortschrittsbalken)

HTML-Teil

<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 BEISPIEL-Anwendung

21
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

Gehen Sie wie folgt vor, um eine Datei asynchron mit Jquery hochzuladen:

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

Schritt 2 Fügen Sie die folgenden Skripte in die HTML-Dateien ein, die dem Projekt bereits hinzugefügt wurden, indem Sie das obige Paket ausführen:

jquery.ui.widget.js

jquery.iframe-transport.js

jquery.fileupload.js

Schritt 3 Schreibe die Steuerung für das Hochladen von Dateien wie folgt:

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

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

 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 Rufen Sie im Bereitschaftsmodus das Elementdatei-Upload auf, um den Prozess wie folgt zu starten:

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

});

Schritt 6 Schreiben Sie den MVC-Controller und die Aktion wie folgt:

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

Ein moderner Ansatz ohne Jquery besteht darin, das FileList -Objekt zu verwenden, das Sie von <input type="file"> zurückerhalten, wenn der Benutzer eine Datei auswählt (s) und verwenden Sie dann Fetch , um die um ein FormData -Objekt gewickelte FileList zu veröffentlichen.

// The input DOM element // <input type="file">
const inputElement = document.querySelector('input[type=file]');

// Listen for a file submit from user
inputElement.addEventListener('change', () => {
    const data = new FormData();
    data.append('file', inputElement.files[0]);
    data.append('imageName', 'flower');

    // You can then post it to your server.
    // Fetch can accept an object of type FormData on its  body
    fetch('/uploadImage', {
        method: 'POST',
        body: data
    });
});
9
Alister

Konvertieren Sie die Datei in base64 mit | HTML5 readAsDataURL () oder einige base64-Encoder . Geige hier

var reader = new FileReader();

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

        reader.readAsBinaryString(file);

Dann abrufen:

window.open("data:application/octet-stream;base64," + base64);
9
tnt-rox

Sie können verwenden

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

Demo

8
Amit

Beispiel: Wenn Sie jQuery verwenden, können Sie auf einfache Weise eine Upload-Datei erstellen. Dies ist ein kleines und starkes jQuery-Plugin, 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
  }
});

Ich hoffe es wäre hilfreich

8
MEAbid

Sie können eine gelöste Lösung mit einer funktionierenden Demo sehen hier , mit der Sie eine Vorschau anzeigen und Formulardateien an den Server senden können. Für Ihren Fall müssen Sie Ajax verwenden, um das Hochladen der Datei auf den Server zu erleichtern:

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

Die übermittelten Daten sind Formdaten. Verwenden Sie in Ihrer jQuery eine Formularsendefunktion anstelle eines Schaltflächenklicks, um die Formulardatei wie unten gezeigt zu senden.

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

     });
   });
});

Weitere Details anzeigen

8
Daniel Nyamasyo

Sie können beim asynchronen Upload mit XMLHttpRequest (ohne Flash- und Iframe-Abhängigkeit) zusätzliche Parameter zusammen mit dem Dateinamen übergeben. Hängen Sie den zusätzlichen Parameterwert an FormData an und senden Sie die Upload-Anfrage.


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
});

Das Hochladen der Syncfusion-JavaScript-UI-Datei bietet auch eine Lösung für dieses Szenario, indem einfach ein Ereignisargument verwendet wird. Dokumentation hier und weitere Details zu diesem Steuerelement finden Sie hier. Linkbeschreibung hier

Suchen Sie nach Abwicklung des Upload-Vorgangs für eine Datei, asynchron hier: https://developer.mozilla.org/en-US/ docs/Using_files_from_web_applications

Beispiel aus dem Link

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

Sie können den folgenden Code verwenden.

async: false(true)
3
Hauto Sagarin

Mit HTML5 und JavaScript ist das asynchrone Hochladen recht einfach, ich erstelle das Das Hochladen der Logik zusammen mit Ihrem HTML-Code funktioniert nicht vollständig, da es die API benötigt. Zeigen Sie jedoch, wie dies funktioniert. Wenn Sie den Endpunkt /upload vom Stammverzeichnis Ihrer Website aus haben, sollte dieser Code für Sie funktionieren:

const asyncFileUpload = () => {
  const fileInput = document.getElementById("file");
  const file = fileInput.files[0];
  const uri = "/upload";
  const xhr = new XMLHttpRequest();
  xhr.upload.onprogress = e => {
    const percentage = e.loaded / e.total;
    console.log(percentage);
  };
  xhr.onreadystatechange = e => {
    if (xhr.readyState === 4 && xhr.status === 200) {
      console.log("file uploaded");
    }
  };
  xhr.open("POST", uri, true);
  xhr.setRequestHeader("X-FileName", file.name);
  xhr.send(file);
}
<form>
  <span>File</span>
  <input type="file" id="file" name="file" size="10" />
  <input onclick="asyncFileUpload()" id="upload" type="button" value="Upload" />
</form>

Einige weitere Informationen zu XMLHttpReques:

Das XMLHttpRequest-Objekt

Alle modernen Browser unterstützen das XMLHttpRequest-Objekt. Das XMLHttpRequest-Objekt kann verwendet werden, um im Hintergrund Daten mit einem Webserver auszutauschen. Dies bedeutet, dass es möglich ist, Teile einer Webseite zu aktualisieren, ohne die gesamte Seite neu zu laden.


Ein XMLHttpRequest-Objekt erstellen

Alle modernen Browser (Chrome, Firefox, IE7 +, Edge, Safari, Opera) verfügen über ein integriertes XMLHttpRequest-Objekt.

Syntax zum Erstellen eines XMLHttpRequest-Objekts:

variable = new XMLHttpRequest ();


Domänenübergreifender Zugriff

Aus Sicherheitsgründen erlauben moderne Browser keinen domänenübergreifenden Zugriff.

Dies bedeutet, dass sich sowohl die Webseite als auch die XML-Datei, die geladen werden soll, auf demselben Server befinden müssen.

In den Beispielen zu W3Schools werden alle offenen XML-Dateien angezeigt, die sich in der W3Schools-Domäne befinden.

Wenn Sie das obige Beispiel auf einer Ihrer eigenen Webseiten verwenden möchten, müssen sich die von Ihnen geladenen XML-Dateien auf Ihrem eigenen Server befinden.

Für weitere Informationen lesen Sie bitte weiter hier ...

3
Alireza

Sie können die asynchronen Uploads mehrerer Dateien mit JavaScript oder jQuery durchführen, ohne ein Plug-in zu verwenden. Sie können den Echtzeit-Fortschritt des Datei-Uploads auch in der Fortschrittskontrolle anzeigen. Ich bin auf 2 nette Links gestoßen -

  1. ASP.NET Web Forms-basierte Funktion zum Hochladen mehrerer Dateien mit Fortschrittsanzeige
  2. ASP.NET MVC-basiertes Hochladen mehrerer Dateien in jQuery

Die serverseitige Sprache ist C #, aber Sie können einige Änderungen vornehmen, damit es mit anderen Sprachen wie PHP funktioniert.

Hochladen von ASP.NET Core MVC-Dateien:

In der Ansicht Datei erstellen Upload-Steuerelement in HTML:

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

Erstellen Sie nun eine Aktionsmethode in Ihrem Controller:

[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);
        }
    }
}

die Variable hostingEnvironment ist vom Typ IHostingEnvironment, die mithilfe der Abhängigkeitsinjektion in den Controller injiziert werden kann, z.

private IHostingEnvironment hostingEnvironment;
public MediaController(IHostingEnvironment environment)
{
    hostingEnvironment = environment;
}
3
Joe Clinton

Das ist meine Lösung.

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

und die 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>

Regler

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

Sie können neuere Fetch API per JavaScript verwenden. So was:

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));
}                               

Vorteil: Fetch API wird von allen modernen Browsern nativ unterstützt , so dass Sie Sie müssen nichts importieren. Beachten Sie außerdem, dass fetch () ein Promise zurückgibt, das dann mithilfe von .then(..code to handle response..) asynchron verarbeitet wird.

2
BlackBeard

Suchen Sie für PHP nach https://developer.hyvor.com/php/image-upload-ajax-php-mysql

HTML

<html>
<head>
    <title>Image Upload with AJAX, PHP and MYSQL</title>
</head>
<body>
<form onsubmit="submitForm(event);">
    <input type="file" name="image" id="image-selecter" accept="image/*">
    <input type="submit" name="submit" value="Upload Image">
</form>
<div id="uploading-text" style="display:none;">Uploading...</div>
<img id="preview">
</body>
</html>

JAVASCRIPT

var previewImage = document.getElementById("preview"),  
    uploadingText = document.getElementById("uploading-text");

function submitForm(event) {
    // prevent default form submission
    event.preventDefault();
    uploadImage();
}

function uploadImage() {
    var imageSelecter = document.getElementById("image-selecter"),
        file = imageSelecter.files[0];
    if (!file) 
        return alert("Please select a file");
    // clear the previous image
    previewImage.removeAttribute("src");
    // show uploading text
    uploadingText.style.display = "block";
    // create form data and append the file
    var formData = new FormData();
    formData.append("image", file);
    // do the ajax part
    var ajax = new XMLHttpRequest();
    ajax.onreadystatechange = function() {
        if (this.readyState === 4 && this.status === 200) {
            var json = JSON.parse(this.responseText);
            if (!json || json.status !== true) 
                return uploadError(json.error);

            showImage(json.url);
        }
    }
    ajax.open("POST", "upload.php", true);
    ajax.send(formData); // send the form data
}

PHP

<?php
$Host = 'localhost';
$user = 'user';
$password = 'password';
$database = 'database';
$mysqli = new mysqli($Host, $user, $password, $database);


 try {
    if (empty($_FILES['image'])) {
        throw new Exception('Image file is missing');
    }
    $image = $_FILES['image'];
    // check INI error
    if ($image['error'] !== 0) {
        if ($image['error'] === 1) 
            throw new Exception('Max upload size exceeded');

        throw new Exception('Image uploading error: INI Error');
    }
    // check if the file exists
    if (!file_exists($image['tmp_name']))
        throw new Exception('Image file is missing in the server');
    $maxFileSize = 2 * 10e6; // in bytes
    if ($image['size'] > $maxFileSize)
        throw new Exception('Max size limit exceeded'); 
    // check if uploaded file is an image
    $imageData = getimagesize($image['tmp_name']);
    if (!$imageData) 
        throw new Exception('Invalid image');
    $mimeType = $imageData['mime'];
    // validate mime type
    $allowedMimeTypes = ['image/jpeg', 'image/png', 'image/gif'];
    if (!in_array($mimeType, $allowedMimeTypes)) 
        throw new Exception('Only JPEG, PNG and GIFs are allowed');

    // Nice! it's a valid image
    // get file extension (ex: jpg, png) not (.jpg)
    $fileExtention = strtolower(pathinfo($image['name'] ,PATHINFO_EXTENSION));
    // create random name for your image
    $fileName = round(microtime(true)) . mt_Rand() . '.' . $fileExtention; // anyfilename.jpg
    // Create the path starting from DOCUMENT ROOT of your website
    $path = '/examples/image-upload/images/' . $fileName;
    // file path in the computer - where to save it 
    $destination = $_SERVER['DOCUMENT_ROOT'] . $path;

    if (!move_uploaded_file($image['tmp_name'], $destination))
        throw new Exception('Error in moving the uploaded file');

    // create the url
    $protocol = stripos($_SERVER['SERVER_PROTOCOL'],'https') === true ? 'https://' : 'http://';
    $domain = $protocol . $_SERVER['SERVER_NAME'];
    $url = $domain . $path;
    $stmt = $mysqli -> prepare('INSERT INTO image_uploads (url) VALUES (?)');
    if (
        $stmt &&
        $stmt -> bind_param('s', $url) &&
        $stmt -> execute()
    ) {
        exit(
            json_encode(
                array(
                    'status' => true,
                    'url' => $url
                )
            )
        );
    } else 
        throw new Exception('Error in saving into the database');

} catch (Exception $e) {
    exit(json_encode(
        array (
            'status' => false,
            'error' => $e -> getMessage()
        )
    ));
}
2
Supun Kavinda

Sie können auch die Verwendung von https://uppy.io in Betracht ziehen.

Es führt das Hochladen von Dateien durch, ohne von der Seite weg zu navigieren, und bietet einige Vorteile wie Drag & Drop, Fortsetzen des Uploads bei Abstürzen des Browsers/unzuverlässigen Netzwerken und Importieren von z. Instagram. Es ist Open Source und basiert nicht auf jQuery/React/Angular/Vue, sondern kann damit verwendet werden. Haftungsausschluss: Als Urheber bin ich voreingenommen;)

2
kvz

Es ist eine alte Frage, hat aber immer noch keine richtige Antwort. Also:

Haben Sie versucht jQuery-File-Upload ?

Hier ist ein Beispiel aus dem obigen Link, das Ihr Problem lösen könnte:

$('#fileupload').fileupload({
    add: function (e, data) {
        var that = this;
        $.getJSON('/example/url', function (result) {
            data.formData = result; // e.g. {id: 123}
            $.blueimp.fileupload.prototype
                .options.add.call(that, e, data);
        });
    } 
});
1
LAT94

Versuchen

async function saveFile() 
{
    let formData = new FormData();           
    formData.append("file", file.files[0]);
    await fetch('addFile.do', {method: "POST", body: formData});    
    alert("Data Uploaded: ");
}
<span>File</span>
<input type="file" id="file" name="file" size="10"/>
<input type="button" value="Upload" onclick="saveFile()"/>

Der content-type='multipart/form-data' wird vom Browser automatisch eingestellt, der Dateiname wird ebenfalls hinzugefügt. Hier ist ein ausführlicheres Beispiel mit Fehlerbehandlung und Hinzufügen von JSON

async function saveFile(inp) 
{
    let user = { name:'john', age:34 };
    let formData = new FormData();
    let photo = inp.files[0];      
         
    formData.append("photo", photo);
    formData.append("user", JSON.stringify(user));  
    
    try {
       let r = await fetch('/upload/image', {method: "POST", body: formData}); 
       console.log('HTTP response code:',r.status); 
       alert('success');
    } catch(e) {
       console.log('Huston we have problem...:', e);
    }
    
}
<input type="file" onchange="saveFile(this)" >
<br><br>
Before selecting the file Open chrome console > network tab to see the request details.
<br><br>
<small>Because in this example we send request to https://stacksnippets.net/upload/image the response code will be 404 ofcourse...</small>
1