用javascript獲取文件輸入？

Question

我這一行HTML：

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

在用戶選擇要上傳的文件，並按下提交按鈕，我試圖讓他們從上面的文件輸入標籤選擇的文件。我如何使用JavaScript獲取文件，以便稍後通過AJAX發送它以避免頁面重新加載？

Answer 1

這是不可能的，沒有iframe hack直到出現HTML5 File API。使用HTML5文件API，你可以做

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

注意，這隻會在支持HTML5文件API的瀏覽器，如Chrome瀏覽器。

Answer 2

有很多上傳插件，您可以使用例如http://blueimp.github.com/jQuery-File-Upload/

可以導航到源代碼，看看它是如何做。

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