编辑一个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