Hochladen und Vorschaubild mit Javascript

Question

Ich versuche, ein Foto hochzuladen und in einem zu zeigen, aber es funktioniert nicht. Ich arbeite mit Python und Django Framework und die Formulare generieren automatisch so viel wie der Benutzer benötigt. Meine Javascript-Codes sind von Here

hier ist meine Codes, JavaScript und auch html:

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

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

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

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

<form id="form1" runat="server"> 
 
    <div name="imageholder" class="row tm-image-holder"> 
 
     <div class="col-md-12" style="text-align: center"> 
 
      <img id="myimg" src="#" style="height: 200px;text-align: center;"> 
 
     </div> 
 
    </div> 
 
    <input id="photoinput" type="file" name="photo" href="#" 
 
    class="btn btn-block btn-lg btn-primary inout-margin mybut"> 
 
    <input id="name" name="name0" type="text" class="add-input input-margin" 
 
     placeholder="Name, Mohammad, ... *"> 
 
    <input id="job" name="job0" type="text" class="add-input" 
 
     placeholder="Job, Developer, Designer, ... *"> 
 
    <textarea id="explain" name="explain0" class="add-textarea input-margin" rows="4" 
 
      placeholder="Explain this member in 2 to 4 lines *"></textarea> 
 

 
</form>

Answer 1

Zuerst Sie müssen sicherstellen, dass Sie jQuery, da diese auf Ihrer Seite verwiesen Code benutzt es.

Sekunden müssen Sie sicherstellen, dass Sie tatsächlich das Ereignis an das Element binden, so dass Sie warten müssen, bis es da ist. Sie können dies tun, indem Sie das Skript nach dem Element platzieren oder es als Dokument bereit aufrufen oder es beim Laden des Fensters aufrufen.

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

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

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

 
$(function() { //document ready call 
 
    $("#photoinput").change(function(){ 
 
     readURL(this); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<form id="form1" runat="server"> 
 
    <div name="imageholder" class="row tm-image-holder"> 
 
     <div class="col-md-12" style="text-align: center"> 
 
      <img id="myimg" src="#" style="height: 200px;text-align: center;"> 
 
     </div> 
 
    </div> 
 
    <input id="photoinput" type="file" name="photo" href="#" 
 
    class="btn btn-block btn-lg btn-primary inout-margin mybut"> 
 
    <input id="name" name="name0" type="text" class="add-input input-margin" 
 
     placeholder="Name, Mohammad, ... *"> 
 
    <input id="job" name="job0" type="text" class="add-input" 
 
     placeholder="Job, Developer, Designer, ... *"> 
 
    <textarea id="explain" name="explain0" class="add-textarea input-margin" rows="4" 
 
      placeholder="Explain this member in 2 to 4 lines *"></textarea> 
 

 
</form>