javascript - Dynamically Generated FileUpload and Image Preview -

i dynamically generated table rows fileupload , default image using jquery.

i want when image picked using fileupload on particular row default no-image pictured should replaced selected image.

i tried using below jquery, seems work single fileupload , image.

 function readurl(input) {      if (input.files && input.files[0]) {         var reader = new filereader();          reader.onload = function (e) {             $('#img-tag').attr('src', e.target.result);         }          reader.readasdataurl(input.files[0]);     } }   $("#file").change(function () {     readurl(this); }); 

html:

<table id="image" class="list">                             <thead>                                 <tr>                                     <td class="left">image</td>                                     <td class="right">sort order</td>                                     <td></td>                                 </tr>                             </thead>                              <tbody id="image-row">                                 <tr>                                     <td class="left">                                         <table>                                             <tr>                                                 <td>                                                     <img id="img-tag" src="@viewbag.imagelink" alt="no-image" />                                                 </td>                                             </tr>                                             <tr>                                                 <td>                                                     <input id="file" type="file" name="file" />                                                 </td>                                             </tr>                                         </table>                                      </td>                                     <td class="right">@html.textboxfor(x => x.image_sortorder)</td>                                     <td class="left"></td>                                 </tr>                             </tbody>                               <tfoot>                                 <tr>                                     <td colspan="2"></td>                                     <td class="left"><a onclick="addimage();" class="button">+</a></td>                                 </tr>                             </tfoot>                         </table> 

i have solved

change :

$("#file").change(function () {              debugger;             var img = $(this).closest('tr').prev("tr").find("img");              readurl(this,img);         }); 

and add new parameter in readurl function

function readurl(input,img) {           if (input.files && input.files[0]) {             var reader = new filereader();              reader.onload = function (e) {                 debugger;                  img.attr("src", e.target.result)             }              reader.readasdataurl(input.files[0]);         }     }