div backgroundImage withd input result

Question

I'm using this tech : link to get images from local clients, i don't want save it on my server. Can i (in javascript) set a div backgroundImage width this image ? Now this is my code :

var input9I1 = document.createElement("input");
                            input9I1.id = "input9I1";
                            input9I1.type = "file";
                            input9I1.name = "files[]";
                            input9I1.accept = "image/*";
                            input9I1.addEventListener('change', handleFileSelect, false);
                            td20I1.appendChild(input9I1);

So it was the creation of the input and it work fine. Now the function :

function handleFileSelect(evt){
imgageATraiter = evt.target.files[0];

console.log(imgageATraiter.name);
console.log(imgageATraiter.type);
console.log(imgageATraiter.size);
console.log(imgageATraiter.lastModifiedDate);
console.log(imgageATraiter.lastModifiedDate.toLocaleDateString());

document.getElementById('boite5I1').style.backgroundImage = imgageATraiter.name;}

So what i want is how can i modify the "boite5I1" 's background with my image ? Is it possible ? Thanks to read and have a good day :D

read: http://stackoverflow.com/questions/16312930/how-to-preview-an-uploaded-image-as-the-background-image-of-a-div — nicael, Mar 01 '15 at 10:53
Tryed : document.getElementById('boite5I1').style.backgroundImage = "url('http://127.0.01/"+imgageATraiter.name+"')"; and document.getElementById('boite5I1').style.backgroundImage = "url('"+imgageATraiter.name+"')"; Don't work too. — PixelWorld, Mar 01 '15 at 10:54

score 1 · Answer 1 · answered Mar 01 '15 at 11:03

You should try below code in handleFileSelect function.

if (imgageATraiter) {
        var reader = new FileReader();
        reader.onload = function (e) {
            document.getElementById('boite5I1')
                .attr('src', e.target.result)
                .width(50)
                .height(50);
        };
        reader.readAsDataURL(imgageATraiter );
    }

score 0 · Answer 2 · edited May 23 '17 at 10:26

0

Thanks nicael the answer is :

function handleFileSelect(evt){
imgageATraiter = evt.target.files[0];
var reader = new FileReader();
reader.onload = function (e) {
    $('#boite5I1').css('background', 'transparent url('+e.target.result +') left top no-repeat');
}
reader.readAsDataURL(evt.target.files[0]);}

Thanks so much and have a good day :D

edited May 23 '17 at 10:26

Community

1
1

answered Mar 01 '15 at 11:01

PixelWorld

11
1

div backgroundImage withd input result

2 Answers2