Wie man jquery multiple image preview macht

Es ist eine einzelne Bild-Upload-Vorschau-Funktion in jquery. Ich möchte in den verschiedenen Funktionen wie jeder Box separat ändern, um Fotos hochzuladen, die Sie in dem HTML-Skript unten sehen können.Wie man jquery multiple image preview macht

<!DOCTYPE html> 
<html> 
<head> 
<title></title> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> 
<script> 

function imagepreview(input){ 
    if(input.files && input.files[0]){ 
     var filerd = new FileReader(); 
     filerd.onload=function(e){ 
      $('#imgpreview').attr('src', e.target.result); 
     }; 
     filerd.readAsDataURL(input.files[0]); 
    } 
    } 

</script> 
<style> 
body{ 
font-family:arial; 
} 
.wrap{ 
border:0px solid; 
width:40%; 
margin:10px auto; 
} 

table, th, td { 
    border: 1px solid black; 
    border-collapse: collapse; 
    text-align:center; 
    padding:10px; 
} 
#idupload{ 
    display:none; 
} 
.input-label{ 
    background-color:#009688; 
    color:#fff; 
    padding:5px 15px; 
} 
</style> 
</head> 
<body> 

<div class="wrap"> 
<table> 
    <tr> 
    <th><img id="imgpreview" src="" width="100" height="100"></th> 
    <th><img id="imgpreview" src="" width="100" height="100"></th> 
    <th><img id="imgpreview" src="" width="100" height="100"></th> 
    </tr> 
    <tr> 
    <td><label for="idupload" class="input-label"><i class="fa fa-arrow-up"></i>upload</label><input type="file" id="idupload" onchange="imagepreview(this);" /></td> 
    <td><label for="idupload" class="input-label"><i class="fa fa-arrow-up"></i>upload</label><input type="file" id="idupload" onchange="imagepreview(this);" /></td> 
    <td><label for="idupload" class="input-label"><i class="fa fa-arrow-up"></i>upload</label><input type="file" id="idupload" onchange="imagepreview(this);" /></td> 
    </tr> 
</table> 
</div> 

</body> 
</html>

Quelle

2017-01-06 Farooq

Das Problem ist, dass Sie doppelt IDs hat, und die Funktion imagepreview() ist immer die gleiche ID mit dem Hochladen von Bildern zu aktualisieren. Um dies zu beheben, müssen Sie für jede Bildvorschau eine eindeutige ID festlegen und die entsprechende Bezeichnung in den Datei-Upload-Feldern angeben, damit eine eindeutige Datei-Upload-Box eine eindeutige Bildvorschau anzeigt.

Hier ist eine Demo. Ich gab sowohl den Vorschauen als auch den Uploads eine eindeutige ID, dann unter imagepreview() analysiere ich die ID der Upload Box ID und füge diese der ID der Bildvorschau hinzu, die auf der Seite aktualisiert wird. http://codepen.io/anon/pen/apOyZB

Quelle

2017-01-07 00:11:05

@Farooq Sie wetten! –

kann ich dich auf fb hinzufügen? – Farooq

Ich möchte implementieren Bild Ereignis auf die gleiche Funktion löschen? – Farooq

Wie man jquery multiple image preview macht

Antwort

Verwandte Themen