thinkphp5 上传图片并预览 

 1 <div class="layui-form-item">
 2                     <label class="layui-form-label">
 3                         <span class="x-red">*</span>LOGO
 4                     </label>
 5                     <div class="layui-input-inline">
 6                         <input type="file" name="logo" required="" autocomplete="off" class="layui-input">
 7                     </div>
 8                     <div class="layui-form-mid layui-word-aux">
 9                         请上传网站LOGO
10                     </div>
11                 </div>
12                 <div class="layui-form-item">
13                 <!-- 预览样式 -->
14                    <div style="border: solid #ccc 1px; padding: 5px; width: 180px; margin-left: 110px;">
15                        <img src="" class="img" alt="" width="180">
16                    </div>   
17                 </div>

需要引入jquery

js代码如下：

1 <script>
2         $("input[name='logo']").change(function(){
3             $(".img").attr("src",URL.createObjectURL($(this)[0].files[0]));
4         });
5     </script>

name='logo'：logo指的是input的name

$("img"):img是预览样式时的HTML元素。

posted @ 2020-12-27 17:17  IT_农民  阅读(103)  评论(1)  编辑  收藏  举报