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 相关文章推荐
DOM下的节点属性和操作小结
May 14 Javascript
JavaScript实现两个Table固定表头根据页面大小自行调整
Jan 03 Javascript
Eclipse配置Javascript开发环境图文教程
Jan 29 Javascript
Node.js的基本知识简单汇总
Sep 19 Javascript
Bootstrap modal 多弹窗之叠加显示不出弹窗问题的解决方案
Feb 23 Javascript
layui导航栏实现代码
May 19 Javascript
vue与bootstrap实现时间选择器的示例代码
Aug 26 Javascript
ECMAScript6变量的解构赋值实例详解
Sep 19 Javascript
Node使用Sequlize连接Mysql报错:Access denied for user ‘xxx’@‘localhost’
Jan 03 Javascript
AngularJS中重新加载当前路由页面的方法
Mar 09 Javascript
Vue函数式组件-你值得拥有
May 09 Javascript
jquery实现自定义树形表格的方法【自定义树形结构table】
Jul 12 jQuery
利用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
PHP4实际应用经验篇(7)
2006/10/09 PHP
php使用递归函数实现数字累加的方法
2015/03/16 PHP
从刷票了解获得客户端IP的方法
2015/09/21 PHP
php在windows环境下获得cpu内存实时使用率(推荐)
2018/02/08 PHP
php DES加密算法实例分析
2019/09/18 PHP
用js判断浏览器是否是IE的比较好的办法
2007/05/08 Javascript
你必须知道的JavaScript 中字符串连接的性能的一些问题
2013/05/07 Javascript
JavaScript代码判断点击第几个按钮
2015/12/13 Javascript
jquery中实现时间戳与日期相互转换
2016/04/12 Javascript
探索Vue.js component内容实现
2016/11/03 Javascript
VUE2.0+Element-UI+Echarts封装的组件实例
2018/03/02 Javascript
jQuery创建及操作xml格式数据示例
2018/05/26 jQuery
vue自定义一个v-model的实现代码
2018/06/21 Javascript
关于vue编译版本引入的问题的解决
2018/09/17 Javascript
JQuery属性操作与循环用法示例
2019/05/15 jQuery
js实现简单进度条效果
2020/03/25 Javascript
[59:53]DOTA2-DPC中国联赛 正赛 VG vs Elephant BO3 第二场 3月6日
2021/03/11 DOTA
python分析网页上所有超链接的方法
2015/05/08 Python
Python中json格式数据的编码与解码方法详解
2016/07/01 Python
使用python脚本实现查询火车票工具
2018/07/19 Python
python微信聊天机器人改进版(定时或触发抓取天气预报、励志语录等,向好友推送)
2019/04/25 Python
python实现抠图给证件照换背景源码
2019/08/20 Python
深入浅析Python科学计算库Scipy及安装步骤
2019/10/12 Python
python修改微信和支付宝步数的示例代码
2020/10/12 Python
雪花秀美国官方网站:韩国著名草本护肤化妆品品牌
2016/10/19 全球购物
迪卡侬英国官网:Decathlon英国
2017/04/08 全球购物
骨干教师培训制度
2014/01/13 职场文书
先进工作者获奖感言
2014/02/08 职场文书
环境科学专业教师求职信
2014/07/12 职场文书
天下第一关导游词
2015/02/06 职场文书
刑事撤诉申请书
2015/05/18 职场文书
大学生十八大感想
2015/08/11 职场文书
完美处理python与anaconda环境变量的冲突问题
2021/04/07 Python
教你解决往mysql数据库中存入汉字报错的方法
2021/05/06 MySQL
React如何创建组件
2021/06/27 Javascript
Python中的 enumerate和zip详情
2022/05/30 Python