Как просмотреть несколько входов ⇐ Jquery

[Anonymous]

Я хочу просмотреть изображения, которые пользователь собирается загрузить. Теперь я знаю, что мой код работает для одного ввода и одного изображения. Как только я добавляю еще одну пару входных данных и изображения, такую ​​же, как та, которая работала, изображения для предварительного просмотра не становится...
Как я могу добавить больше входных данных, каждый со своими собственными изображение для предварительного просмотра этого конкретного ввода?
Мой код выглядит следующим образом:
HTML:

Код: Выделить всё

и JavaScript:

Код: Выделить всё

function previewFile(){
var preview = document.querySelector('img');
var file    = document.querySelector('input[type=file]').files[0];
var reader  = new FileReader();

reader.onloadend = function () {
preview.src = reader.result;
}

if (file) {
reader.readAsDataURL(file);
}
else {
preview.src = "";
}
}

Я думаю, что функции, которую я хочу выбрать, необходимо указать переменную Var, но я совершенно новичок в Js, так что, возможно, вы сможете мне помочь!
Спасибо!
Изменить:
Я не хочу иметь «несколько "атрибут в моем входном теге. Я создал несколько элементов div, каждый с невидимым входным тегом и изображением, которое накладывается с абсолютной позицией. Таким образом, когда пользователь щелкает элемент div, он может выбрать изображение, которое затем заполняет весь элемент управления.
Все работает нормально для одного элемента управления, но мне нужно еще 11, каждый из которых работает отдельно, чтобы пользователь мог управлять порядком своих изображений, которые он собирается загрузить.
Итак, что мне нужно сделать, чтобы каждый из 12 тегов загрузки работал отдельно со своим собственным изображением предварительного просмотра? ?

Подробнее здесь: https://stackoverflow.com/questions/390 ... ple-inputs