Как найти div рядом с полем ввода при изменении события?

Question

Как найти div рядом с полем ввода при изменении события?

0

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

Вот ссылка jsfiddle для приведенного выше кода. Http://jsfiddle.net/riteshkhadka/K5Gag/3/ Этот код отлично подходит для непрерывной загрузки, но он не работает, когда пользователь загружает изображение в поле среднего ввода после вставки изображения в первый, второй, третий и т.д. Как найти текущий div для текущего типа ввода?

ritesh khadka 02 май 2014, в 12:40

Источник

Теги:

jquery

1 ответ

Ещё вопросы

Satpal · Accepted Answer · 2014-05-02T09-02-00.000Z

Поскольку вы используете $(".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

Спасибо, работает как очарование .. Я пытался ранее присвоить переменную, но мне не удалось .. Спасибо еще раз