精华内容
下载资源
问答
  • 2、layui多文件上传局限性:有几张图片就会向后台请求几次 3、使用layui组件原因:方便图片预览,图片删除功能的实现 4、实现思路 (1)利用layui多文件上传组件,更方便的实现图片预览和删除功能,但不使用它...

    layui的多图片上传+formData+ajax提交文件+thinkphp5后台接收

    1、需求:多图片和文本内容同时提交,thinkphp5后台处理,方便数据库回滚

    2、layui多文件上传局限性:有几张图片就会向后台请求几次

    3、使用layui组件原因:方便图片预览,图片删除功能的实现

    4、实现思路

    (1)利用layui多文件上传组件,更方便的实现图片预览和删除功能,但不使用它本身提交图片

    (2)利用全局变量files,每次选择文件时,把文件追加到files中

    (3)利用formData对象,把全局变量files 中的文件以及文本内容存入formData中

    (4)ajax提交

    5、代码

    HTML代码:

    <div class="layui-upload">
       <button type="button" class="layui-btn" id="file">图片上传: </button>
       <blockquote class="layui-elem-quote layui-quote-nm">
        预览图:
          <div class="layui-upload-list">
              <ul id="photo-list"></ul>
           </div>
        </blockquote>
    </div>

    js代码:

    var files = '';//定义全局变量,以便每次选择图片时,把文件放入队列
    /******图片的预览,删除******/
    function uploadImages(){
        layui.use('upload', function(){
            let upload = layui.upload;
            let url = '';
    
             //多图片上传
            upload.render({
                elem: '#file',
                url: url,//该案例中将使用ajax提交,故此路由并没有使用
                accept: 'images',
                auto: false,//不自动提交
                multiple: true,
                number: 3,
                choose: function(obj){
                    files = this.files = obj.pushFile(); //把文件追加到队列
    
                    //预读本地文件示例
                    obj.preview(function(index, file, result){
                        //图片预览
                        let liStr = '<li>'
                        +'<img src="'+ result +'" alt="'+ file.name +'" class="my-upload-img">'
                            +'<i class="layui-icon del-photo" title="删除">&#xe640;</i>'
                        +'</li>';
                        $('#photo-list').append(liStr);
                    
                        //删除预览图片
                        let num = $('#photo-list .del-photo').size();
                        $('#photo-list .del-photo').eq(num-1).on('click',function(){
                            $(this).parent().remove();
    
                            delete files[index];//从全局变量中移除该文件
                        });
                    
                    });
                },
            });
        });
    }
    
    /******ajax提交多张图片和文本内容******/
    function dataSub(){
     let url = '';//要提交数据的路由
    
     let formData = new FormData();
        
     for (let i in files) { //这个files就是全局变量
        formData.append('file[]',files[i]);
     }
        
     formData.append('content','我是文本内容');
        
     $.ajax({
        url : url,
        type : 'post',
        data : formData,
        cache : false,
        contentType : false,  //需要设置为false,不然后台拿不到数据
        processData : false,  //传送DOM信息,所以设为false
        success : function(msg) {
           files = '';//初始化全局变量
                   
        }
     })
    }

    thinkphp5接收处理

    public function addContent(){
        /******图片处理******/
        $files = request()->file('file');
        //要存储图片的路径
        $path = explode('/..',ROOT_PATH)[0].'\public\upgrade';
        foreach($files as $file){
            $info = $file->move($path);//移动图片到特定路径
            
            if($info){
                //获取文件存储路径
                $new_path = $path.'\\'.$info->getSaveName();
                //存入数据库
                ...........................................
            }
            
        }
    
        /******文本处理******/
        $content = $_POST['content'];
        //存入数据库
        ...........................................
        
    }
    

     

    展开全文
  • layui upload 多文件上传

    2019-12-12 13:51:13
    layui 选择多文件上传 语法 multiple: true 例子 upload.render({ elem: '#openStudentCode', url: '/scoreSystem/openStudentCode', accept: 'file', exts: 'xml|txt|TXT|text|TEXT|...

    前言

    layui 选择多文件上传

    语法

    multiple: true

    例子

    upload.render({
            elem: '#openStudentCode',
            url: '/scoreSystem/openStudentCode',
            accept: 'file',
            exts: 'xml|txt|TXT|text|TEXT|class|java',
            multiple: true,
            auto: true,
            choose: function (obj) { },
            before: function (obj) {
                layer.msg('上传中,请稍等...', {icon: 1, time: 3000});
            },
            done: function (res) {
                if ('0000' != res.code || res.data.success != true) {
                    layer.msg('上传失败!', {icon: 5, time: 3000});
                } else {
                    setTimeout(function() {
                        layer.msg('上传成功!', {icon: 1, time: 3000});
                        codetableId.reload({ });
                        $("#div2").css("display", "none");
                        $("#codeTable").css("display", "block");
                    },3000);
                }
            },
            error: function () { }
        });

    说明

    参数 multiple: true 为 true 时,即可进行多文件选择进行上传。其实不是一次将多个文件传入后台接口,而是多次调用后台接口进行上传。

    展开全文
  • 主要介绍了layui框架实现文件上传及TP3.2.3对上传文件进行后台处理操作,结合实例形式分析了layui框架结合thinkPHP进行文件上传与处理操作相关实现技巧,需要的朋友可以参考下
  • 平时上传文件需要按住Ctrl同时选中多文件才能上传多个,layui可以一个一个选上传多个 代码如下: 导入jq和layui.css <script src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script> &...

    平时上传文件需要按住Ctrl同时选中多文件才能上传多个,layui可以一个一个选上传多个

    代码如下:

    导入jq和layui.css  
    <script src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>

    <link rel="stylesheet" href="${pageContext.request.contextPath }/mvs/layui/css/layui.css"  media="all">

    php:
    <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>
            <th>大小</th>
            <th>状态</th>
            <th>操作</th>
          </tr></thead>
          <tbody id="demoList"></tbody>
        </table>
      </div>
      <button type="button" class="layui-btn" id="testListAction">开始上传</button>
      <button type="button" class="layui-btn" id="back">返回</button>

    js:
    <script>
    var id = $("#agendaId").val();
    layui.use('upload', function(){
      var $ = layui.jquery
      ,upload = layui.upload;
      //多文件列表示例
      var demoListView = $('#demoList')
      ,uploadListIns = upload.render({
        elem: '#testList'
        ,url: 'yourUrl'
        ,accept: 'file'
        ,data:{}   //可放扩展数据  key-value
        ,multiple: true
        ,auto: false
        ,bindAction: '#testListAction'
        ,choose: function(obj){   
          var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
          //读取本地文件
          obj.preview(function(index, file, result){
            var tr = $(['<tr id="upload-'+ index +'">'
              ,'<td>'+ file.name +'</td>'
              ,'<td>'+ (file.size/1014).toFixed(1) +'kb</td>'
              ,'<td>等待上传</td>'
              ,'<td>'
                ,'<button class="layui-btn layui-btn-mini demo-reload layui-hide">重传</button>'
                ,'<button class="layui-btn layui-btn-mini layui-btn-danger demo-delete">删除</button>'
              ,'</td>'
            ,'</tr>'].join(''));
            
            //单个重传
            tr.find('.demo-reload').on('click', function(){
              obj.upload(index, file);
            });
            
            //删除
            tr.find('.demo-delete').on('click', function(){
              delete files[index]; //删除对应的文件
              tr.remove();
              uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值,以免删除后出现同名文件不可选
            });
            
            demoListView.append(tr);
          });
        }
        ,done: function(res, index, upload){
          if(res.code == 0) //上传成功
            var tr = demoListView.find('tr#upload-'+ index)
            ,tds = tr.children();
            tds.eq(2).html('<span style="color: #5FB878;">上传成功</span>');
            tds.eq(3).html(''); //清空操作
            return delete this.files[index]; //删除文件队列已经上传成功的文件
          
        } //code为后台传回来的数据,具体多少自己定,

       //后台只能传回json格式数据,不然会走error函数;

        ,error: function(index, upload){
         
        }
      });

    展开全文
  • layui多文件上传

    万次阅读 2018-03-16 10:52:16
    平时上传文件需要按住Ctrl同时选中多文件才能上传多个,layui可以一个一个选上传多个代码如下:导入jq和layui.css &lt;script src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js"&gt;&...

    平时上传文件需要按住Ctrl同时选中多文件才能上传多个,layui可以一个一个选上传多个

    代码如下:


    导入jq和layui.css  

    <script src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>

    <link rel="stylesheet" href="${pageContext.request.contextPath }/mvs/layui/css/layui.css"  media="all">

    java:

    <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>
            <th>大小</th>
            <th>状态</th>
            <th>操作</th>
          </tr></thead>
          <tbody id="demoList"></tbody>
        </table>
      </div>
      <button type="button" class="layui-btn" id="testListAction">开始上传</button>

      <button type="button" class="layui-btn" id="back">返回</button>

    js:

    <script>
    var id = $("#agendaId").val();
    layui.use('upload', function(){
      var $ = layui.jquery
      ,upload = layui.upload;
      //多文件列表示例
      var demoListView = $('#demoList')
      ,uploadListIns = upload.render({
        elem: '#testList'
        ,url: 'yourUrl'
        ,accept: 'file'
        ,data:{}   //可放扩展数据  key-value
        ,multiple: true
        ,auto: false
        ,bindAction: '#testListAction'
        ,choose: function(obj){   
          var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
          //读取本地文件
          obj.preview(function(index, file, result){
            var tr = $(['<tr id="upload-'+ index +'">'
              ,'<td>'+ file.name +'</td>'
              ,'<td>'+ (file.size/1014).toFixed(1) +'kb</td>'
              ,'<td>等待上传</td>'
              ,'<td>'
                ,'<button class="layui-btn layui-btn-mini demo-reload layui-hide">重传</button>'
                ,'<button class="layui-btn layui-btn-mini layui-btn-danger demo-delete">删除</button>'
              ,'</td>'
            ,'</tr>'].join(''));
            
            //单个重传
            tr.find('.demo-reload').on('click', function(){
              obj.upload(index, file);
            });
            
            //删除
            tr.find('.demo-delete').on('click', function(){
              delete files[index]; //删除对应的文件
              tr.remove();
              uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值,以免删除后出现同名文件不可选
            });
            
            demoListView.append(tr);
          });
        }
        ,done: function(res, index, upload){
          if(res.code == 0) //上传成功
            var tr = demoListView.find('tr#upload-'+ index)
            ,tds = tr.children();
            tds.eq(2).html('<span style="color: #5FB878;">上传成功</span>');
            tds.eq(3).html(''); //清空操作
            return delete this.files[index]; //删除文件队列已经上传成功的文件
          

        } //code为后台传回来的数据,具体多少自己定,

       //后台只能传回json格式数据,不然会走error函数;

        ,error: function(index, upload){
         
        }
      });

    效果图:


    展开全文
  • 本文对接上篇文章《 layui.js实现多文件上传前端html写法总结》,后台和前端html的url的对应及相关参数可参考此文章 此功能实现所用的框架为springboot 代码如下: @ResponseBody @RequestMapping({"/demp/model...
  • layui提供了简单的前端上传图片的案例,但很少有后端案例,返回时必须是json的格式并且有code参数layui的接口才不会报异常 package com.action; import cn.hutool.json.JSONObject; import ...
  • layui 表单和文件上传一起传到后台

    万次阅读 热门讨论 2019-01-23 13:38:44
    layui-form"&gt; &lt;div class="layui-form-item"&gt; &lt;label class="layui-form-label"&gt;尾灯名称&lt;/label&gt; &lt;div class="layui-...
  • 该代码完整的实现了shiyonglayui技术实现多文件上传预览和删除功能,下载下来直接导入到开发工具中就可以使用
  • 首先在进行文件上传操作的时候,你得对layui文件上传的一些参数先了解一下,不要网上复制粘贴,起码你要对layui 文件上传的必备参数做一些大致掌握,也是自己学习。 (1) 首先你得引入layui 必备文件, ![在...
  • 使用layui上传多文件

    2020-08-04 15:19:22
    使用layui上传多文件 HTML部分 <div class="layui-form-item" > <label class="layui-form-label">上传多文件</label> <input type="hidden" id="carFullPicture" name="carFullPicture" ...
  • ftl文件 &lt;div class="layui-upload"&gt; &lt;button type="button" class="layui-btn layui-btn-normal" id="testList"&gt;选择文件 &lt;/...
  • springboot+layui多文件上传到本地

    千次阅读 2020-02-29 15:54:58
    直接复制layui官方文档代码 <div class="layui-upload"> <button class="layui-btn layui-btn-normal" id="testList" type="button"&...选择文件</button> <div class="layui-upload-list">...
  • layui实现单文件上传

    2021-03-25 06:43:16
    layui文件上传是真的恶心,你说用你的都是搞后端的,你功能提供的不全,还得让我一个一个去找,找到最后发现还没有这个功能!还得自己去实现!TMD!(本章主要解决单文件上传的一些恶心bug) 以下问题为非自动上传...
  • 使用LayUI进行文件上传(多文件上传)

    千次阅读 2019-08-15 16:31:42
    使用LayUI进行文件上传(多文件上传) 1、添加LayUI上传组件需要的js文件 jquery.min.js、layui.all.js、layer.js 2、导入Java上传组件包 commons-fileupload、commons-io 3、在spring中配置上传文件大小限制 <!-...
  • 基于layui文件上传,支持支持实时进度条,拖拽上传,单文件,多文件上传,因为大多参数支持在ie89下使用,所以推荐ie10+,另外url一定要填后台真实上传路径测试
  • Layui多文件上传,java后台(servlet实现)

    万次阅读 热门讨论 2018-07-11 15:47:27
    今天做了一个多文件上传的页面,运用的是layui前端框架,后面是找了好多都没找到java的代码,记得以前写过一次ajaxfileupload实现无刷新上传文件,拿过来试了一下,完美适配,下面直接贴代码。ajaxfileupload的代码...
  • layui+PHP文件上传

    千次阅读 2018-08-01 15:30:24
    一个很好的前端框架,现在也出了后台模板(收费),值得我们学习和借鉴,非常感谢作者–贤心。 一、下载layui部署到项目,在页面引入layui.css和layui.js。 二、html代码 &amp;amp;lt;div class=&amp;quot;...
  •  if (item.isFormField()) { //如果是表单域 ,就是非文件上传元素 必须要判断的   String name = item.getFieldName(); //获取name属性的值  String value = item.getString(); //获取value属性的值  } ...
  • 异步加载数据信息,在js中发送请求后台数据,后台响应json数据,然后前台再进行解析。其中比较重要的是json数据格式 示例 前台页面js layui.use('table', function () { var table = layui.table; var ...
  • layui多文件上传列表后端Java

    千次阅读 2019-06-13 16:33:00
    LayUi多文件上传后端Java 前端代码 <div class="layui-form-item"> <label class="layui-form-label">附件</label> <div class="layui-input-block layui-upload"> <div ...
  • PHP codeigniter layui 后台模板

    千次阅读 2019-05-24 22:06:00
    CodeIgniter+Layui 后台框架 https://www.layui.com/ http://codeigniter.org.cn/ 开发语言:PHP 框架:CodeIgniter + Layui 支持: 用户角色管理; 权限管理; 需要注意!!! 需要注意!!! 需要注意!!! 1, ...
  • layui多文件上传

    2021-01-18 11:04:37
    layui官方文档代码 <div class="layui-upload"> <button class="layui-btn layui-...选择文件</button> <div class="layui-upload-list"> <table class="layui-table"> <thead>
  • 今天小编就为大家分享一篇layui 实现表单和文件上传一起传到后台的例子,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 2,077
精华内容 830
关键字:

layui后台多文件上传