jQuery file upload preview/remove image

Question

You can find the working file at jsfiddle

Image preview and remove function was working early, But I did some changes in the html code because of some libraries. So now image preview is not working because of parent class calling issue in Jquery. Please check the working code and help me to solve it. Im using multiple input with same name array. So I want to display the image in next div as I mentioned in the html code. I knew the problem is from jquery. But I couldn't fix it. Please help.

function readURL() {
     var $input = $(this);
     if (this.files && this.files[0]) {
        var reader = new FileReader();
        reader.onload = function (e) {
           reset($input.next('.delbtn'), true);
           $input.next('.portimg').attr('src', e.target.result).show();
           $input.after('<input type="button" class="delbtn removebtn" value="remove">');
        }
           reader.readAsDataURL(this.files[0]);
      }
    }
    $(".fileUpload").change(readURL);
    $("form").on('click', '.delbtn', function (e) {
        reset($(this));
    });

function reset(elm, prserveFileName) {
    if (elm && elm.length > 0) {
       var $input = elm;
       $input.next('.portimg').attr('src', '').hide();
       if (!prserveFileName) {
         $input.prev('.fileUpload').val("");
       }
         elm.remove();
       }
}

html code

<form> <!--working code but it not needed now.-->
  <div class="form-group hirehide is-empty is-fileinput width100">
    <div class=socialmediaside2>
        <input class=fileUpload accept="image/jpeg, image/jpg" name=profilepic type=file value="Choose a file"> 
        <img alt="your image" class=portimg src=#>
        <div class=input-group>
            <input class=form-control id=uploadre placeholder="Please select your profile picture" readonly>
            <span class="input-group-btn input-group-sm"><button class="btn btn-fab btn-fab-mini"type=button><i class=material-icons>attach_file</i></button></span>
        </div>
    </div>
</div> 
<!--below code is not working. I need this to be work-->
<div class="form-group hirehide is-empty is-fileinput width100">
    <div class=socialmediaside2>
        <input class=fileUpload accept="image/jpeg, image/jpg" name=profilepic type=file value="Choose a file">
        <div class=input-group>
            <input class=form-control id=uploadre placeholder="Please select your profile picture" readonly>
            <span class="input-group-btn input-group-sm"><button class="btn btn-fab btn-fab-mini"type=button><i class=material-icons>attach_file</i></button></span>
        </div>
    </div>
</div>
<div class=upload-demo>
    <div class=upload-demo-wrap><img alt="your image" class=portimg src=#></div>
</div>

I would recommend using URL.createObjectURL instead of using the FileReader — Endless
– Endless, Commented Nov 15, 2016 at 21:33
@Endless if you can please provide the jsfiddle of URL.createObjectURL — user7152572
– user7152572, Commented Nov 16, 2016 at 6:03
@Endless woow its very nice. Do you know how to convert this working code FileReader to URL.createObjectURL? — user7152572
– user7152572, Commented Nov 16, 2016 at 11:54

Alex · Accepted Answer · 2016-11-16 08:41:15Z

3

Please try this version:

HTML:

<form>
<div>
<div class="form-group hirehide is-empty is-fileinput width100">
    <div class=socialmediaside2>
        <input class=fileUpload accept="image/jpeg, image/jpg" name=profilepic[] type=file value="Choose a file">
        <div class=input-group>
            <input class=form-control id=uploadre placeholder="Please select your profile picture" readonly>
            <span class="input-group-btn input-group-sm"><button class="btn btn-fab btn-fab-mini"type=button><i class=material-icons>attach_file</i></button></span>
        </div>
    </div>
</div>
<div class=upload-demo>
    <div class=upload-demo-wrap><img alt="your image" class=portimg src=#></div>
</div>
</div>

<div>
<div class="form-group hirehide is-empty is-fileinput width100">
    <div class=socialmediaside2>
        <input class=fileUpload accept="image/jpeg, image/jpg" name=profilepic[] type=file value="Choose a file">
        <div class=input-group>
            <input class=form-control id=uploadre placeholder="Please select your profile picture" readonly>
            <span class="input-group-btn input-group-sm"><button class="btn btn-fab btn-fab-mini"type=button><i class=material-icons>attach_file</i></button></span>
        </div>
    </div>
</div>
<div class=upload-demo>
    <div class=upload-demo-wrap><img alt="your image" class=portimg src=#></div>
</div>
</div>

<div>
<div class="form-group hirehide is-empty is-fileinput width100">
    <div class=socialmediaside2>
        <input class=fileUpload accept="image/jpeg, image/jpg" name=profilepic[] type=file value="Choose a file">
        <div class=input-group>
            <input class=form-control id=uploadre placeholder="Please select your profile picture" readonly>
            <span class="input-group-btn input-group-sm"><button class="btn btn-fab btn-fab-mini"type=button><i class=material-icons>attach_file</i></button></span>
        </div>
    </div>
</div>
<div class=upload-demo>
    <div class=upload-demo-wrap><img alt="your image" class=portimg src=#></div>
</div>
</div>

</form>

JS:

function readURL() {
    var $input = $(this);
    var $newinput =  $(this).parent().parent().parent().find('.portimg ');
    if (this.files && this.files[0]) {
        var reader = new FileReader();
        reader.onload = function (e) {
            reset($newinput.next('.delbtn'), true);
            $newinput.attr('src', e.target.result).show();
            $newinput.after('<input type="button" class="delbtn removebtn" value="remove">');
        }
        reader.readAsDataURL(this.files[0]);
    }
}
$(".fileUpload").change(readURL);
$("form").on('click', '.delbtn', function (e) {
    reset($(this));
});

function reset(elm, prserveFileName) {
    if (elm && elm.length > 0) {
        var $input = elm;
        $input.prev('.portimg').attr('src', '').hide();
        if (!prserveFileName) {
            $($input).parent().parent().parent().find('input.fileUpload ').val("");
            //input.fileUpload and input#uploadre both need to empty values for particular div
        }
        elm.remove();
    }
}

JSFiddle: https://jsfiddle.net/hxwmL1px/4/

edited Nov 16, 2016 at 8:41

answered Nov 15, 2016 at 12:51

Alex

2,8054 gold badges32 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

user7152572 Over a year ago

it work only for single input. I have multiple inputs with same name array. So for that It's not supporting. Please help me to fix this issue.

user7152572 Over a year ago

Hi @Alex it also has a small issue like it can only work in different different form. I need to use those multiple inputs (with same name array) inside a form. Please check this jsfiddle and try to fix it. Thanks in advance. jsfiddle.net/hxwmL1px/1

Alex Over a year ago

In this case we need one additional <div> tag, please check my updated post above.

Alex Over a year ago

Glad to hear. Each block must be in different <div> to the script could distinguish them

user7152572 Over a year ago

Alex it has an small issue in removing. When I click remove button particular image get removed but also all input file become empty. Particular image and particular file input should become empty. Please check this code. jsfiddle.net/hxwmL1px/3

|

Pawan Lakhara · Accepted Answer · 2016-11-16 10:47:25Z

0

Just add the below html code. Check Working Demo now check updated link below in comments.

 <img alt="your image" class=portimg src=#>

edited Nov 16, 2016 at 10:47

answered Nov 15, 2016 at 12:29

Pawan Lakhara

1,1404 gold badges16 silver badges30 bronze badges

2 Comments

user7152572 Over a year ago

No. I need to display the image in next div. I want to display in below code. You need to change the JS file <div class=upload-demo> <div class=upload-demo-wrap><img alt="your image" class=portimg src=#></div> </div>

user7152572 Over a year ago

Pawan it has a small issue like it can only work in different form. It didn't support if i put two three input fields inside same form. jsfiddle.net/97dzkf70/30 But Alex helped me to fix that. This code is working fine jsfiddle.net/hxwmL1px/2

Collectives™ on Stack Overflow

jQuery file upload preview/remove image

2 Answers 2

7 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related