thinkphp5.1+layui图片上传（前端部分.第二种）

叁歲伎倆 2023-10-04 05:00 4阅读 0赞

**前台展示(未开启自动上传，要手动上传)**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsYnl1_size_16_color_FFFFFF_t_70_pic_center]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsYnl1_size_16_color_FFFFFF_t_70_pic_center 1]  
**前端(亲测可用)**

<div class="layui-form-item">
            <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
                <legend>消毒照片上传</legend>
            </fieldset>
            <div class="layui-row">
                <div class="layui-col-xs7">
                    <div class="layui-row">
                        <div class="layui-col-xs12">
                            <label class="layui-form-label" style="width:70px;" >图片名称</label>
                            <div class="layui-input-inline"><input type="text" id="picname" name="picname"  autocomplete="off" class="layui-input" ></div>
                        </div>
                        <div class="layui-col-xs12">
                            <div class="grid-demo grid-demo-bg1">
                                <div class="layui-input-inline" style="margin-left:100px;margin-top:15px;">
                                    <img id="preview" width="220px" height="150px">
                                    <p id="demoText"></p>
                                    <div style="width:220px;margin-top:10px;">
                                        <div class="layui-progress layui-progress-big" lay-showpercent="yes" lay-filter="demo">
                                            <div class="layui-progress-bar" lay-percent="" ></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-col-xs5">
                    <button type="button" class="layui-btn layui-btn-normal" id="test8">选择文件</button>
                    <button type="button" class="layui-btn" id="sc">开始上传</button>
                </div>
            </div>
            <div class="layui-row">
                <div class="layui-col-xs12">
                    <div style="margin-left:30px;margin-top:7px;">
                        温馨提示:  一次上传一张图，且大小不超过2MB。
                    </div>
                </div>
            </div>
        </div>

(后端部分参照ThinkPHP5.1系列另一篇)

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsYnl1_size_16_color_FFFFFF_t_70_pic_center]: https://img-blog.csdnimg.cn/20210505135506883.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsYnl1,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsYnl1_size_16_color_FFFFFF_t_70_pic_center 1]: https://img-blog.csdnimg.cn/20210505135514721.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsYnl1,size_16,color_FFFFFF,t_70#pic_center