首页 > 其他 > 详细

Django中 file类型的样式修改和图片地址显示

时间:2021-05-30 20:11:09      阅读:14      评论:0      收藏:0      [点我收藏+]

前端代码(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中显示

修改图片时效果(完美获取路径):

技术分享图片

 

Django中 file类型的样式修改和图片地址显示

原文:https://www.cnblogs.com/Liu928011/p/14828362.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!