input file隐藏以及 input file选中预览

身为一个后端程序猿，在做项目的时候和前端是分不开的，记录一下我正在使用的前端小方法

<img src="{$banner['banner_image']}" style="width: 200px" id="my-img">
                <input id="img-upload" type="file" name="image" value="{$banner['banner_image']}" style="display:none;">点击更换图片

在网上找了好多发现修改input file的样式挺复杂的，于是换了一种思路就是把input file设置：

display:none;

这样input file就被隐藏了，再写一个触发input file的事件

$(document).ready(function(){
        $('#my-img').click(function(){
            $('#img-upload').click();
        });

    });

接下来就是input file的选中预览

<img src="{$banner['banner_image']}" style="width: 200px" class="img">
                <input class="imgInput" type="file" name="image" value="{$banner['banner_image']}" style="display:none;">点击更换图片
            

// 选中后预览图片
    $(".imgInput").change(function(){
        $(".img").attr("src",URL.createObjectURL($(this)[0].files[0]));
    });

后端PHP程序猿，记录一下前端的一些小方法。