上傳圖片，點擊觸發隱藏得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/11803409.html