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模板技术
Apr 27 Javascript
jquery中对表单的基本操作代码
Jul 29 Javascript
js 调用父窗口的具体实现代码
Jul 15 Javascript
jQuery防止click双击多次提交及传递动态函数或多参数
Apr 02 Javascript
js兼容pc端浏览器并有多种弹出小提示的手机端浮层控件实例
Apr 29 Javascript
简述JavaScript对传统文档对象模型的支持
Jun 16 Javascript
跟我学习javascript的Date对象
Nov 19 Javascript
Vue.js快速入门教程
Sep 07 Javascript
JS实现PC手机端和嵌入式滑动拼图验证码三种效果
Feb 15 Javascript
ECMAscript 变量作用域总结概括
Aug 18 Javascript
微信小程序实现类似微信点击语音播放效果
Mar 30 Javascript
vue使用watch监听属性变化
Apr 30 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
PHP读取MySQL数据代码
2008/06/05 PHP
php提示undefined index的几种解决方法
2012/05/21 PHP
php教程之魔术方法的使用示例(php魔术函数)
2014/02/12 PHP
PHP页面实现定时跳转的方法
2014/10/31 PHP
详解PHP+AJAX无刷新分页实现方法
2015/11/03 PHP
PHP+JQuery+Ajax实现分页方法详解
2016/08/06 PHP
PHPExcel导出2003和2007的excel文档功能示例
2017/01/04 PHP
PHP封装类似thinkphp连贯操作数据库Db类与简单应用示例
2019/05/08 PHP
使用Laravel中的查询构造器实现增删改查功能
2019/09/03 PHP
Jquery + Ajax调用webService实例代码(asp.net)
2010/08/27 Javascript
HTML中的setCapture和releaseCapture使用介绍
2012/03/21 Javascript
文本框只能选择数据到文本框禁止手动输入
2013/11/22 Javascript
jquery图形密码实现方法
2015/03/11 Javascript
Backbone.js框架中简单的View视图编写学习笔记
2016/02/14 Javascript
JavaScript的ExtJS框架中数面板TreePanel的使用实例解析
2016/05/21 Javascript
js实现点击图片自动提交action的简单方法
2016/10/16 Javascript
JavaScript闭包的简单应用
2017/09/01 Javascript
浅谈Vue.js路由管理器 Vue Router
2018/08/16 Javascript
详解如何用webpack4从零开始构建react开发环境
2019/01/27 Javascript
微信小程序动态显示项目倒计时
2019/06/20 Javascript
浅谈layer弹出层按钮颜色修改方法
2019/09/11 Javascript
JS操作Fckeditor的一些常用方法(获取、插入等)
2020/02/19 Javascript
使用Python进行二进制文件读写的简单方法(推荐)
2016/09/12 Python
PyQt5每天必学之切换按钮
2020/08/20 Python
对pandas中两种数据类型Series和DataFrame的区别详解
2018/11/12 Python
Pytorch Tensor的索引与切片例子
2019/08/18 Python
Jupyter Notebook 文件默认目录的查看以及更改步骤
2020/04/14 Python
使用tensorflow实现VGG网络,训练mnist数据集方式
2020/05/26 Python
Java基础面试题
2012/11/02 面试题
服务生自我鉴定
2014/01/22 职场文书
会计专业应届生自荐信
2014/02/07 职场文书
北京奥运会口号
2014/06/21 职场文书
弘扬焦裕禄精神走群众路线思想汇报
2014/09/12 职场文书
2014年最新党员对照检查材料汇总
2014/09/15 职场文书
小学四年级作文之写景
2019/08/23 职场文书
mysql字段为NULL索引是否会失效实例详解
2022/05/30 MySQL