如何使用img src浏览和上传图像

Question

I want to do is to hide the

<input type='file' id="imgInp" accept="image/*" />

to the users and use the img tag to browse for image if the user clicked this specific img tag. How do i do that using jquery?

current output: http://jsfiddle.net/LvsYc/3135/

$(document).ready(function() {
    var currentSrc = $('#Picture').attr('src');
    if(currentSrc==null || currentSrc==""){        $('#Picture').attr('src','http://i38.photobucket.com/albums/e149/eloginko/profile_male_large_zpseedb2954.jpg');
    }


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

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

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

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

});

Answer 1

You can do that using CSS by removing opacity for the file input and position it over the image:

#form1{position:relative}
#imgInp{position:absolute;opacity:0;height:100%;top:0;cursor:pointer}

Browser variations may apply. Demo: http://jsfiddle.net/LvsYc/3138/

Answer 2

You could hide the input control

<input type='file' id="imgInp" accept="image/*" hidden="hidden" />

Set the image to use a link style cursor in CSS:

#Picture {
    width: 120px;
    height: 120px;
    cursor: pointer;
}

And finally listen for the click on the picture and trigger a click on the input control

$("#Picture").click(function () {
    $("#imgInp").click();
});

http://jsfiddle.net/LvsYc/3137/

Answer 3

You can do it like this:

DEMO

CSS

#imgInp { display:none;}

Javascript

$("#Picture").on('click', function() {$("#imgInp").trigger('click')})