JavaScriptを使って画像をアップロードしてプレビューする

Question

写真をアップロードして<img>に表示しようとしていますが、動作しません。 私は、PythonとDjangoフレームワークと、ユーザーが必要とするだけ自動的に生成されるフォームを扱っています。 私のjavascriptのコードはここにHere

からです私のコード、JavaScriptともhtmlです：あなたはそれ以来、自分のページにjQueryのを参照していることを確認する必要があり

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

ファーストコードがそれを使用しています。

秒実際にエレメントにイベントをバインドする必要があるため、エレメントが存在するのを待つ必要があります。要素の後ろにスクリプトを置くか、ドキュメントをすぐに呼び出せるようにするか、ウィンドウロード時に呼び出すことで可能です。

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>