Wie kann ich Dateien mit jQuery asynchron hochladen?

Question

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

Datei

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

Answer 1

Sie können verwenden

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

Demo

Answer 2

Beispiel: Wenn Sie jQuery verwenden, können Sie ganz einfach eine Datei hochladen. Dies ist ein kleines und leistungsstarkes 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) {
    // Antwort
  }
});

Ich hoffe, es ist hilfreich

Answer 3

Konvertiere die Datei in Base64, indem du HTML5's readAsDataURL() oder einen Base64-Encoder verwendest. Hier ist ein Fiddle

var reader = new FileReader();

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

        reader.readAsBinaryString(file);

Um dann abzurufen:

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

Answer 4

Sie können zusätzliche Parameter zusammen mit dem Dateinamen beim asynchronen Hochladen mithilfe von XMLHttpRequest (ohne Flash- und iframe-Abhängigkeit) ü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,
// andere Attribute von AJAX
});

---

Außerdem bietet der Syncfusion JavaScript UI-Dateiupload eine Lösung für dieses Szenario, indem einfach das Ereignisargument verwendet wird. Sie können die Dokumentation hier und weitere Details zu dieser Steuerung finden Sie hier Geben Sie eine Linkbeschreibung hier

Answer 5

Suchen Sie nach Behandlung des Upload-Prozesses für eine Datei asynchron hier: https://developer.mozilla.org/de/docs/Web/API/File/Using_files_from_web_applications

Beispiel vom Link

    dnd binary upload

        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) {
                    // Antwort behandeln.
                    alert(xhr.responseText); // Antwort behandeln.
                }
            };
            fd.append('myFile', file);
            // Starten Sie einen 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]);
                }
            }
        }

        Ziehen Sie Ihre Datei hierher...