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

本文为大家分享了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.最终前端实现效果如下:

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

(0)

相关推荐

  • layui框架实现文件上传及TP3.2.3(thinkPHP)对上传文件进行后台处理操作示例

    本文实例讲述了layui框架实现文件上传及TP3.2.3对上传文件进行后台处理操作.分享给大家供大家参考,具体如下: layui框架是1.0.9版本.. 首先html页面代码如下: <div class="layui-form-item" id="upload_file"> <div class="layui-input-block" style="width: 300px;"> <input t

  • ThinkPHP5+Layui实现图片上传加预览功能

    html代码 <div class="layui-upload"> <button type="button" class="layui-btn" id="cover">上传封面</button> </div> <div class="layui-input-inline"> <img id="preview" width

  • 解决layui上传文件提示上传异常,实际文件已经上传成功的问题

    layui上传文件提示上传异常,实际文件已经上传成功 原因:上传回调的方法接收的参数应该是json格式的,之前返回的是String,所以一直走异常的方法 @ResponseBody @RequestMapping("/web/upload") public JSONObject uploadSourceData(@RequestParam(value="file") MultipartFile file ){ String filePath = "&quo

  • layui文件上传实现代码

    本文实例为大家分享了layui文件上传的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>文件上传</title> <link rel="stylesheet" href="layui/css/layui.css"> <link rel="st

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

    本文为大家分享了layui实现文件或图片上传记录的具体代码,供大家参考,具体内容如下 首先是layui自己的官网关于图片/文件上传的帮助文档: 接下来是我自己的使用记录: 1.首先在js中定义一个全局变量 var uploadListIns; 2.进行赋值 //多文件列表示例 /** * 图片上传 */ layui.use('upload', function(){ var $ = layui.jquery,upload = layui.upload; var demoListView = $(

  • 解决layui富文本编辑器图片上传无法回显的问题

    layui富文本编辑器用起来挺方便的,但是不足的是不提供图片上传的接口,需要自己写上传接口,而且返回的数据类型要符合layui富文本编辑器图片上传插件的要求,否则图片可以上传成功,但是无法回显,这个问题找了好久才找到原来是返回的数据结构不符合layui要求,经过修改才得以解决,现在把代码贴出来共享.加粗字体的代码是返回数据结构 @ResponseBody @RequestMapping(value = "fillupf", method = RequestMethod.POST) pu

  • tp5使用layui实现多个图片上传(带附件选择)的方法实例

    tp5使用layui实现多个图片上传(带附件选择),如何加载layui在此不详细说明,有需要可以百度 html代码,主要处理都是在jq中,完成方法全部原创,也许不是最简单的,但也能实现效果 {include file="public/header" /} <body> <div class="x-nav"> <span class="layui-breadcrumb"> <a href="&qu

  • YII中Ueditor富文本编辑器文件和图片上传的配置图文教程

    将Ueditor集成到YII框架中后,参照editor_config.js中的toolbars中的内容,更改options中标签可以给编辑器添加想要的功能: 因此要想添加文件和图片上传功能,应该加入以下两个标签: 文本编辑器中便出现了对应的两个选项: 但是点击上传图片按钮后发现,无法正常进行图片上传,文件上传也是失败的,问题都是Flash Player需要升级, 因此在火狐浏览器中安装对应的flash player组件,选择其中一个工作: 此时,文件上传和图片上传功能就能正常使用了: 上传路径的

  • php多个文件及图片上传实例详解

    本文实例讲述了php多个文件及图片上传的方法.分享给大家供大家参考.具体实现方法如下: 多个文件上传是在单文件上传的基础上利用遍历数组的方式进行遍历表单数组然后把文件一个个上传到服务器上了,下面就来看一个简单多个文件上传实例 多个文件上传和单独文件上传的处理方式是一样的,只需要在客户端多提供几个类型为"file"的输入表单,并指定不同的"name"属性值.例如,在下面的代码中,可以让用户同时选择三个本地文件一起上传给服务器,客户端的表单如下所示: 复制代码 代码如下

  • SpringBoot限制文件或图片上传大小的两种配置方法

    今天做图片上传时候,报了如下错:服务运行异常,Could not parse multipart servlet request; nested exception is java.lang.IllegalStateException: org.apache.tomcat.util.http.fileupload.FileUploadBase$FileSizeLimitExceededException: The field file exceeds its maximum permitted

  • SpringBoot 文件或图片上传与下载功能的实现

    导入依赖(pom.xml) <!-- 上传下载需要设计到的jar包 --> <dependency> <groupId>commons-io</groupId> <artifactId>commons-io</artifactId> <version>2.6</version> </dependency> <dependency> <groupId>commons-fileu

  • 微信小程序实现多文件或者图片上传

    本文实例为大家分享了微信小程序实现多文件或者图片上传的具体代码,供大家参考,具体内容如下 html <view class="list1">     <view class="fonts">上传事件相关资料或文件(jpg/pdf/word)<text class="xuan">(选填)</text> </view>     <view class="cell"&

  • ajax实现异步文件或图片上传功能

    大家好,这篇文章我要给大家分享一个网页文件上传功能的代码,希望大家可以有所参考,或者给我提些建议. 众所周知现在的各大网站基本都设有文件上传功能,用户可以把自己喜欢的图片或其他文件放在网上存起来,以便以后用的时候方便去找,可是一个网页的文件上传功能究竟该怎么去设置呢?今天我就以图片上传为例向大家展示文件上传功能的具体步骤. 其实文件上传有两种方法,一种是from表单submit提交,一种是ajax实现异步提交,可是form表单提交有个问题就是每次在上传完成时会刷新界面,不能实现异步上传,所以现在

  • 微信小程序实现文件、图片上传功能

    本文实例为大家分享了微信小程序实现文件图片上传的具体代码,供大家参考,具体内容如下 在我看来微信小程序的功能挺强大的,提供了很多API让你直接使用. 这里我说一下微信小程序如何实现图片的上传 1.在微信公众号平台设置uploadFile合法域名 点击设置-开发设置,可以看到服务器域名,点击修改,设置一下你的uploadFile合法域名. 否则会出现以下错误. 2.使用wx.chooseImage和wx.uploadFile实现图片上传 代码如下 wx.chooseImage({ count: 1

随机推荐