上传图片，点击触发隐藏得file

编辑一个div   将其宽高设定好 给其背景颜色

div class="form-group">
                                        <label class="col-sm-2 control-label">上传图片</label>

                                        <div class="col-sm-10">
                                            <div id="upimg" style="width: 300px; height: 200px; background-color: aquamarine; text-align: center; line-height: 200px;" onclick="UpLode()">
                                                <span><i class="glyphicon glyphicon-open"></i>上传图片</span>
                                            </div>

                                        </div>
                                    </div>

设一个隐藏得file

<input id="FImg" onchange="GetFile()" type="file" style="display: none" />

　　这个隐藏得file可以写到body最下面

然后写js

点击直接触发file

    function UpLode() {
        //触发Fil的 点击事件
        $("#FListImg").trigger("click");
    }

再写个Js 让其上传后显示到上传框内

 function GetFile() {

        //2 取上传后图片的值     
        //event.target.files[0]    获取指定上传控件内的第一个文件
        var a = event.target.files[0];
        //取文件的路径 注意 浏览器的保密协议
        var url = window.URL.createObjectURL(a);
        //上传图片后让图片显示到上传框
        $("#upimg").css('background', 'url(' + url + ')0% 0% / cover')
    }

就OK了  点击就可取到图片，选中后就可以显示到上传框内

 

 

来源：https://www.cnblogs.com/yutang-wangweisong/p/11803347.html