jQuery 使用 $(this) 和 FileReader() 来定位结果
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13556812/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Using $(this) with FileReader() to target result
提问by Pollux Khafra
I'm trying to show an ajax preview of an image from a file input. Easy enough using FileReader() but I'm using it with a loop so I when it's time to place the result inside an image source, I need to use $(this) to target the loop item of the input. That doesn't even make sense to me so here we go.
我正在尝试显示来自文件输入的图像的 ajax 预览。使用 FileReader() 很容易，但我将它与循环一起使用，因此当需要将结果放入图像源时，我需要使用 $(this) 来定位输入的循环项。这对我来说甚至没有意义，所以我们开始吧。
We have a loop..
我们有一个循环..
<li>
<input type="file" class="image" />
<img src="" class="preview" />
</li>
<li>
<input type="file" class="image" />
<img src="" class="preview" />
</li>
<li>
<input type="file" class="image" />
<img src="" class="preview" />
</li>
So now lets say the second input is choosen and now I need to add the result from FileReader to it's image src. How am I targeting the second loop item and its content to do stuff?
所以现在假设选择了第二个输入，现在我需要将 FileReader 的结果添加到它的图像 src。我如何定位第二个循环项及其内容来做事？
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
// Here I need to use $(this) to target only the second list item's img.preview
$('.preview').attr('src', e.target.result);
};
reader.readAsDataURL(input.files[0]);
}
}
回答by Francis Gagnon
I had never worked with this API before. Interesting stuff.
我以前从未使用过这个 API。有趣的东西。
This version loops through all the file inputs and loads their preview images. The function is triggered by a button click.
此版本循环遍历所有文件输入并加载其预览图像。该功能由单击按钮触发。
$(function(){
$("#btnLoadPreviews").click(loadPreviews_click);
})
function loadPreviews_click(e) {
$(".image").each(function() {
var $input = $(this);
var inputFiles = this.files;
if(inputFiles == undefined || inputFiles.length == 0) return;
var inputFile = inputFiles[0];
var reader = new FileReader();
reader.onload = function(event) {
$input.next().attr("src", event.target.result);
};
reader.onerror = function(event) {
alert("I AM ERROR: " + event.target.error.code);
};
reader.readAsDataURL(inputFile);
});
}
If you prefer to have the preview image load as they are selected you could use this version instead.
如果您希望在选择时加载预览图像，则可以改用此版本。
$(function(){
$(".image").change(showPreviewImage_click);
})
function showPreviewImage_click(e) {
var $input = $(this);
var inputFiles = this.files;
if(inputFiles == undefined || inputFiles.length == 0) return;
var inputFile = inputFiles[0];
var reader = new FileReader();
reader.onload = function(event) {
$input.next().attr("src", event.target.result);
};
reader.onerror = function(event) {
alert("I AM ERROR: " + event.target.error.code);
};
reader.readAsDataURL(inputFile);
}
回答by Sarang
This is how I would do it. Assign the target to the reader object itself and use it later.
这就是我要做的。将目标分配给读取器对象本身并稍后使用。
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
// set where you want to attach the preview
reader.target_elem = $(input).parent().find('preview');
reader.onload = function (e) {
// Attach the preview
$(reader.target_elem).attr('src', e.target.result);
};
reader.readAsDataURL(input.files[0]);
}
}
