I'm trying to use bootstrap-fileupload.js:

.html#fileupload

But I'm not sure how to use the uploaded image and the remove option. For example: I want to replace an image with the new uploaded one.

The image to be replaced:

<img class="background" src="img/background.png" style="position: absolute; top: 190px; left: 138px;"/>

From my understanding, something like this should be done with JQuery:

$('img.background').attr('src','different/path/to/my/image.jpg');

But in my case, it's an uploaded picture - How do I get its path? And how do I use the remove file option? I assume it's something like this?

// if the file is removed
$('img.background').attr('src','img/background.png');

I'm trying to use bootstrap-fileupload.js:

http://jasny.github.io/bootstrap/javascript.html#fileupload

But I'm not sure how to use the uploaded image and the remove option. For example: I want to replace an image with the new uploaded one.

The image to be replaced:

<img class="background" src="img/background.png" style="position: absolute; top: 190px; left: 138px;"/>

From my understanding, something like this should be done with JQuery:

$('img.background').attr('src','different/path/to/my/image.jpg');

But in my case, it's an uploaded picture - How do I get its path? And how do I use the remove file option? I assume it's something like this?

// if the file is removed
$('img.background').attr('src','img/background.png');

• javascript
• jquery
• html

• You need to know the path where the uploaded file is stored in relation to the web root. – Diodeus - James MacFarlane Commented Sep 9, 2013 at 20:28

1 Answer 1

DEMO HERE

EDIT: I added a button remove uploaded file as you want,if you don't like show/hide effect just delete slow , Image is shown only on upload:

$('#blah').hide();
$('#remove').hide();  
function readURL(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();

            reader.onload = function (e) {
                $('#blah').attr('src', e.target.result);
            }

            reader.readAsDataURL(input.files[0]);
        }
    }

    $("#imgInp").change(function(){
        if( $('#imgInp').val()!=""){

            $('#remove').show();
            $('#blah').show('slow');
      }
        else{ $('#remove').hide();$('#blah').hide('slow');}
        readURL(this);
    });


    $('#remove').click(function(){
          $('#imgInp').val('');
          $(this).hide();
          $('#blah').hide('slow');
 $('#blah').attr('src','http://upload.wikimedia/wikipedia/mons/thumb/4/40/No_pub.svg/150px-No_pub.svg.png');
});

This s an example made by someone( Not me :) will help you i suppose , see the code below:

function readPath(input) {

    if (input.files && input.files[0]) {
        var reader = new FileReader();

        reader.onload = function (e) {
            $('#blah').attr('src', e.target.result);
        }

        reader.readAsDataURL(input.files[0]);
    }
}

$("#imgInp").change(function(){
    readPath(this);
});

HTML Code:

<form id="form1">
    <input type='file' id="imgInp" />
    <img id="blah" src="#" alt="your image" />
</form>