javascript - Preview image by its own id separately for each comment -


in commentary upload image system, browse image , display it. if browse image in comment, display others comment's display field. possible display browse image each comment separately own $id.

(n.b. comment field show/hide own $id, remove here use)

this work http://jsfiddle.net/er9e72ww/2/

and preview image script is:

//preview image $(".repfile").change(function(){     previewpic(this); });  function previewpic(input) {  if (input.files && input.files[0]) {     var reader = new filereader();     reader.onload = function (e) {         $(".preview_rep").attr('src', e.target.result);         $(".output_rep").show();         $(".replycom").focus();         $('#img').hide();     };     reader.readasdataurl(input.files[0]);  } } 

and php upload form:

<div align="left" id="show_img_upload_rep" class="show_img_upload_rep" style="padding-top:5px; display:none"> <div class="upfrmrep" >   <div class="output_rep" style="display:none;">   <img class="preview_rep" src="" alt="no image found"/>   </div>       <form action="uploadpostimg.php" class="upload_reply" method="post" enctype="multipart/form-data">       <label for="file" style="font-size:12px;font-weight:bold;">filename (max 200 kb) :  </label>       <input type="file" name="file" class="repfile" id="'.$id.'" value=""/>        <img class="loading" src="loader.gif" alt="" style="margin:5px;display:none;"/>       <input type="submit" class="upload_file" name="upload_btn" value="upload picture"/>       </form>    </div></div> 

now want use $id each preview below:

php

//preview want add '.$id.'   <div class="output_rep'.$id.'" style="display:none;">   <img class="preview_rep'.$id.'" src="" alt="no image found"/>   </div> 

script tried( maybe wrong) not working

//preview image $(".repfile").change(function(){     var id = $(this).attr('id').replace('','');     previewpic(this); });  function previewpic(input) {   if (input.files && input.files[0]) {     var reader = new filereader();     reader.onload = function (e) {         $(".preview_rep"+id).attr('src', e.target.result);         $(".output_rep"+id).show();         $(".replycom").focus();         $('#img').hide();     };     reader.readasdataurl(input.files[0]);   } } 

since passing element other function can id there. no need id in change handler.

remove:

var id = $(this).attr('id').replace('',''); 

change:

$(".preview_rep"+id).attr('src', e.target.result); $(".output_rep"+id).show(); 

to:

$(".preview_rep" + input.id).attr('src', e.target.result); $(".output_rep" + input.id).show(); 

Comments

Popular posts from this blog

matlab - "Contour not rendered for non-finite ZData" -

delphi - Indy UDP Read Contents of Adata -

javascript - Any ideas when Firefox is likely to implement lengthAdjust and textLength? -