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 相关文章推荐
javascript实现日历控件(年月日关闭按钮)
Dec 12 Javascript
通过JS自动隐藏手机浏览器的地址栏实现原理与代码
Jan 02 Javascript
解析js如何获取当前url中的参数值并复制给input
Jun 23 Javascript
JQUERY dialog的用法详细解析
Dec 19 Javascript
轻松掌握JavaScript策略模式
Aug 25 Javascript
如何处理JSON中的特殊字符
Nov 30 Javascript
JS中Swiper的使用和轮播图效果
Aug 11 Javascript
微信小程序实现简单表格
Feb 14 Javascript
详解在Angular4中使用ng2-baidu-map的方法
Jun 19 Javascript
Node.js 中判断一个文件是否存在
Aug 24 Javascript
js实现筛选功能
Nov 24 Javascript
vue里使用create, mounted调用方法
Apr 26 Vue.js
利用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
APACHE的AcceptPathInfo指令使用介绍
2013/01/18 PHP
Laravel框架学习笔记(一)环境搭建
2014/10/15 PHP
smarty内置函数capture用法分析
2015/01/22 PHP
Laravel框架创建路由的方法详解
2019/09/04 PHP
php的无刷新操作实现方法分析
2020/02/28 PHP
你需要知道的JavsScript可以做什么?
2007/06/29 Javascript
jQuery建立一个按字母顺序排列的友好页面索引(兼容IE6/7/8)
2013/02/26 Javascript
常见的jQuery选择器汇总
2014/11/24 Javascript
node.js中的path.extname方法使用说明
2014/12/09 Javascript
jQuery实现统计输入文字个数的方法
2015/03/11 Javascript
如何屏蔽防止别的网站嵌入框架代码
2015/08/24 Javascript
详解Javascript事件驱动编程
2016/01/03 Javascript
Node.js实现JS文件合并小工具
2016/02/02 Javascript
前端面试题及答案整理(二)
2016/08/26 Javascript
Bootstrap表单简单实现代码
2017/03/06 Javascript
javascript计算对象长度的方法
2017/10/25 Javascript
基于 Vue.js 2.0 酷炫自适应背景视频登录页面实现方式
2018/01/17 Javascript
详解JS函数stack size计算方法
2018/06/18 Javascript
JavaScript笛卡尔积超简单实现算法示例
2018/07/30 Javascript
ES6 迭代器与可迭代对象的实现
2019/02/11 Javascript
bootstrap 日期控件 datepicker被弹出框dialog覆盖的解决办法
2019/07/09 Javascript
[02:05]2014DOTA2西雅图邀请赛 专访啸天mik夫妻档
2014/07/08 DOTA
[05:05]DOTA2亚洲邀请赛 战队出场仪式
2015/02/07 DOTA
django连接oracle时setting 配置方法
2019/08/29 Python
Python PyQt5运行程序把输出信息展示到GUI图形界面上
2020/04/27 Python
pycharm 2018 激活码及破解补丁激活方式
2020/09/21 Python
pycharm中leetcode插件使用图文详解
2020/12/07 Python
全球性的在线时尚男装零售商:boohooMAN
2016/12/17 全球购物
英国文胸专家:AmpleBosom.com
2018/02/06 全球购物
美国在线旅行社:Crystal Travel
2018/09/11 全球购物
教师自荐信
2013/12/10 职场文书
财政专业求职信范文
2014/02/19 职场文书
百年校庆节目主持词
2014/03/27 职场文书
作风建设剖析材料
2014/10/06 职场文书
初三英语教学计划
2015/01/23 职场文书
2015年电话客服工作总结
2015/05/18 职场文书