Jquery 如何在更改事件中找到输入框旁边的div？ $（document.body）.on（“更改”，“输入[type=file]”，函数（）{ if（$（this）.next（“div”）.hasClass（'imagePreview'））{ $（this.next（“div”）.remove（）； } $（本）。在（''）之后； var files=！！this.files？this.files:[]； 如果（！files.length | | |！window.FileReader）返回；//未选择任何文件，或不支持FileReader 如果（/^image/.test（文件[0].type））{//仅图像文件 var reader=new FileReader（）；//FileReader的实例 reader.readAsDataURL（文件[0]）；//读取本地文件 reader.onloadend=函数（）{//将图像数据设置为div的背景 //$（“.imagePreview”）.css（“背景图像”、“url（“+this.result+”））； $（“.imagePreview”）.last（）.css（“背景图像”、“url（“+this.result+”））； } } });

下面是上面代码的JSFIDLE链接 该代码适用于连续上传，但用户在插入第一、第二、第三等图像后在中间输入框上传图像失败。 如何找到当前输入类型的当前div？

当您使用

$（“.imagePreview”）。last（）

因此您的代码将始终修改最后的

imagePreview

元素。我试图解释代码中插入的注释

$（document.body）.on（“更改”，“输入[type=file]”，函数（）{
var imagePreview=$（this.parent（）.find（“div.imagePreview”）；//在parent中查找imagePreview
如果（imagePreview.length）{//检查元素存在
imagePreview.remove（）；//如果存在，请删除
}
$（this）.after（“”）；//插入元素
imagePreview=$（this.parent（）.find（“div.imagePreview”）；//再次参考元素
var files=！！this.files？this.files:[]；
如果（！files.length | | |！window.FileReader）返回；//未选择任何文件，或不支持FileReader
if（/^image/.test（文件[0].type））{
var reader=new FileReader（）；
reader.readAsDataURL（文件[0]）；
reader.onloadend=函数（）{
css（“背景图像”，“url”（+this.result+））；
}
}
});

---

谢谢非常有效。我之前曾尝试分配变量，但失败。再次感谢

$(document.body).on("change", 'input[type=file]', function () {
    if($(this).next("div").hasClass('imagePreview')) {
        $(this).next("div").remove();
    }
    $(this).after('<div class="imagePreview"></div>');
    var files = !!this.files ? this.files : [];
    if(!files.length || !window.FileReader) return; // no file selected, or no FileReader support
    if(/^image/.test(files[0].type)) { // only image file
        var reader = new FileReader(); // instance of the FileReader
        reader.readAsDataURL(files[0]); // read the local file
        reader.onloadend = function () { // set image data as background of div
            //$(".imagePreview").css("background-image", "url("+this.result+")");
            $(".imagePreview").last().css("background-image", "url(" + this.result + ")");
        }
    }
});

$(document.body).on("change", 'input[type=file]', function () {
    var imagePreview = $(this).parent().find("div.imagePreview"); //Find the imagePreview in parent
    if (imagePreview.length) { //Check element exists
        imagePreview.remove(); //If exists remove that
    }
    $(this).after('<div class="imagePreview"></div>'); //insert element
    imagePreview = $(this).parent().find("div.imagePreview"); //again refer to element
    var files = !! this.files ? this.files : [];
    if (!files.length || !window.FileReader) return; // no file selected, or no FileReader support

    if (/^image/.test(files[0].type)) {
        var reader = new FileReader();
        reader.readAsDataURL(files[0]);
        reader.onloadend = function () {
            imagePreview.css("background-image", "url(" + this.result + ")");
        }
    }
});