前端代码(button的css样式使用的是bootstrap3)
1 <div style="position: relative"> 2 <input class="btn btn-primary" type="button" value="上传图片"> 3 <input class="file" id="picture" type="file" style="position: absolute;left: 0;top: 0; opacity: 0"> 4 <span id="text">{{ goods.type_picture.url }}</span> 5 </div>
- opacity: 0设置file的input文本框为隐藏
- 设置定位是为了让二个input框重合,第二个file的input框在第一个input的上面,当单击第一个时,其实单击的是第二个。
- span标签是为了显示图片的路径
jquery代码
1 <script> 2 $(".file").change(function () { 3 $("#text").html($("#picture").val()); 4 }); 5 </script>
- jquery设置监听file的input框的值改变时让路径在span中显示
修改图片时效果(完美获取路径):
原文:https://www.cnblogs.com/Liu928011/p/14828362.html