的Javascript

Question

我想做的是隐藏

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

如果用户点击了这个特定的img标签，那么

给用户并使用img标签浏览图片。我如何使用jquery做到这一点？

当前输出：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

您可以使用CSS删除文件输入的不透明度并将其放在图像上来执行此操作：

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

浏览器变体可能适用。演示：http://jsfiddle.net/LvsYc/3138/

Answer 2

您可以隐藏输入控件

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

将图像设置为在CSS中使用链接样式光标：

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

最后听取图片上的点击并触发输入控件的点击

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

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

Answer 3

你可以这样做：

DEMO

CSS

#imgInp { display:none;}

的Javascript

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

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

3 个答案:

CSS

的Javascript