Ich möchte eine Datei asynchron mit jQuery hochladen.

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<span>File</span>
<input type="file" id="file" name="file" size="10"/>
<input id="uploadbutton" type="button" value="Upload"/>

Anstatt die Datei hochzuladen, erhalte ich nur den Dateinamen. Was kann ich tun, um dieses Problem zu beheben?

Mit HTML5 können Sie mit Ajax und jQuery Datei-Uploads durchführen. 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 kein Flash verwenden noch Iframes oder Plugins verwenden, und nach einigen Recherchen 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>

Zunächst können Sie eine Validierung durchführen, wenn Sie möchten. Zum Beispiel im .on('change')Fall 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 das $.ajax()Senden mit dem Klick der Schaltfläche:

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

Update 2019: Dies hängt immer noch von den Browsern ab, die Ihre demografische Gruppe verwendet.

Eine wichtige Sache, die Sie mit der "neuen" HTML5- fileAPI verstehen sollten, ist, dass sie erst in IE 10 unterstützt wurde . Wenn der von Ihnen angestrebte spezifische Markt eine überdurchschnittliche Neigung zu älteren Windows-Versionen aufweist, haben Sie möglicherweise keinen Zugriff darauf.

Ab 2017 sind etwa 5% der Browser IE 6, 7, 8 oder 9. Wenn Sie in ein großes Unternehmen eintreten (z. B. ein B2B-Tool oder etwas, das Sie für Schulungen bereitstellen), kann diese Zahl in die Höhe schnellen . 2016 habe ich mich mit einem Unternehmen befasst, das IE8 auf über 60% seiner Maschinen verwendet.

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

Das Wichtigste 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 "funktioniert für mich" nicht gut genug ist, um einem Kunden etwas zu liefern. caniuse ist ein nützliches Werkzeug, aber beachten Sie, woher sie ihre Demografie beziehen . Sie stimmen möglicherweise nicht mit Ihren überein. 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 (die Sie mit CSS ausblenden) und dann Ihr Formular so ausrichten, dass es auf diesem Iframe veröffentlicht wird. Die Hauptseite muss nicht verschoben werden.

Es ist ein "echter" Beitrag, daher ist er nicht vollständig interaktiv. Wenn Sie Status benötigen, benötigen Sie etwas Server-seitiges, um dies zu verarbeiten. Dies ist je nach Server sehr unterschiedlich. ASP.NET hat schönere 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 auszuführen (um die maximalen Limits für das Hochladen von Dateien zu überwinden). Veröffentlichen Sie das erste Formular im Iframe, überwachen Sie den Fortschritt anhand der oben genannten Informationen. Wenn es fertig ist, senden Sie das zweite Formular in den Iframe und so weiter.

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

Ich empfehle zu diesem Zweck das Fine Uploader Plugin. Ihr JavaScriptCode wäre:

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

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.

Zusammenfassung für zukünftige Leser.

Asynchrones Hochladen von Dateien

Mit HTML5

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

Sie können Dateien auch ohne FormData senden. In beiden Fällen muss jedoch die Datei-API vorhanden sein, damit Dateien so verarbeitet werden können, dass 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, reines JavaScript-Beispiel ( kein jQuery ) finden Sie unter " Senden von Dateien mit einem FormData-Objekt ".

Zurückfallen

Wenn HTML5 nicht unterstützt wird (keine Datei-API ), ist die einzige andere reine JavaScript-Lösung (kein Flash oder ein anderes Browser-Plugin) die versteckte Iframe- Technik, mit der eine asynchrone Anforderung 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 Anfrage sendet, werden die Dateien hochgeladen, aber die Antwort wird im Iframe angezeigt, anstatt die Hauptseite erneut zu rendern. Durch das Ausblenden des Iframes wird der gesamte Prozess für den Benutzer transparent und eine asynchrone Anforderung emuliert.

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

In diesem Fall können Sie es vorziehen ein Wrapper - Plugin wie verwenden Bifröst die die verwendet iframe - Technik , sondern bietet auch einen Transport jQuery Ajax ermöglicht zu Dateien senden nur mit dem $.ajax()Verfahren wie folgt aus :

$.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 Ajax-Methode von jQuery um Fallback-Unterstützung erweitert. Viele der oben genannten Plugins wie das jQuery Form Plugin oder das Hochladen von jQuery-Dateien enthalten jedoch den gesamten Stapel von HTML5 zu verschiedenen Fallbacks und einige nützliche Funktionen, um den Prozess zu vereinfachen. Abhängig von Ihren Anforderungen und Anforderungen möchten Sie möglicherweise eine reine Implementierung oder eines dieser Plugins in Betracht ziehen.

Dieses jQuery-Plugin zum Hochladen von AJAX-Dateien lädt die Datei irgendwo hoch und leitet die Antwort an einen Rückruf weiter, sonst nichts.

• Es hängt nicht von spezifischem HTML ab, geben Sie ihm einfach ein <input type="file">
• Ihr Server muss nicht auf eine bestimmte Weise antworten
• 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');
  }
});

Ich habe das folgende Skript verwendet, um Bilder hochzuladen, was zufällig gut 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 Hochladen anzuzeigen.

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

Auf PHP-Ebene funktioniert dies wie beim normalen Hochladen von Dateien. Zusätzliche Daten können als $_POSTDaten abgerufen werden.

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

Sie können es ziemlich einfach in Vanille-JavaScript 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);

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

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

Der einfachste und robusteste Weg, den ich in der Vergangenheit gemacht habe, besteht darin, einfach ein verstecktes iFrame-Tag mit Ihrem Formular anzuvisieren. Anschließend wird es innerhalb des Iframes gesendet, ohne die Seite neu zu laden.

Das ist, wenn Sie kein Plugin, JavaScript oder andere Formen von "Magie" außer 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 Iframes onLoadauf Serverfehler oder Erfolgsantworten lesen und diesen dann an den Benutzer ausgeben.

Chrome, iFrames und onLoad

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

Derzeit löst Chrome das onLoad-Ereignis für den Iframe nicht aus, wenn es 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 nach dem Vorhandensein eines Cookies zu suchen
• [Serverseite] Machen Sie mit den Dateidaten alles, was Sie brauchen
• [Serverseitig] Setzen Sie das Cookie für das clientseitige Intervall
• [Client Side] Interval sieht das Cookie und verwendet es wie das onLoad-Ereignis. Sie können beispielsweise einen UI-Blocker starten und dann beim Laden (oder wenn ein Cookie erstellt wird) den UI-Blocker entfernen.

Die Verwendung eines Cookies ist hässlich, funktioniert aber.

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 Grundprinzip gilt auch für das Hochladen.

So verwenden Sie den Downloader (natürlich auch den 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 kurz vor dem Übertragen der Dateidaten das Cookie

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

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

Eine Lösung, die ich gefunden habe, war, dem <form>Ziel einen versteckten iFrame zu geben. Der iFrame kann dann JS ausführen, um dem Benutzer anzuzeigen, dass er vollständig ist (beim Laden der Seite).

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

Die Herausforderung besteht darin, den AJAX-Upload zum Laufen zu bringen, da der Standard remote_form_fordas Übermitteln mehrteiliger Formulare nicht versteht. Die Dateidaten, die Rails mit der AJAX-Anforderung sucht, 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 Rails-Controller-Aktion, 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.

Simple Ajax Uploader ist eine weitere Option:

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

• Browserübergreifend - 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 hochgradig 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 - kostenlos für kommerzielle Projekte

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

jQuery Uploadify ist ein weiteres gutes Plugin, mit dem ich zuvor Dateien hochgeladen 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 für das Hochladen von Dateien ohne Plugin und nur mit Ajax gekommen. 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);
}

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

Verwenden einfacher Javascripts 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

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.

Führen Sie die folgenden Schritte aus, 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 angezeigt)) URL: https://github.com/blueimp/jQuery-File- Hochladen

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 Schreiben Sie die Steuerung zum Hochladen von Dateien gemäß dem folgenden Code:

<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 Laden Sie beim Hochladen der Elementdatei die fertige Funktion auf, um den Vorgang 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
                };


        }

    }

Ein moderner Ansatz ohne Jquery besteht darin, das FileList- Objekt zu verwenden, von dem Sie zurückkommen, <input type="file">wenn der Benutzer eine Datei auswählt, und dann mit Fetch 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
    });
});

Sie können eine Lösung gelöst mit einem Arbeits Demo sehen hier , dass Sie Formulardateien an den Server , um eine Vorschau und senden kann. In Ihrem Fall müssen Sie Ajax verwenden , um das Hochladen von Dateien 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 Formulardaten. Verwenden Sie in Ihrer jQuery eine Formularübermittlungsfunktion 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

Beispiel: Wenn Sie jQuery verwenden, können Sie eine Upload-Datei einfach bearbeiten. 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

Sie können verwenden

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

Demo

Konvertieren Sie die Datei mit readAsDataURL () von | HTML5 oder einem Base64-Encoder in base64 . 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);

Sie können zusätzliche Parameter zusammen mit dem Dateinamen beim asynchronen Hochladen mit XMLHttpRequest übergeben (ohne Flash- und Iframe-Abhängigkeit). Fügen Sie den zusätzlichen Parameterwert mit FormData hinzu und senden Sie die Upload-Anforderung.

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

Außerdem bietet das Hochladen von JavaScript-UI-Dateien von Syncfusion eine Lösung für dieses Szenario, indem einfach ein Ereignisargument verwendet wird. Dokumentation finden Sie hier und weitere Details zu diesem Steuerelement finden Sie hier

Suchen Sie hier nach der asynchronen Behandlung des Upload-Vorgangs für eine Datei : 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>

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)
{
    [...]
}

Mit HTML5 und JavaScript ist das Hochladen von Async recht einfach. Ich erstelle die Upload-Logik zusammen mit Ihrem HTML-Code. Dies funktioniert nicht vollständig, da die API benötigt wird. Zeigen Sie jedoch, wie es funktioniert, wenn Sie den Endpunkt /uploadaus dem Stammverzeichnis Ihrer Website aufgerufen haben. Dieser Code sollte 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>

Auch einige weitere Informationen zu XMLHttpReques:

Das XMLHttpRequest-Objekt

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

Erstellen Sie ein XMLHttpRequest-Objekt

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

Zugriff über Domänen hinweg

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 auf W3Schools werden alle XML-Dateien in der W3Schools-Domäne geöffnet.

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 Details können Sie hier weiterlesen ...

Sie können eine neuere Fetch-API mit 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: Die Fetch-API wird von allen modernen Browsern nativ unterstützt , sodass Sie nichts importieren müssen. Beachten Sie außerdem, dass fetch () ein Versprechen zurückgibt, das dann .then(..code to handle response..)asynchron verwendet wird.

Sie können die asynchronen Uploads mehrerer Dateien mit JavaScript oder jQuery durchführen, ohne ein Plugin zu verwenden. Sie können den Echtzeitfortschritt 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 Fortschrittsbalken
2. ASP.NET MVC-basiertes Hochladen mehrerer Dateien in jQuery

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

Datei-Upload ASP.NET Core MVC:

In der Ansicht Steuerelement zum Hochladen von Dateien in HTML erstellen:

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

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

Sie können auch https://uppy.io verwenden .

Es lädt Dateien hoch, ohne von der Seite weg zu navigieren, und bietet einige Boni wie Drag & Drop, Fortsetzen des Uploads bei Browserabstürzen / flockigen Netzwerken und Importieren von z. B. Instagram. Es ist Open Source und basiert nicht auf jQuery / React / Angular / Vue, kann aber damit verwendet werden. Haftungsausschluss: Als Schöpfer bin ich voreingenommen;)