So zeigen Sie eine Vorschau mehrerer Eingaben an

Question

Ich möchte eine Vorschau von Bildern anzeigen, die der Benutzer hochladen möchte. Jetzt weiß ich, dass mein Code für eine Eingabe und ein Bild funktioniert. Sobald ich ein weiteres Eingabe- und Bildpaar hinzufüge, ist das gleiche Bild wie für die Vorschau.

Wie kann ich weitere Eingaben mit jeweils eigenen Bildern hinzufügen, um eine Vorschau für diese Eingabe zu erhalten?

Mein Code sieht wie folgt aus:

HTML:

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

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

Ich denke, dass ein Var an die Funktion gegeben werden muss, die Ausgabe Ich möchte zu wählen, aber ich bin total neu in Js, also vielleicht kannst du mir helfen!

Danke!

Edit:

Ich will nicht ein "multiple" -Attribut in meinem Input-Tag haben. Ich habe mehrere Divs mit jeweils einem nicht sichtbaren Eingabe-Tag und einem Bild erstellt, das mit der absoluten Position überlagert ist. Wenn der Benutzer also auf das Div klickt, kann er ein Bild auswählen, das dann das gesamte Div auffüllt.

Es funktioniert alles gut für ein div, aber ich brauche 11 mehr, jeder arbeitet separat, so dass der Benutzer die Reihenfolge seiner Bilder verwalten kann, die er gerade hochladen wird.

Also, was muss ich tun, damit jeder der 12 Upload-Tags separat mit einem eigenen Vorschaubild funktioniert?

Answer 1

Edit:

Ich will nicht ein "multiple" -Attribut in meinem Input-Tag haben. Ich erstellte mehrere Divs, jedes mit einem nicht sichtbaren Input-Tag und ein Bild, das überlagert mit absoluter Position. Wenn also der Benutzer auf das div klickt, kann er ein Bild auswählen, das dann das ganze div auffüllt.

Es funktioniert alles gut für ein div, aber ich brauche 11 mehr, jeder arbeitet separat, so dass der Benutzer die Reihenfolge seiner Bilder verwalten kann er ist zum Hochladen.

Also was muss ich tun, um jedes der 12 Upload-Tags separat mit einem eigenen Vorschaubild zu bearbeiten? ?

Element.id sollte in document eindeutig sein. Sie können das geklickt Element previewFile() Anruf übergeben, verwenden .nextElementSibling Geschwister wählen <img> Element

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>