javascript - javascriptでファイル入力を取得しますか?

Question

HTMLに次の行があります：

<input class="input-file" type="file" id="input-recipe-pic"> 

ユーザーがアップロードするファイルを選択して送信ボタンを押した後、上記のファイル入力タグから選択したファイルを取得しようとしています。ページのリロードを回避するために後で AJAX で送信できるように、javascript でファイルを取得するにはどうすればよいですか?

Answer 1

これは、HTML5ファイルAPIが登場するまで、iframeハックなしでは不可能でした。HTML5ファイルAPIを使用すると、次のことができます。

$(".input-file").change(function() {
    var file = this.files[0];
    var reader = new FileReader();
    reader.onload = function() {
        alert(reader.result);
    };
    reader.readAsText(file);
});

これは、ChromeなどのHTML5ファイルAPIをサポートするブラウザでのみ機能することに注意してください。

Answer 2

http://blueimp.github.com/jQuery-File-Upload/など、使用できるアップロード プラグインは多数あります。

ソースコードに移動して、それがどのように行われたかを確認できます。

<input type="file" id="myFile" />
$('#myFile').bind('change', function() {
    alert(this.files[0].size);
});