0

Hi i have a small problem can you help me please

html part

<input type="file" id="browse" name="browse" size=""  placeholder="Photo" checked="checked" class="upload"/>
<input type="button" onclick="javascript:onbrowse()"  class="unknown" value="test"/>
<div class="qaq"></div>

css part

.unknown, .qaq, .qaq img {
    width: 200px;
    height: 200px;
}

script part

$(".upload").change(function () {
    var fileObj = this,
        file;

    if (fileObj.files) {
        file = fileObj.files[0];
        var fr = new FileReader;
        fr.onloadend = changeimg;
        fr.readAsDataURL(file)
    } else {
        file = fileObj.value;
        changeimg(file);
    }
});

function onbrowse() {
    document.getElementById('browse').click();
}

function changeimg(str) {
    if(typeof str === "object") {
        str = str.target.result; // file reader
    }

    $(".unknown").css({"background-size":  "100px 100px",
                       "background-image": "url(" + str + ")"});
    $( ".qaq" ).append( "<img src='"+str+"' />" );
} 

jsfiddle example

http://jsfiddle.net/wU3Vu/

in ie9 in doesn't show picture if you add some picture to upload.

but in other browsers it work fine... please help .

Thanks

1 Answer 1

0

fileObj.value returns file system path. It can't be set to src attribute of image.

More details: In other browsers it works because they support HTML5 FileAPI feature http://caniuse.com/#feat=fileapi. As you can see IE9 does not support this and can't access file on client side.

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.