使用javascript上传和预览图像

Question

我正在尝试上传照片并在<img>显示，但它不起作用。 我正在使用Python和Django框架，并根据用户需要自动生成表格。 我的JavaScript代码来自这里

这是我的代码，javascript和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

首先，您需要确保页面上已引用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]); } } $(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>