我在 HTML 中有这一行:
<input class="input-file" type="file" id="input-recipe-pic">
在用户选择要上传的文件并按下提交按钮后,我试图从上面的文件输入标签中获取他们选择的文件。如何使用 javascript 获取文件,以便稍后通过 AJAX 发送它以避免页面重新加载?
我在 HTML 中有这一行:
<input class="input-file" type="file" id="input-recipe-pic">
在用户选择要上传的文件并按下提交按钮后,我试图从上面的文件输入标签中获取他们选择的文件。如何使用 javascript 获取文件,以便稍后通过 AJAX 发送它以避免页面重新加载?
在 HTML5 File API 出现之前,如果没有 iframe hack,这是不可能的。使用 HTML5 File 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);
});