layui 多图片上传（可改多文件上传）

最新推荐文章于 2024-04-05 13:42:26 发布

锦哥区块链

最新推荐文章于 2024-04-05 13:42:26 发布

阅读量1.1k

点赞数 1

分类专栏：前端 layui 文章标签： upload html php

本文链接：https://blog.csdn.net/u014417566/article/details/108615206

版权

layui 多图片上传（可改多文件上传）
1：才用layui前端框架+原生PHP语言
2：架构清晰，附demo

前端HTML部分

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Layui</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="layui/css/layui.css"  media="all">
  <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body>

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
  <legend>常规使用：普通图片上传</legend>
</fieldset>
 
<div class="layui-upload">
  <button type="button" class="layui-btn" id="test1" >上传图片</button>
  <div class="layui-upload-list">
    预览图： <img class="layui-upload-img" id="demo1" width="120" height="85" style="">
    <p id="demoText"></p>
  </div>
</div>   


<div class="layui-upload">
  图片上传：
<input type="text" name="test5" id="test5" value="" /> <button type="button" class="layui-btn" id="test2">多图片上传</button> 
  <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
    预览图：<span style="color: red;">(*选择错误点击图片重新选择)</span>
    <div class="layui-upload-list" id="demo2"></div>
 </blockquote>
</div>
 
 



<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
  <legend>高级应用：制作一个多文件列表</legend>
</fieldset> 
 
<div class="layui-upload">
  <button type="button" class="layui-btn layui-btn-normal" id="testList">选择多文件</button> 
  <div class="layui-upload-list">
    <table class="layui-table">
      <thead>
        <tr><th>文件名</th>
        <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
    预览图：(*选择错误点击图片重新选择)
    <div class="layui-upload-list" id="demo3"></div>
 </blockquote>
        <th>大小</th>
        <th>状态</th>
        <th>操作</th>
      </tr></thead>
      <tbody id="demoList"></tbody>
    </table>
  </div>
  <button type="button" class

最低0.47元/天解锁文章

锦哥区块链

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
layui 多图片上传（可改多文件上传）

layui 多图片上传（可改多文件上传）1：才用layui前端框架+原生PHP语言2：架构清晰，附demo前端HTML部分<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>Layui</title> <meta name="renderer" content="webkit"> <meta http-equiv="X-UA-C
复制链接

扫一扫