layui实现文件或图片上传记录


Posted in Javascript onAugust 28, 2018

本文为大家分享了layui实现文件或图片上传记录的具体代码,供大家参考,具体内容如下

首先是layui自己的官网关于图片/文件上传的帮助文档:

接下来是我自己的使用记录:

1.首先在js中定义一个全局变量

var uploadListIns;

2.进行赋值

//多文件列表示例
/**
 * 图片上传
 */
layui.use('upload', function(){
 var $ = layui.jquery,upload = layui.upload;
 var demoListView = $('#proImageList');
 uploadListIns = upload.render({
  elem: '#chooseFile', //选择文件的按钮
  url: 'upload!ftp.action', //后台处理文件长传的方法
  data:{'serviceName':'外协订单供应商上传检验报告','tableName':'T_OUTSOURCE_ORDER','fileType':'图片'},
  accept: 'file', 
  multiple: true,  //是否允许多文件上传
  acceptMime: 'image/*', //规定打开文件选择框时,筛选出的文件类型
  field:'upload',  
  auto: false, 
  bindAction: '#upload', //用来触发上传的按钮ID
  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){    //多文件上传时,只要有一个文件上传成功后就会触发这个回调函数
   console.info(res);
   if(res.status == "success"){ //上传成功
    var tr = demoListView.find('tr#upload-'+ index)
     ,tds = tr.children();
    tds.eq(2).html('<span style="color: #5FB878;">上传成功</span>');
    tds.eq(3).html('<a href="'+res.url+'" rel="external nofollow" >查看</a>'); //清空操作
    return delete this.files[index]; //删除文件队列已经上传成功的文件
   }else{
    alert(res.message);
   }
   this.error(index, upload);
  },
  allDone: function(obj){ //当文件全部被提交后,才触发
   if(obj.total > obj.successful){
    layer.msg("有文件上传失败,暂不更新生产进度,请重试或联系管理员");
   }else {
    //更新生产进度
    updateProductionSchedule(currentId, currentSchedule);
   }
  },
  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-upload-file").hide();
});

上述js代码中出现的相关html元素如下,相关引入js文件和css为:bootstrap3的js和css及layui的js文件即可

<!-- 模态框(Modal) -->
<div class="modal fade" id="uploadModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
 <div class="modal-dialog">
  <div class="modal-content">
   <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
     ×
    </button>
    <h4 class="modal-title" id="myModalLabel">
     上传检验报告
    </h4>
   </div>
   <div class="modal-body">
    <button type="button" class="btn btn-primary" id="chooseFile">选择多文件</button>
    <button type="button" class="btn btn-success" id="upload">开始上传</button>
    <div class="table-responsive">
     <table class="table table-hover">
      <thead><tr>
       <th>文件名</th>
       <th>大小</th>
       <th>状态</th>
       <th>操作</th>
      </tr></thead>
      <tbody id="proImageList"></tbody>
     </table>
    </div>
   </div>
   <div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">关闭
    </button>
   </div>
  </div><!-- /.modal-content -->
 </div><!-- /.modal -->
</div>

3.在打开模态框时可以对1中定义的变量进行动态赋值,这些变量会相应的传到后台中:

function showUploadModal(id) {
 //动态赋值
 uploadListIns.config.data.tableRecordId = id;
 uploadListIns.config.data.filenamePrefix = id+".自检pass.";
 $("#uploadModal").modal("show");
}

4.最终前端实现效果如下:

layui实现文件或图片上传记录

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
CSS+JS构建的图片查看器
Jul 22 Javascript
jQuery当鼠标悬停时放大图片的效果实例
Jul 03 Javascript
javascript遍历控件实例详细解析
Jan 10 Javascript
jquery 取子节点及当前节点属性值的方法
Aug 24 Javascript
JavaScript多并发问题如何处理
Oct 28 Javascript
通过bootstrap全面学习less
Nov 09 Javascript
基于JS实现翻书效果的页面切换样式
Feb 16 Javascript
addeventlistener监听scroll跟touch(实例讲解)
Aug 04 Javascript
详细分析JS函数去抖和节流
Dec 05 Javascript
微信小程序数据存储与取值详解
Jan 30 Javascript
vue强制刷新组件的方法示例
Feb 28 Javascript
基于Express框架使用POST传递Form数据
Aug 10 Javascript
利用vue.js把静态json绑定bootstrap的table方法
Aug 28 #Javascript
react native 获取地理位置的方法示例
Aug 28 #Javascript
微信小程序自定义音乐进度条的实例代码
Aug 28 #Javascript
JavaScript模拟实现自由落体效果
Aug 28 #Javascript
vue-cli3脚手架的配置及使用教程
Aug 28 #Javascript
vue.js实现带日期星期的数字时钟功能示例
Aug 28 #Javascript
JavaScript实现的前端AES加密解密功能【基于CryptoJS】
Aug 28 #Javascript
You might like
PHP管理内存函数 memory_get_usage()使用介绍
2012/09/23 PHP
php堆排序实现原理与应用方法
2015/01/03 PHP
visual studio code 调试php方法(图文详解)
2017/09/15 PHP
yii框架数据库关联查询操作示例
2019/10/14 PHP
PHP 实现 WebSocket 协议原理与应用详解
2020/04/22 PHP
JavaScript入门教程 Cookies
2009/01/31 Javascript
基于jQuery实现表格数据的动态添加与统计的代码
2011/01/31 Javascript
再谈javascript面向对象编程
2012/03/18 Javascript
javascript获取隐藏dom的宽高 具体实现
2013/07/14 Javascript
jQuery实现企业网站横幅焦点图切换功能实例
2015/04/30 Javascript
基于jQuery实现拖拽图标到回收站并删除功能
2015/11/25 Javascript
JavaScript阻止回车提交表单的方法
2015/12/30 Javascript
详解Angualr 组件间通信
2017/01/21 Javascript
深入理解JavaScript继承的多种方式和优缺点
2017/05/12 Javascript
Angularjs在360兼容模式下取数据缓存问题的解决办法
2017/06/22 Javascript
Vue二次封装axios为插件使用详解
2018/05/21 Javascript
vue2.0实现音乐/视频播放进度条组件
2018/06/06 Javascript
Vue项目History模式404问题解决方法
2018/10/31 Javascript
微信小程序HTTP接口请求封装代码实例
2019/09/05 Javascript
layui表格 列自动适应大小失效的解决方法
2019/09/06 Javascript
关于uniApp editor微信滑动问题
2021/01/15 Javascript
[05:34]2014DOTA2国际邀请赛中国区预选赛精彩TOPPLAY第二弹
2014/06/25 DOTA
常用python数据类型转换函数总结
2014/03/11 Python
python创建列表并给列表赋初始值的方法
2015/07/28 Python
详谈pandas中agg函数和apply函数的区别
2018/04/20 Python
pycharm中成功运行图片的配置教程
2018/10/28 Python
Python设计模式之命令模式原理与用法实例分析
2019/01/11 Python
用Python实现将一张图片分成9宫格的示例
2019/07/05 Python
python用线性回归预测股票价格的实现代码
2019/09/04 Python
利用python3 的pygame模块实现塔防游戏
2019/12/30 Python
容易被忽略的Python内置类型
2020/09/03 Python
Django用内置方法实现简单搜索功能的方法
2020/12/18 Python
python drf各类组件的用法和作用
2021/01/12 Python
音乐器材管理制度
2014/01/31 职场文书
共产党员公开承诺书
2014/03/25 职场文书
Redis缓存-序列化对象存储乱码问题的解决
2021/06/21 Redis