FormData nicht angehängte Datei senden

Question

Ich mache eine Javascript-App zum Hochladen von Dateien mit Drag & Drop-Unterstützung - aber ich habe ein Problem getroffen, an dem ich seit Tagen feststeckte.

Es scheint, dass 'fallengelassene' Dateien (in meinem Fall über jQuery, .on('drop', function(e){) Dateien nicht wirklich gesendet werden.

Ich habe Antwort nach Antwort auf StackOverflow gesucht - BITTE NICHT als DUPLICATE MARKIEREN. DIE DUPLIKATE HELFEN NICHT - Ich muss noch einen Aspekt finden, den ich bei meiner Implementierung nicht berücksichtigt habe. Es ist, als ob diese Lösung für alle anderen außer mir funktioniert ...

Glauben Sie mir nicht? FIDDLE HERE

(Haftungsausschluss: offensichtlich habe ich meine Lösung nicht verändert Cross-Domain-Anfragen zu bedienen, ich bin mit einem Endpunkt ich auf Fiddle als Ersatz gefunden, aber es scheint das gleiche Problem zu präsentieren ich gewesen sein Erfahrung - hoffentlich ist es als Grundlage für dieses Beispiel ausreichend)

Das Problem ist, dass der Upload sofort abgeschlossen wird - offenbar sendet es nur die Textdaten und nicht die Datei selbst hochladen. Beim Überprüfen der Nutzdaten der Anfrage sehe ich, dass die Daten nicht vorhanden sind.

Javascript

function uploadFile(file){ 
    console.log("uploadFile"); 
    var form = new FormData(); 
    form.append('file', file); 
    form.append('hello', 'world'); 
    $.ajax({ 
    url: "/echo/js/?js=hello%20world!", 
    type: "POST", 
    data: form, 
    processData: false, 
    contentType: false, 
    cache: false, 
    success: function(data){ 
     alert("SUCCESS"); 
    } 
    }); 
} 
$(document).ready(function(){ 

    /* Disable default drag/drop browser behavior. */ 
    $("html").on('drop', function(e){e.preventDefault(); e.stopPropagation();}); 
    $("html").on('dragover', function(e){e.preventDefault(); e.stopPropagation();}); 
    $("html").on('dragenter', function(e){e.preventDefault(); e.stopPropagation();}); 
    $("html").on('dragleave', function(e){e.preventDefault(); e.stopPropagation();}); 

    $(".drop_area").on('drop', function(e){ 
    e.preventDefault(); 
    e.stopPropagation(); 
    var files = e.originalEvent.target.files || e.originalEvent.dataTransfer.files; 
    console.log(files); 
    for (var i = 0; i < files.length; i++) { 
     uploadFile(files[i]) 
    } 
    }); 
}); 

HTML

<div class='drop_area'> 
Drop your file in this div. 
</div> 

CSS

.drop_area { 
    border: 1px solid black; 
    background: #ffffff; 
    height: 300px; 
    width: 50%; 
    position: relative; 
} 

Answer 1

Nachdem ich die leeren Anforderungsheader in Chrome gesehen hatte und basierend auf der schnellen Upload-Geschwindigkeit, hatte ich angenommen, dass die Dateien nicht gesendet wurden.

jedoch nach Code zu meinem Backend-Endpunkt hinzugefügt (via var_dump($_FILES['file']);), sehe ich folgendes: eine ganze Reihe von Daten, um anzuzeigen, war availible von meinem Upload

array(5) { 
    ["name"]=> 
    string(14) "two-minute.mp4" 
    ["type"]=> 
    string(9) "video/mp4" 
    ["tmp_name"]=> 
    string(36) "/Applications/MAMP/tmp/php/phpXfCu0U" 
    ["error"]=> 
    int(0) 
    ["size"]=> 
    int(12904619) 
} 

Das große size Attribut erscheint. Es hat wahrscheinlich die ganze Zeit funktioniert. Ich sehe mir das morgen genauer an, aber im Moment könnte die Antwort lauten:

"Es sieht einfach so aus, als ob es nicht von Ihrem Browser funktioniert, aber es ist tatsächlich ...".

Teil Kredit an @ Alisher Gafurov für mich zu überzeugen, die Back-End-Implementierung zu überprüfen, um zu überprüfen, ob die Datei tatsächlich nicht vorhanden war.