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

    技术2022-08-01  82

    <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=添加&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]); }

     

    Processed: 0.009, SQL: 9