Question

$(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 + ")");
        }
    }
});

以下是上述代码http://jsfiddle.net/riteshkhadka/K5Gag/3/的jsfiddle链接该代码适用于连续上传，但是当用户在第一，第二，第三等插入图像后在中间输入框中上传图像时，它会失败。如何找到当前输入类型的当前div？

Answer 1

当您使用$(".imagePreview").last()时，您的代码将始终修改最后一个imagePreview元素。 我试图在代码中解释插入的注释

$(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 + ")");
        }
    }
});

DEMO

如何在更改事件上找到输入框旁边的div？

1 个答案: