Jquery input.files gleichwertig

Question

Ich habe ein einfaches HTML-Formular mit einem einzigen Datei-Upload-Eingang. (jsfiddle)

In der Vergangenheit habe ich die Datei durch den Benutzer ausgewählt zugegriffen input.files verwenden, aber ich ratlos bin, wie dies mit JQuery zu tun;

Code:

$(function() { 
    $("#cmdSubmit").bind("click", function() { 
     var file = document.getElementById("fileInput").files[0]; 
     alert(file); //A 

     file = $("#fileInput").val(); 
     alert(file); //B 

     file = $("#fileInput").files[0]; 
     alert(file); //C 

    });   
});​ 

Option A mir geben, was ich erwarte, eine Objektdatei. Allerdings Option B einfach gibt mir den Namen der hochgeladenen Datei, und (soweit ich das beurteilen kann) nicht die Datei selbst.

Option C zeigt, dass files nicht definiert ist.

Was ist das Jquery-Äquivalent von input.files?

Hinweis: Ich habe nichts dagegen, natives JavaScript zu verwenden; Aber da ich JQuery für den Rest dieses Projekts verwende, würde ich es lieber hier verwenden, wenn möglich.

Answer 1

Sie müssen auf das Element zugreifen. Versuchen:

file = $("#fileInput")[0].files[0]; 
alert(file); //C 

oder (danke Jack)

file = $("#fileInput").prop('files')[0]; 
alert(file); 

Fiddle

Answer 2

$(function() { 
    $("#cmdSubmit").bind("click", function() { 
     alert(this.files); 
    });   
});​ 

Answer 3

jQuery nicht einen Wrapper für die API-Dateien bietet. Es gibt also keinen jQuery-Stil, der dafür geeignet ist, zumindest nicht im jQuery-Core.

Ihre Optionen:

• Stick mit Option A
• Warten auf jQuery schließen solche ein Wrapper (sie könnten nicht)
• eine Erweiterung von jemand anderem geschrieben finden (falls vorhanden)
• schreiben eine Erweiterung selbst

Answer 4

Versuchen Sie den Code unten

var file = $("#fileInput").get(0).files[0]; 
alert(file); 

Danke