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

Question

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

Как добавить дополнительные входы, каждый со своим собственным изображением, чтобы просмотреть этот конкретный вход?

Мой код выглядит следующим образом:

HTML:

<input type="file" accept="image/*" onchange="previewFile()"> 
<img id="output1" height="100px"> 

и 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 = ""; 
     } 
    } 

Я думаю, что вар должен быть уделено функции, выход я хочу выбрать, но я совершенно не знаком с Js, поэтому, возможно, вы можете мне помочь!

Спасибо!

Edit:

Я не хочу иметь «несколько» атрибут в моем входном теге. Я создал несколько div, каждый из которых имеет невидимый входной тег и изображение, которое накладывается на абсолютную позицию. Поэтому, когда пользователь нажимает на div, он может выбрать изображение, которое затем заполняет весь div.

Все работает отлично для одного div, но мне нужно еще 11, каждый работает отдельно, так что пользователь может управлять порядком своих фотографий, которые он собирается загрузить.

Итак, что мне нужно сделать, чтобы каждый из 12 тегов загрузки работал отдельно со своим собственным изображением предварительного просмотра?

Answer 1

Edit:

Я не хочу иметь "несколько" атрибут в моем входном теге. Я создал несколько divs, каждый из которых имеет невидимый тег ввода и изображение, которое накладывается с абсолютным положением. Поэтому, когда пользователь нажимает на div, он может выбрать изображение, которое затем заполняет весь div.

Все работает отлично для одного div, но мне нужно еще 11, каждый рабочий отдельно, так что пользователь может управлять заказом своих фотографий, он собирается загрузить.

Итак, что мне нужно сделать, чтобы каждый из 12 тегов загрузки работал отдельно со своим предварительным изображением?

Element.id должно быть уникальным в document. Вы можете передать щелкнул элемент previewFile() вызова используйте .nextElementSibling выбрать Sibling <img> элемент

function previewFile(input) { 
 
    var preview = input.nextElementSibling; 
 
    var file = input.files[0]; 
 
    var reader = new FileReader(); 
 

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

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

<div> 
 
    <input type="file" multiple accept="image/*" onchange="previewFile(this)"> 
 
    <img height="100px" /> 
 
</div> 
 
<div> 
 
    <input type="file" multiple accept="image/*" onchange="previewFile(this)"> 
 
    <img height="100px" /> 
 
</div> 
 
<div> 
 
    <input type="file" multiple accept="image/*" onchange="previewFile(this)"> 
 
    <img height="100px" /> 
 
</div> 
 
<div> 
 
    <input type="file" multiple accept="image/*" onchange="previewFile(this)"> 
 
    <img height="100px" /> 
 
</div> 
 
<div> 
 
    <input type="file" multiple accept="image/*" onchange="previewFile(this)"> 
 
    <img height="100px" /> 
 
</div> 
 
<div> 
 
    <input type="file" multiple accept="image/*" onchange="previewFile(this)"> 
 
    <img height="100px" /> 
 
</div> 
 
<div> 
 
    <input type="file" multiple accept="image/*" onchange="previewFile(this)"> 
 
    <img height="100px" /> 
 
</div> 
 
<div> 
 
    <input type="file" multiple accept="image/*" onchange="previewFile(this)"> 
 
    <img height="100px" /> 
 
</div> 
 
<div> 
 
    <input type="file" multiple accept="image/*" onchange="previewFile(this)"> 
 
    <img height="100px" /> 
 
</div> 
 
<div> 
 
    <input type="file" multiple accept="image/*" onchange="previewFile(this)"> 
 
    <img height="100px" /> 
 
</div> 
 
<div> 
 
    <input type="file" multiple accept="image/*" onchange="previewFile(this)"> 
 
    <img height="100px" /> 
 
</div> 
 
<div> 
 
    <input type="file" multiple accept="image/*" onchange="previewFile(this)"> 
 
    <img height="100px" /> 
 
</div>

Answer 2

window.URL = window.URL || window.webkitURL; 
 
var elBrowse = document.getElementById("browse"), 
 
    elPreview = document.getElementById("preview"), 
 
    useBlob = false && window.URL; // `true` to use Blob instead of Data-URL 
 

 
function readImage (file) { 
 
    var reader = new FileReader(); 
 
    reader.addEventListener("load", function() { 
 
    var image = new Image(); 
 
    image.addEventListener("load", function() { 
 
     var imageInfo = file.name +' '+ 
 
         image.width +'×'+ 
 
         image.height +' '+ 
 
         file.type +' '+ 
 
         Math.round(file.size/1024) +'KB'; 
 
     elPreview.appendChild(this); 
 
     elPreview.insertAdjacentHTML("beforeend", imageInfo +'<br>'); 
 
    }); 
 
    image.src = useBlob ? window.URL.createObjectURL(file) : reader.result; 
 
    if (useBlob) { 
 
     window.URL.revokeObjectURL(file); // Free memory 
 
    } 
 
    }); 
 
    reader.readAsDataURL(file); 
 
} 
 

 
elBrowse.addEventListener("change", function() { 
 
    var files = this.files; 
 
    var errors = ""; 
 
    if (!files) { 
 
    errors += "File upload not supported by your browser."; 
 
    } 
 
    if (files && files[0]) { 
 
    for(var i=0; i<files.length; i++) { 
 
     var file = files[i]; 
 
     if ((/\.(png|jpeg|jpg|gif)$/i).test(file.name)) { 
 
     readImage(file); 
 
     } else { 
 
     errors += file.name +" Unsupported Image extension\n"; 
 
     } 
 
    } 
 
    } 
 
    if (errors) { 
 
    alert(errors); 
 
    } 
 
});

#preview img{height:100px;} \t

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<input id="browse" type="file" multiple /> 
 
<div id="preview"></div>