精华内容
下载资源
问答
  • layui文件上传.rar

    2021-06-19 16:45:11
    基于layui文件上传,显示上传进度和文件相关信息
  • layui文件上传

    千次阅读 2019-01-23 14:43:07
    前端代码 <button type="button" class="layui-btn" id="...上传文件</button> js代码 layui.use('upload', function(){  var $ = layui.jquery  

    前端代码

    <button type="button" class="layui-btn" id="test3"><i class="layui-icon"></i>上传文件</button>

    js代码

    layui.use('upload', function(){
      var $ = layui.jquery
      ,upload = layui.upload;
      
      
     upload.render({
        elem: '#test3'
        ,url: '<%= request.getContextPath() %>/servlet/SysServlet'
        ,accept: 'file' //普通文件
        ,exts: 'xls' //允许上传的文件后缀
        ,done: function(res){ //返回值接收用于结果提示
          if(res==1){
                                    layer.msg('上传成功!', {
                                      }, function(){
                                        location.reload();
                                      });
                                }else{
                                    layer.msg('上传失败!', {
                                      }, function(){
                                        location.reload();
                                      });
                                }
        }
      }); 
    });

    Java后台代码


                    

    public String upload2(HttpServletRequest request,HttpServletResponse response){
    		int judge = 0;
    		ExcelToOracle e = new ExcelToOracle();
    		String filePath = "";
    		 try {
    	            // 配置上传参数
    	            DiskFileItemFactory factory = new DiskFileItemFactory();
    	            ServletFileUpload upload = new ServletFileUpload(factory);
    	            // 解析请求的内容提取文件数据
    	            @SuppressWarnings("unchecked")
    	            List<FileItem> formItems = upload.parseRequest(request);
    	 
    	            // 迭代表单数据
    	            for (FileItem item : formItems) {
    	                // 处理不在表单中的字段
    	                if (!item.isFormField()) {
    	                    String fileName = item.getName();
    	                    int index=fileName.lastIndexOf("\\");
    	                    if(index!=-1) {
    	                    	fileName=fileName.substring(index+1);
    	                    }
    	                    //定义上传文件的存放路径
    	                    String path = this.getServletContext().getRealPath("/uploadFile");
    	                    //定义上传文件的完整路径
    	                    filePath = String.format("%s/%s",path,fileName);
    	                    File storeFile = new File(filePath);
    	                    // 在控制台输出文件的上传路径
    	                    //System.out.println(filePath);
    	                    // 保存文件到硬盘
    	                    item.write(storeFile);
    	                    
    	                    String dataTable = "ZX_BADLIST";
    	                    judge = e.insert(filePath, dataTable);
    	                }
    	            }
    	        } catch (Exception ex) {
    	        	return "2";
    	        }finally{
    	        	e.deleteFile(filePath);
    	        }
    
    		
    	        if(judge!=0){
    				return "1";
    				
    			}else{
    				return "2";
    			}
    	}

     

    展开全文
  • layUI文件上传

    2018-11-10 18:52:36
    &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&...layui&lt;/title&gt;  &lt;meta name="renderer" content="webkit"&gt;  &l

    <!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="//res.layui.com/layui/dist/css/layui.css"  media="all">
      <!-- 注意:如果你直接复制所有代码到本地,上述css路径需要改成你本地的 -->
    </head>
    <body>
              
    <blockquote class="layui-elem-quote">为节省服务器开销,以下示例均未配置真实上传接口,所以每次上传都会报提示:请求上传接口出现异常,这属于正常现象。</blockquote>   
              
    <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">
        <p id="demoText"></p>
      </div>
    </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" id="test2">多图片上传</button> 
      <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
        预览图:
        <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>
     
    <button type="button" class="layui-btn" id="test3"><i class="layui-icon"></i>上传文件</button>
    <button type="button" class="layui-btn layui-btn-primary" id="test4"><i class="layui-icon"></i>只允许压缩文件</button>
    <button type="button" class="layui-btn" id="test5"><i class="layui-icon"></i>上传视频</button>
    <button type="button" class="layui-btn" id="test6"><i class="layui-icon"></i>上传音频</button> 
    <div style="margin-top: 10px;">
       
    <!-- 示例-970 -->
    <ins class="adsbygoogle" style="display:inline-block;width:970px;height:90px" data-ad-client="ca-pub-6111334333458862" data-ad-slot="3820120620"></ins>
      
    </div>
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
      <legend>设定文件大小限制</legend>
    </fieldset> 
     
    <button type="button" class="layui-btn layui-btn-danger" id="test7"><i class="layui-icon"></i>上传图片</button>
    <div class="layui-inline layui-word-aux">
      这里以限制 60KB 为例
    </div>
     
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
      <legend>同时绑定多个元素,并将属性设定在元素上</legend>
    </fieldset> 
     
    <button class="layui-btn demoMore" lay-data="{url: '/a/'}">上传A</button>
    <button class="layui-btn demoMore" lay-data="{url: '/b/', size:5}">上传B</button>
    <button class="layui-btn demoMore" lay-data="{url: '/c/', accept: 'file',size:10}">上传C</button>
     
    <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="test8">选择文件</button>
      <button type="button" class="layui-btn" id="test9">开始上传</button>
    </div>
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
      <legend>拖拽上传</legend>
    </fieldset> 
     
    <div class="layui-upload-drag" id="test10">
      <i class="layui-icon"></i>
      <p>点击上传,或将文件拖拽到此处</p>
    </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>
            <th>大小</th>
            <th>状态</th>
            <th>操作</th>
          </tr></thead>
          <tbody id="demoList"></tbody>
        </table>
      </div>
      <button type="button" class="layui-btn" id="testListAction">开始上传</button>
    </div> 
      
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
      <legend>绑定原始文件域</legend>
    </fieldset> 
     
    <input type="file" name="file" id="test20">
     
              
    <script src="//res.layui.com/layui/dist/layui.js" charset="utf-8"></script>
    <!-- 注意:如果你直接复制所有代码到本地,上述js路径需要改成你本地的 -->
    <script>
    layui.use('upload', function(){
      var $ = layui.jquery
      ,upload = layui.upload;
      
      //普通图片上传
      var uploadInst = upload.render({
        elem: '#test1'
        ,url: '/upload/'
        ,before: function(obj){
          //预读本地文件示例,不支持ie8
          obj.preview(function(index, file, result){
            $('#demo1').attr('src', result); //图片链接(base64)
          });
        }
        ,done: function(res){
          //如果上传失败
          if(res.code > 0){
            return layer.msg('上传失败');
          }
          //上传成功
        }
        ,error: function(){
          //演示失败状态,并实现重传
          var demoText = $('#demoText');
          demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
          demoText.find('.demo-reload').on('click', function(){
            uploadInst.upload();
          });
        }
      });
      
      //多图片上传
      upload.render({
        elem: '#test2'
        ,url: '/upload/'
        ,multiple: true
        ,before: function(obj){
          //预读本地文件示例,不支持ie8
          obj.preview(function(index, file, result){
            $('#demo2').append('<img src="'+ result +'" alt="'+ file.name +'" class="layui-upload-img">')
          });
        }
        ,done: function(res){
          //上传完毕
        }
      });
      
      //指定允许上传的文件类型
      upload.render({
        elem: '#test3'
        ,url: '/upload/'
        ,accept: 'file' //普通文件
        ,done: function(res){
          console.log(res)
        }
      });
      upload.render({ //允许上传的文件后缀
        elem: '#test4'
        ,url: '/upload/'
        ,accept: 'file' //普通文件
        ,exts: 'zip|rar|7z' //只允许上传压缩文件
        ,done: function(res){
          console.log(res)
        }
      });
      upload.render({
        elem: '#test5'
        ,url: '/upload/'
        ,accept: 'video' //视频
        ,done: function(res){
          console.log(res)
        }
      });
      upload.render({
        elem: '#test6'
        ,url: '/upload/'
        ,accept: 'audio' //音频
        ,done: function(res){
          console.log(res)
        }
      });
      
      //设定文件大小限制
      upload.render({
        elem: '#test7'
        ,url: '/upload/'
        ,size: 60 //限制文件大小,单位 KB
        ,done: function(res){
          console.log(res)
        }
      });
      
      //同时绑定多个元素,并将属性设定在元素上
      upload.render({
        elem: '.demoMore'
        ,before: function(){
          layer.tips('接口地址:'+ this.url, this.item, {tips: 1});
        }
        ,done: function(res, index, upload){
          var item = this.item;
          console.log(item); //获取当前触发上传的元素,layui 2.1.0 新增
        }
      })
      
      //选完文件后不自动上传
      upload.render({
        elem: '#test8'
        ,url: '/upload/'
        ,auto: false
        //,multiple: true
        ,bindAction: '#test9'
        ,done: function(res){
          console.log(res)
        }
      });
      
      //拖拽上传
      upload.render({
        elem: '#test10'
        ,url: '/upload/'
        ,done: function(res){
          console.log(res)
        }
      });
      
      //多文件列表示例
      var demoListView = $('#demoList')
      ,uploadListIns = upload.render({
        elem: '#testList'
        ,url: '/upload/'
        ,accept: 'file'
        ,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-xs demo-reload layui-hide">重传</button>'
                ,'<button class="layui-btn layui-btn-xs 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]; //删除文件队列已经上传成功的文件
          }
          this.error(index, upload);
        }
        ,error: function(index, upload){
          var tr = demoListView.find('tr#upload-'+ index)
          ,tds = tr.children();
          tds.eq(2).html('<span style="color: #FF5722;">上传失败</span>');
          tds.eq(3).find('.demo-reload').removeClass('layui-hide'); //显示重传
        }
      });
      
      //绑定原始文件域
      upload.render({
        elem: '#test20'
        ,url: '/upload/'
        ,done: function(res){
          console.log(res)
        }
      });
      
    });
    </script>

    </body>
    </html>

    展开全文
  • layui 文件上传

    2020-03-27 22:09:41
    html <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;"> <div id="uploadQRcode" class="layui-upload"> <button ...

    html

    <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
                            <div id="uploadQRcode" class="layui-upload">
                            <button type="button" class="layui-btn" id="uploadQR">
                                <i class="layui-icon">&#xe67c;</i>上传客服二维码<span style="color: red;font-size: 20px;">*</span>
                            </button>
                            <div class="layui-upload-list">
                                <img id="qrshow" src="" alt="" class="layui-upload-img"
                                     style="height: 100px;width:100px;border:1px solid black;">
                            </div>
                            <div id="startDiv">
                                <button type="button" class="layui-btn" id="startUploadQR">开始上传</button>
                            </div>
                                <div style="color: #c2c2c2;margin:10px 0;">温馨提示: 每次最多上传一张图片, 单张图片的大小不超过2MB</div>
                        </div>
                        <input type="text" name="cli_qrcode" id="qrInput" style="display: none;" lay-verify="required">
    </blockquote>
    

    js

    layui.use(['form', 'element', 'upload'], function () {
            var form = layui.form;
            var element = layui.element;
            var $ = layui.jquery;
            var upload = layui.upload;
    
            //单文件示例  选完文件后不自动上传
            var uploadSingle = upload.render({
                elem: '#uploadQR'
                , url: '/web/api/upload/upload?option=4'
                , accept: 'images'  // 允许上传的文件类型
                , size: 2048        // 最大允许上传的文件大小  单位 KB
                , auto: false
                , bindAction: '#startUploadQR'
                , choose: function (obj) {
                    //预读本地文件示例,不支持ie8
                    obj.preview(function (index, file, result) {
                        $('#qrshow').attr('src', result); //图片链接(base64)
                    });
                }
                , done: function (res, index, upload) {
                    if (res.code == 0) {
                        //上传成功
                        $("#qrInput").val(res.data[0].fp_relative);
                        var startDiv = $('#startDiv');
                        startDiv.html('<span style="color: #5FB878;">上传成功</span>');
                    } else {
                        this.error(index, upload);
                    }
                }
                , error: function (index, upload) {
                    //演示失败状态,并实现重传
                    var startDiv = $('#startDiv');
                    startDiv.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload" style="width:50px;height:30px;text-align:center;line-height:30px;">重试</a>');
                    startDiv.find('.demo-reload').on('click', function () {
                        uploadSingle.upload();
                    });
                }
            });
        });
    

    多文件
    html

    <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
                            <div id="uploadImg" class="layui-upload">
                            <button type="button" class="layui-btn" id="upload">
                                <i class="layui-icon">&#xe67c;</i>上传商铺图片<span style="color: red;font-size: 20px;">*</span>
                            </button>
                            <div class="layui-upload-list">
                                <table class="layui-table" style="text-align: center;">
                                    <thead>
                                    <tr>
                                        <th style="text-align: center;">图片预览</th>
                                        <th style="text-align: center;">大小</th>
                                        <th style="text-align: center;">状态</th>
                                        <th style="text-align: center;">操作</th>
                                    </tr>
                                    </thead>
                                    <tbody id="imgList"></tbody>
                                </table>
                            </div>
                            <button type="button" class="layui-btn" id="startUpload">开始上传</button>
                                <div style="color: #c2c2c2;margin:10px 0;">温馨提示: 每次最多上传六张图片, 单张图片的大小不超过5MB, 长宽比例推荐1.5:1,
                                    推荐上传图片长675px,宽450px
                                </div>
                        </div>
                        <input type="text" name="face_img" id="imgInput" style="display: none;" lay-verify="required">
    </blockquote>
    

    js

    layui.use(['table', 'form', 'element', 'upload'], function () {
            var table = layui.table;
            var form = layui.form;
            var element = layui.element;
            var $ = layui.jquery;
            var upload = layui.upload;
            
            //多文件列表示例
            var demoListView = $('#imgList');
            var totalArray = new Array();
            var uploadInst = upload.render({
                elem: '#upload' //绑定元素
                , url: '/web/api/upload/upload?option=3' //上传接口
                , accept: 'images'  // 允许上传的文件类型
                // , acceptMime: 'image/jpg,image/png'   // (只支持jpg和png格式,多个用逗号隔开),
                , size: 5120        // 最大允许上传的文件大小  单位 KB
                , auto: false //选择文件后不自动上传
                , bindAction: '#startUpload' //指向一个按钮触发上传
                , multiple: true   // 开启多文件上传
                , number: 6    //  同时上传文件的最大个数
                , choose: function (obj) {
                    var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
                    var arr = Object.keys(files);
                    totalArray = totalArray.concat(arr);
                    // 检查上传文件的个数
                    if (totalArray.length <= 6) {
                        //读取本地文件
                        obj.preview(function (index, file, result) {
                            var tr = $(['<tr id="upload-' + index + '">'
                                , '<td><img src="' + result + '" alt="' + file.name + '" class="layui-upload-img" style="height: 66px;width:100px;"></td>'
                                , '<td>' + (file.size / 1014).toFixed(1) + 'kb</td>'
                                , '<td>等待上传</td>'
                                , '<td>'
                                , '<button class="layui-btn demo-reload layui-hide">重传</button>'
                                , '<button class="layui-btn 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);
                        });
                    } else {
                        // 超出上传最大文件
                        layer.msg("上传文件最大不超过6个")
                    }
    
                }
                , done: function (res, index, upload) {
                    console.log("res", res);
                    if (res.code == 0) { //上传成功
                        // 上传成功后将图片路径拼接到input中,多个路径用","分割
                        var inputVal = document.getElementById("imgInput").value;
                        var valData = "";
                        if (inputVal) {
                            valData = inputVal + "," + res.data[0].fp_relative;
                        } else {
                            valData = res.data[0].fp_relative;
                        }
                        document.getElementById("imgInput").value = valData;
                        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]; //删除文件队列已经上传成功的文件
    
                    }
                    this.error(index, upload);
                }
                , error: function (index, upload) {
                    var tr = demoListView.find('tr#upload-' + index)
                        , tds = tr.children();
                    tds.eq(2).html('<span style="color: #FF5722;">上传失败</span>');
                    tds.eq(3).find('.demo-reload').removeClass('layui-hide'); //显示重传
                }
            });
        });
    
    展开全文
  • Layui文件上传(java)

    万次阅读 热门讨论 2018-01-03 22:46:16
    Layui文件上传的一些参数,这里不过多介绍,详情可看Layui文件上传参数设置,这里主要介绍【springMVC】上传文件单文件上传springmvc.xml加入配置

    Layui文件上传的一些参数,这里不过多介绍,详情可看Layui文件上传参数设置,这里主要介绍【springMVC】上传文件

    spring配置

    springmvc.xml加入配置

    <bean id="multipartResolver"
            class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
            <property name="maxUploadSize" value="1000000000" />
        </bean>

    单文件上传

    html代码:

      <div class="layui-upload" style="margin-left: 30px;margin-right: 30px;">
       <div style="margin-top: 171px;float: left;"><label class="layui-form-label">店铺图片</label></div>
      <div class="layui-upload-list" style="float: left;">
        <img class="layui-upload-img" id="demo1" style="width: 200px;height: 200px;margin: 0 10px 10px 0;">
        <p id="demoText"></p>
        <input type="hidden" name="pic" id="pic"  value="${store.pic }">
    
      </div>
      <div style="float: left;margin-top: 171px;"><button type="button" class="layui-btn" id="test1">上传图片</button></div>
    </div>

    js代码:

    layui.use(['form','layer','table','upload'], function(){
              var table = layui.table
              ,form = layui.form,upload = layui.upload;
               var uploadInst = upload.render({
                elem: '#test1'
                ,url: 'sysstore/uploadImg'
                ,before: function(obj){
                  //预读本地文件示例,不支持ie8
                  obj.preview(function(index, file, result){
                    $('#demo1').attr('src', result); //图片链接(base64)
                  });
                }
                ,done: function(res){
                  //如果上传失败
                  if(res.code > 0){//自定义返回失败
                    return layer.msg('上传失败');
                  }else{
                      $('#pic').val(res.img); 
                  }
                  //上传成功
                }
                ,error: function(){
                  //演示失败状态,并实现重传
                  var demoText = $('#demoText');
                  demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-mini demo-reload">重试</a>');
                  demoText.find('.demo-reload').on('click', function(){
                    uploadInst.upload();
                  });
                }
              });
    
    })

    service之-java代码(我返回的是文件路径名):

    public String uploadImg(MultipartFile file) {
            if (null != file) {
                String myFileName = file.getOriginalFilename();// 文件原名称
                String fileName = BasePath.getImgPath("yyyyMMddHHmmss")+
                        Integer.toHexString(new Random().nextInt()) +"."+ myFileName.
                        substring(myFileName.lastIndexOf(".") + 1);  
                String pat=FileProperties.getFilePath()+"/src/main/webapp/";//获取文件保存路径
                String sqlPath="static/images/upload/storeHead/"+BasePath.getImgPath("yyyyMMdd")+"/"; 
    
                File fileDir=new File(pat+sqlPath);
                if (!fileDir.exists()) { //如果不存在 则创建     
                     fileDir.mkdirs();    
                 } 
                String path=pat+sqlPath+fileName;
                File localFile = new File(path);  
                try {
                    file.transferTo(localFile);
                    return sqlPath+fileName;
                } catch (IllegalStateException e) {
                    // TODO Auto-generated catch block
                    e.printStackTrace();
                } catch (IOException e) {
                    // TODO Auto-generated catch block
                    e.printStackTrace();
                }
            }else{
                System.out.println("文件为空");
            }
            return null;
        }
    

    鉴于大家对SysFileEntity多有异议这里补上这个实体类

    package com.yun.entity;
    
    import java.io.Serializable;
    
    import org.springframework.format.annotation.DateTimeFormat;
    
    import com.fasterxml.jackson.annotation.JsonFormat;
    
    import lombok.Data;
    
    
    @Data
    public class SysFileEntity implements Serializable {
        private static final long serialVersionUID = 1L;
    
        /**
         * 文件id
         */
        private Long fileId;
        /*
    
         */
        private String orderNum;
        /**
         * 原始文件名
         */
        private String fileName;
        /**         
         * 文件路径
         */
        private String fileUrl;
        /**
         * 用户id
         */
        private Long userId;
        /**
         * 用户
         */
        private String userName;
        /**
         * 店铺id
         */
        private Long storeId;
        /**
         * 店铺名称
         */
        private String storeName;
        /**
         * 文件状态 0:待处理  1:处理完待收货  2 :完成交易
         */
        private Integer status;
        /**
         * 创建时间
         */
         @JsonFormat(pattern="yyyy-MM-dd",timezone = "GMT+8")
         @DateTimeFormat(pattern="yyyy-MM-dd HH:mm:ss") 
        private String createIme;
    
    }

    多文件上传

    html代码:

    <div class="layui-upload-list">
                                    <table class="layui-table" style="overflow: auto;">
                                        <thead>
                                            <tr>
                                                <th>文件名</th>
                                                <th>大小</th>
                                                <th>状态</th>
                                                <th>操作</th>
                                            </tr>
                                        </thead>
                                        <tbody id="demoList"></tbody>
    
                                    </table>
                                </div>

    js代码:

    layui.use(['upload','form', 'layer'], function() {
                var $ = layui.jquery,
                    layer = layui.layer,
                    form=layui.form,
                    upload = layui.upload;
                    //多文件列表示例
                var demoListView = $('#demoList'),
                    uploadListIns = upload.render({
                        elem: '#testList',
                        url: 'sysstore/uploadMultiFile',//上传路径
                        accept: 'file',
                        multiple: true,
                        size: 51200, //最大允许上传的文件大小kb
                        auto: false,
                        exts: 'pdf',//文件类型 pdf|doc|docx
                        number: 50 ,//最多上传文件数为5
                        bindAction: '#testListAction',
                        before: function(obj) { //obj参数包含的信息,跟 choose回调完全一致,可参见上文。
    
                            layer.load(); //上传loading
                            this.data={'storeId': storeId,'storeName':storeName};
                        },
                        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(''); //清空操作
                                layer.closeAll('loading'); //关闭loading
                                delete this.files[index]; //删除文件队列已经上传成功的文件
                                return;
                            }
                            this.error(index, upload);
                            layer.closeAll('loading'); //关闭loading
                        },
                        error: function(index, upload) {
                            var tr = demoListView.find('tr#upload-' + index),
                                tds = tr.children();
                            tds.eq(2).html('<span style="color: #FF5722;">上传失败</span>');
                            tds.eq(3).find('.demo-reload').removeClass('layui-hide'); //显示重传
                            layer.closeAll('loading'); //关闭loading
                        }
                    });
                    });

    service之-java代码:
    request获取文件名

    public void webUploadFile(HttpServletRequest request, HttpServletResponse response,SysFileEntity sysFileEntity) {
            // TODO Auto-generated method stub
            //创建一个通用的多部分解析器  
            CommonsMultipartResolver multipartResolver = new CommonsMultipartResolver(request.getSession().getServletContext());  
            //判断 request 是否有文件上传,即多部分请求  
            if(multipartResolver.isMultipart(request)){  
                //转换成多部分request    
                MultipartHttpServletRequest multiRequest = (MultipartHttpServletRequest)request;  
                //取得request中的所有文件名  
                Iterator<String> iter = multiRequest.getFileNames();  
                while(iter.hasNext()){  
                    //取得上传文件  
                    MultipartFile file = multiRequest.getFile(iter.next());  
                    if(file != null){  
                        //取得当前上传文件的文件名称  
                        String myFileName = file.getOriginalFilename();  
                        //如果名称不为“”,说明该文件存在,否则说明该文件不存在  
                        if(myFileName.trim() !=""){  
                            System.out.println(myFileName);  
                            //重命名上传后的文件名  按照年月日时分秒进行命名
                            String fileName = BasePath.getImgPath("yyyyMMddHHmmss")+
                                    Integer.toHexString(new Random().nextInt()) +"."+ myFileName.
                                    substring(myFileName.lastIndexOf(".") + 1);  
                            //定义上传路径  
                            try {
                                String pat=FileProperties.getFilePath()+"/src/main/webapp/";//获取文件保存路径
                                String sqlPath="static/images/upload/"+BasePath.getImgPath("yyyyMMdd")+"/";
                                File fileDir=new File(pat+sqlPath);
                                if (!fileDir.exists()) { //如果不存在 则创建     
                                     fileDir.mkdirs();    
                                 } 
                                String path=pat+sqlPath+fileName;
                                //存文件
                          File localFile = new File(path);  
                                file.transferTo(localFile);
                            } catch (IllegalStateException e) {
                                // TODO Auto-generated catch block
                                e.printStackTrace();
                            } catch (IOException e) {
                                // TODO Auto-generated catch block
                                e.printStackTrace();
                            }  
                        }  
                    }  
                }  
    
            }
        }
    展开全文
  • Layui文件上传带进度条

    万次阅读 热门讨论 2018-08-27 19:14:34
    最近项目有个需求,要求文件上传有实时进度条,前端框架使用的是layui,但是...1.修改layui文件上传ajax的代码: 这里使用的是layui(2.4.3版本)的非模块化 (layui.all.js),模块化请修改modules/upload.js ...
  • 今天小编就为大家分享一篇layui文件上传控件带更改后数据传值的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • layui文件上传等待动画

    千次阅读 2019-05-20 16:49:15
    layui文件上传等待动画 //加载动画 layer.msg('图片上传中...', { icon: 16, shade: 0.01, time: 0 }) //关闭动画 layer.close(layer.msg()); 例: ,before: function(obj){ layer.msg('图片上传中...', { ...
  • 基于layui文件上传组件

    千次阅读 2019-07-09 10:26:44
    基于layui文件上传二次封装,修改layui源码实现放弃上传,确保上传接口能通,否则图片不会反显 该组件支持图片、文件上传,具体使用见文档。 layui_demo文件上传/layui-demo/examples/upload.html demo效果图 一、 ...
  • SpringBoot+layui文件 上传,预览上传下载预览 JavaWeb+layui 实现 上传 上传使用layui组件 /** * 文件上传路径映射类 * @author guoanhao * @since 2021-03-22 19:15:09 * @ConfigurationProperties:前缀 */ ...
  • 主要为大家详细介绍了layui导航栏效果的实现代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 图片/文件上传 - layui.upload 点击跳转到Layui官网文件上传页面 找到设置文件上传类型的设置的参数 代码 <div class="layui-upload-drag" id="test10"> <i class="layui-icon"></i> <p...
  • layui+PHP文件上传,附上传进度条。这是一个DEMO集合,集合了很多JS等DEMO效果,在左侧菜单打开LayUI Demo中看文件上传即可看本资源效果。
  • layui文件上传后台(带自定参数)

    千次阅读 2019-04-02 10:17:17
    记录layui文件上传方法,前端页面直接看layui文件上传相关文档就行,主要是记录后端Java接收上传流并保存的方法 layui文档:https://www.layui.com/doc/modules/upload.html 因为该方法使用MultipartFile来接收...
  • 做课程设计时候,用到了layui文件上传接口,参考官方文档给出的响应接口文档: { "code": 0 ,"msg": "" ,"data": { "src": "http://cdn.layui.com/123.jpg" } } 然后具体的上传书写方式分为前端和后端,...
  • layui框架文件上传的跨域问题前端可以解决吗? 该怎么解决呢?
  • <p>layui 文件上传upload组件怎么设置上传时文件格式筛选,文件格式类型为ceb;<br> 在accept Mine_type 中没有找到对应ceb格式的,或者说有什么可以自己设置上传文件类型限制的</p>
  • springboot+layui实现文件上传,这个案例只有上传,没有其他多余的操作
  • SSM框架使用Layui文件上传插件实现多文件上传(多文件列表) pom.xml文件的配置 想要实现SSM框架实现多文件上传,必要的jar包必须要在pom.xml文件中引入。如下: <!--commons-fileupload --> <...
  • layui使用,LayUI select不显示,LayUI文件上传,Layui自定义校验规则 ================================ ©Copyright 蕃薯耀 2020-08-05 https://www.cnblogs.com/fanshuyao/ 一、引入js和css <link rel=...
  • 文件上传效果类似163邮箱。使用了spring MVC作为后台。layui+jquery作为前端技术。支持多文件上传。下载后直接导入myeclipse即可使用。

空空如也

空空如也

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

layui文件上传