使用javascript获取文件输入

Get file input with javascript?

本文关键字：输入 文件 获取 javascript 使用      更新时间：2023-09-26

我在HTML:中有这一行

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

在用户选择要上传的文件并按下提交按钮后，我将尝试从上面的文件输入标记中获取他们选择的文件。如何使用javascript获取文件，以便以后通过AJAX发送，以避免页面重新加载？

在HTML5 File 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);
});

请注意，这只适用于支持HTML5文件API的浏览器，如Chrome。

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

您可以导航到源代码并查看它是如何完成的。

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