tp5.1使用Formdata提交上传图片前段展示

原创

已于 2022-09-20 16:16:59 修改 · 487 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #javascript #ecmascript #php

于 2022-09-16 15:54:18 首次发布

本文介绍了如何在TP5.1框架下，利用Formdata通过JavaScript（包括jQuery和ECMAScript）实现图片上传并在前端进行预览。点击按钮触发文件选择，前端代码中定义了上传文件的方法，并执行了数据库新增操作。

点击按钮实现图片上传并预览

在这里插入图片描述

前段代码

<div class="layui-form-item">
    <label class="layui-form-label">图片上传</label>
    <div class="layui-input-inline">
      <button type="button" class="layui-btn" id="pic1">上传图片</button>
      <input type="file" name="file" class="image" id="image" style="display: none">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">图片展示</label>
    <div class="layui-input-inline">
      <img class="layui-upload-img"  id="demo1" style="height: 300px;display: none">
    </div>
  </div>