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

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

Die Herausforderung liegt darin, das AJAX-Upload zum Laufen zu bringen, da das Standard-remote_form_for kein multipart form submission versteht. Es wird die Dateidaten, die Rails mit der AJAX-Anfrage zurücksenden möchte, nicht senden.

Dort kommt das jQuery-Formular-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| %>
Laden Sie eine Datei hoch: <%= f.file_field :uploaded_data %>
<% end %>

Hier ist der zugehörige JavaScript-Code:

$('#uploadForm input').change(function(){
 $(this).parent().ajaxSubmit({
  beforeSubmit: function(a,f,o) {
   o.dataType = 'json';
  },
  complete: function(XMLHttpRequest, textStatus) {
   // XMLHttpRequest.responseText wird die URL des hochgeladenen Bildes enthalten.
   // Setzen Sie es in ein Bild-Element, das Sie erstellen, oder verwenden Sie es wie Sie möchten.
   // Zum Beispiel, wenn Sie ein Bild-Element mit der ID "my_image" haben, dann
   //  $('#my_image').attr('src', XMLHttpRequest.responseText);
   // Wird dieses Bild-Tag dazu bringen, das hochgeladene Bild anzuzeigen.
  },
 });
});

Und hier ist die Rails-Controller-Aktion, ziemlich einfach:

 @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 champ funktioniert.

Answer 2

Eine weitere Option ist Simple Ajax Uploader:

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 5Kb Javascript-Datei
• Optionale, integrierte Unterstützung für vollständig browserübergreifende Fortschrittsbalken (mit der PHP-Erweiterung APC)
• Flexibel und hochgradig anpassbar -- verwenden Sie jedes Element als Upload-Button, gestalten Sie Ihre eigenen Fortschrittsanzeigen
• Keine Formulare erforderlich, geben Sie einfach ein Element an, das als Upload-Button fungiert
• MIT-Lizenz -- kostenlos für die Verwendung in kommerziellen Projekten

Beispielverwendung:

var uploader = new ss.SimpleUpload({
    button: $('#uploadBtn'), // Upload-Button
    url: '/uploadhandler', // URL des serverseitigen Upload-Handlers
    name: 'userfile', // Parametername der hochgeladenen Datei
    onSubmit: function() {
        this.setProgressBar( $('#progressBar') ); // weisen Sie elem als unseren Fortschrittsbalken zu
    },
    onComplete: function(file, response) {
        // Machen Sie was auch immer nachdem der Upload abgeschlossen ist
    }
});

Answer 3

Eine Lösung, die ich gefunden habe, war

auf einen versteckten iFrame zu zielen. Der iFrame kann dann JS ausführen, um dem Benutzer anzuzeigen, dass es vollständig ist (beim Laden der Seite).

Answer 4

Hier ist nur eine andere Lösung, wie man eine Datei hochlädt (ohne Plugin)

Verwendung von einfachem Javascript und AJAX (mit Fortschrittsbalken)

HTML Teil

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 = "Hochgeladen "+event.loaded+" Bytes von "+event.total;
    var percent = (event.loaded / event.total) * 100;
    _("progressBar").value = Math.round(percent);
    _("status").innerHTML = Math.round(percent)+"% hochgeladen... bitte warten";
}
function completeHandler(event){
    _("status").innerHTML = event.target.responseText;
    _("progressBar").value = 0;
}
function errorHandler(event){
    _("status").innerHTML = "Upload fehlgeschlagen";
}
function abortHandler(event){
    _("status").innerHTML = "Upload abgebrochen";
}

PHP Teil

Hier ist die BEISPIEL-Anwendung

Answer 5

JQuery Uploadify ist ein weiteres gutes Plugin, das ich bereits verwendet habe, um Dateien hochzuladen. Der JavaScript-Code ist so einfach wie folgt: 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 recherchiert 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('Erfolg');
        }
        else if (uploadResult == 'Erfolg')
            alert('Fehler');
    };
    xhr.send(fd);
}