点击一个图片弹出文件选择进行上传

<div style="position: relative;">
<img width="100" height="100" id="imageshow" src="/Content/Images/AreaLogo/add.png" />
<input type="file" id="file" name="file" onchange="previewImage(this)" 
style="height:100px;width:100px;opacity:0;cursor:pointer;position: absolute;
top: 0;left: 0;z-index: 9;" /></div>

效果图：

图片路径：https://www.iconfont.cn/search/index?q=%E6%B7%BB%E5%8A%A0&page=10

//调用该方法给图片src赋值，避免浏览器缓存
$(function () {
        if ("@Model.AreaImg"!= "") {
            document.getElementById('imageshow').src = "@Model.AreaImg?v=" + Math.random();
        }
    })

//图片上传预览
    function previewImage(file) {
        var img = document.getElementById('imageshow');
        var reader = new FileReader();
        reader.onload = function (evt) { img.src = evt.target.result; }
        reader.readAsDataURL(file.files[0]);
    }

最后

以上就是老实楼房为你收集整理的点击一个图片弹出文件选择进行上传的全部内容，希望文章能够帮你解决点击一个图片弹出文件选择进行上传所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。