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
Post a Comment