Wählen und Anzeigen von Bildern mit FileReader

Question

Hier ist mein Problem, ich habe diesen kleinen Code img anzuzeigen, dass ich LIVE hochladen ohne Neuladen, aber es funktioniert nur mit einem IMG, weil readURL(input) hat keine Klasse und funktioniert direkt von noname-input, und wenn ich eine Klasse hinzufügen readURL(input.joint), es fällt Fehler! Hier ist mein Code:

<input class="joint" type='file' id="imgInp" /> 
    <img style="width:45px" id="blah" src="#" alt="your image" /> 


<script type="text/javascript"> 
function readURL(input) { 

    if (input.filers && input.files[0]) { 
     var reader = new FileReader(); 

     reader.onload = function (e) { 
      $('#blah').attr('src', e.target.result); 
     } 

     reader.readAsDataURL(input.files[0]); 
    } 
} 

$("#imgInp").change(function(){ 
    readURL(this); 
}); 
</script> 

Ich brauche ID oder Klasse auf diese jQuery-Funktion hinzufügen, um es zu jedem Eingang einzigartig zu machen.

Was ich versuche zu tun:

<input class="joint" type='file' id="imgInp" /> 
     <img style="width:45px" id="blah" src="#" alt="your image" /> 


    <script type="text/javascript"> 
    function readURL(input.joint) { 

     if (input.joint.filers && input.joint.files[0]) { 
      var reader = new FileReader(); 

      reader.onload = function (e) { 
       $('#blah').attr('src', e.target.result); 
      } 

      reader.readAsDataURL(input.joint.files[0]); 
     } 
    } 

    $("#imgInp").change(function(){ 
     readURL(this); 
    }); 
    </script> 


<input class="file2" type='file' id="imgInp" /> 
     <img style="width:45px" id="blah" src="#" alt="your image" /> 


    <script type="text/javascript"> 
    function readURL(input.file2) { 

     if (input.file2.filers && input.file2.files[0]) { 
      var reader = new FileReader(); 

      reader.onload = function (e) { 
       $('#blah').attr('src', e.target.result); 
      } 

      reader.readAsDataURL(input.file2.files[0]); 
     } 
    } 

    $("#imgInp").change(function(){ 
     readURL(this); 
    }); 
    </script> 

Answer 1

Sie haben doppelte IDs überall (imgInp und blah), so dass die Wähler nur die ersten wählen, schließlich ist Ihre Veranstaltung gebunden und nur das erste Eingabefeld und die Auswahl von $('#blah'). Sie müssen das relative Bild in Bezug auf die Eingabe auswählen. Sie müssen das Skript nicht auch duplizieren. Wählen Sie den nächsten Bild-Tag in Bezug auf den Eingang wie $(input).next('img').attr('src', e.target.result);

So versuchen:

function readURL(input) { 

    if (input.files && input.files[0]) { 
     var reader = new FileReader(); 

     reader.onload = function (e) { 
      $(input).next('img').attr('src', e.target.result); 
     } 

     reader.readAsDataURL(input.files[0]); 
    } 
} 


$(function(){ 
    $(".upld").change(function() { //set up a common class 
     readURL(this); 
    }); 
}); 

Fiddle

Answer 2

Ihr Code funktioniert für mich richtig, wenn ich die Tippfehler beheben:

if (input.filers && input.files[0]) { 
      ^^^^^^ 
if (input.files && input.files[0]) { 

Hier ist das Beispiel: http://jsfiddle.net/s6ttw/

-Update:

Wenn yo Sie möchten, dass es funktioniert, wie Sie erwarten, dass Sie Klassen statt IDs verwenden müssen.

Hier ist ein besseres Beispiel, was Sie fragen nach: http://jsfiddle.net/s6ttw/1/

Answer 3

Ok, die Tatsache, dass Sie versuchen, eine Klasse zu einem Funktionsargument mit Punkt hinzufügen Notation zeigt, dass Sie mehr darüber lernen müssen, wie Javascript funktioniert, als in einer einfachen StackOverflow-Antwort erklärt werden kann, aber lassen Sie es mich versuchen:

• input in readURL(input) ist ein Argumentname, ähnlich einem Variablennamen, so dass Sie es in keiner Weise erweitern können. Es ist ein Verweis auf was auch immer Sie übergeben, wenn Sie readURL aufrufen, in diesem Fall, wenn Sie auf das Ende Ihres Codes schauen, ist es ein Verweis auf this. this bezieht sich auf die Elemente, auf die der von Ihnen übergebene jQuery-Selektor verweist: "#imgInp".

Also, wenn Sie die .joint Klasse stattdessen verwenden möchten, nur dass als Selektor jQuery passieren in:

$(".joint").change(function(){ 
    readURL(this); 
}); 

• jedoch vorausgesetzt, Sie mehrere haben .joint Elemente, Ihre readURL Funktion wird nicht länger arbeiten korrekt, weil es derzeit nur die src von #blah ändern soll. Was Sie tun müssen, ist die src der entsprechenden Elemente img zu ändern.

Also, wenn Sie einige HTML wie folgt hatte:

<input class="joint" type='file' /> 
<img class="joint-img" style="width:45px" src="#" alt="your image" /> 

<input class="joint" type='file' /> 
<img class="joint-img" style="width:45px" src="#" alt="your image" /> 

<input class="joint" type='file' /> 
<img class="joint-img" style="width:45px" src="#" alt="your image" /> 

Sie könnten Ihre Ihre readURL Funktion, nachdem alle Elemente platzieren und die reader.onload Abschnitt ändern wie folgt:

function readURL(input) { 
    if (input.files && input.files[0]) { 
     var reader = new FileReader(); 

     reader.onload = function (e) { 
      $(input).next('.joint-img').attr('src', e.target.result); 
     } 

     reader.readAsDataURL(input.files[0]); 
    } 
} 

$(".joint").change(function(){ 
    readURL(this); 
});