layui 上传插件 带预览 非自动上传功能的实例(非常实用)


Posted in Javascript onSeptember 23, 2019

首先 Html部分:

<form method="post" action="?" οnsubmit="return check();" id="form">
 <div class="refund-img">
 <div class="refund-img-item addRefundimg" id="addImg">
 <img class="proimg" src="{DT_PATH}member/images/addbanner.png">
 </div>
 <input type="hidden" name="thumb[]" id="proImg1">
 <input type="hidden" name="thumb[]" id="proImg2">
 <input type="hidden" name="thumb[]" id="proImg3">
 </div>
 <span class="refund-img-prompt">Max. 3 attachements. Max. 3MB for each image.</span>
 <div class="comment-btn" id="comment-btn">Submit</div>
 <input style="display: none;" type="submit" name="submit" id="submitForm"/>
 </form>

JS部分:

//添加图片
 layui.use('upload', function() {
  var upload = layui.upload;//得到upload对象
 
 
  var frequency = 0;//记录上传成功的个数
 
 
  //多文件列表示例
  var demoListView = $('.comment-imgbox.refund-img #addImg'),
   uploadListIns = upload.render({ //执行实例
    elem: '#addImg',//绑定文件上传的元素
    url: '../upload.php',
    multiple: true,
    number: 3,//允许上传的数量
    auto: false,
    bindAction: '#comment-btn',//指向一个按钮触发上传 
     size:'3072',//尺寸
    accept: "images",//指定允许上传时校验的文件类型
     acceptMime:'image/*',只显示图片文件
    exts:"jpg|png|gif|jpeg",//允许后缀
    drag:"false",//是否文件拖拽上传
    data:{width:400,height:400},//上传接口的额外参数
    choose: function(obj) { //选择文件后的回调函数
     var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
  //如果图片3个,addImg隐藏 //假如项目只能传3个图片
  if(Object.keys(files).length == 3){
  $("#addImg").hide();
  }
 
     //读取本地文件 如果是多文件,则会遍历。(不支持ie8/9)
      console.log(index); //得到文件索引console.log(file); //得到文件对象console.log(result); //得到文件base64编码,比如图片//obj.upload(index, file); //对上传失败的单个文件重新上传,一般在某个事件中使用
     obj.preview(function(index, file, result) {
      //obj.upload(index, file); //对上传失败的单个文件重新上传,一般在某个事件中使用
       var div = $(['<div id="upload-' + index + '" class="refund-img-item exist">', '<img class="proimg" src="' + result + '">',   '<img src="../member/images/close.png" class="refund-img-close">', '</div>'].join(''));
      //删除列表中对应的文件
      div.find('.refund-img-close').on('click', function() {
       delete files[index]; //删除对应的文件
       div.remove();
       uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值,以免删除后出现同名文件不可选
       $("#addImg").show();
      });
 
      demoListView.before(div);
 
     });
    },
    before:function(){ //obj参数包含的信息,跟 choose回调完全一致如果带参 修改了layui js的before方法
 
     return confirm("Did you confirm submitting this review? Comments scores and content will not be changeable after submission');");
      //为了可以让客户在点击确定是时候有2个选择
    },
  done: function(res) {
  //上传成功
  frequency++;
  $("#proImg"+frequency).val(res);//隐藏域表单赋值
  alert(11);
          
          //当节点与上传成功一致时
   if($(".refund-img .exist").length == frequency){
  $("#submitForm").trigger("click");//提交表单
  }
 },
 error: function(res, index, upload) {
  Dtoast("Failed to upload picture");
 }
 })
 });

部分CSS:

.refund-img{
 display: -webkit-box;
 display: -moz-box;
 display: -ms-flexbox;
 display: flex;
 -webkit-box-align: center;
  -moz-box-align: center;
  -ms-flex-align: center;
   align-items: center;
 margin-top: 30px;
}
.refund-img-item{
 width: 30%;
 position: relative;
}
.refund-img-item:nth-child(2){
 margin: 0 5%;
}
.addRefundimg{
 border: 1px dashed #BFBFBF;
}
.refund-img-item img.proimg{
 width: 100%;
}
.refund-img-item input[type=file]{
 position: absolute;
 left: 0;
 top: 0;
 width: 100%;
 height: 100%;
 outline: none;
 border: none;
 opacity: 0;
}
.refund-img-close{
 position: absolute;
 width: 20px;
 top: 0;
 right: 0;
 padding-right: 5px;
 padding-top: 5px;
 /*display: none;*/
}
.addRefundimg .refund-img-close{
 /*display: none;*/
}
.refund-img-prompt{
 display: block;
 margin-top: 5px;
 margin-bottom: 3px;
}
 
.refund-submit{
 display: block;
 text-align: center;
 height: 40px;
 line-height: 40px;
 width: 98%;
 background-color: #fc6900;
 color: #fff;
 font-size: 16px;
 border: none;
 outline: none;
 margin-top: 8px;
 margin-bottom: 20px;
}
.comment-btn{
 width: 96%;
 background-color: #fc6900;
 color: #fff;
 height: 36px;
 text-align: center;
 line-height: 36px;
 display: block;
 outline: none;
 border: none;
 margin-top: 30px;
}

我用的layui版本是layui2.2.5 它这个默认不支持阻止图片上传的,所以需要改动框架的upload.js,

改动前 (查找before快速定位):

y=function(){return"choose"===t?l.choose&&l.choose(g):(l.before&&l.before(g),a.ie?a.ie>9?u():c():void u())};

降上面代码稍作修改 改为以下:

if("choose"===t){return l.choose&&l.choose(g)};
if(l.before&&l.before(g)){return false};
return (a.ie?a.ie>9?u():c():void u());

以上这篇layui 上传插件 带预览 非自动上传功能的实例(非常实用)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
服务端 VBScript 与 JScript 几个相同特性的写法 By shawl.qiu
Mar 06 Javascript
解javascript 混淆加密收藏
Jan 16 Javascript
jquery实现表单验证简单实例演示
Nov 23 Javascript
JavaScript ParseFloat()方法
Dec 18 Javascript
jQuery simpleModal插件的使用介绍
Aug 30 Javascript
微信小程序 条件渲染详解
Oct 09 Javascript
基于JS实现二维码图片固定在右下角某处并跟随滚动条滚动
Feb 08 Javascript
vue-router重定向不刷新问题的解决
Jun 25 Javascript
JS+HTML5 Canvas实现简单的写字板功能示例
Aug 30 Javascript
js实现的格式化数字和金额功能简单示例
Jul 30 Javascript
js实现ajax的用户简单登入功能
Jun 18 Javascript
vue 弹出遮罩层样式实例
Jul 22 Javascript
详解从vue-loader源码分析CSS Scoped的实现
Sep 23 #Javascript
layer ui 导入文件之前传入数据的实例
Sep 23 #Javascript
Node.js实现简单管理系统
Sep 23 #Javascript
webpack的pitching loader详解
Sep 23 #Javascript
layui 富文本图片上传接口与普通按钮 文件上传接口的例子
Sep 23 #Javascript
深入探索VueJS Scoped CSS 实现原理
Sep 23 #Javascript
小程序实现锚点滑动效果
Sep 23 #Javascript
You might like
PHP 木马攻击防御技巧
2009/06/13 PHP
PHP array操作10个小技巧分享
2011/06/23 PHP
php实例分享之通过递归实现删除目录下的所有文件详解
2014/05/15 PHP
Thinkphp搜索时首页分页和搜索页保持条件分页的方法
2014/12/05 PHP
PHP简单日历实现方法
2016/07/20 PHP
CI框架(CodeIgniter)实现的导入、导出数据操作示例
2018/05/24 PHP
Laravel 自动生成验证的实例讲解:login / logout
2019/10/14 PHP
Laravel自动生成UUID,从建表到使用详解
2019/10/24 PHP
win10下 php安装seaslog扩展的详细步骤
2020/12/04 PHP
动态刷新 dorado树的js代码
2009/06/12 Javascript
JQuery中each()的使用方法说明
2010/08/19 Javascript
基于jquery DOM写的类似微博发布的效果
2012/10/20 Javascript
angular简介和其特点介绍
2015/01/29 Javascript
JS实现动态给图片添加边框的方法
2015/04/01 Javascript
AngularJS中实现动画效果的方法
2016/07/28 Javascript
ECMAScript6--解构
2017/03/30 Javascript
利用JavaScript在网页实现八数码启发式A*算法动画效果
2017/04/16 Javascript
微信小程序实现瀑布流布局与无限加载的方法详解
2017/05/12 Javascript
nodejs实现截取上传视频中一帧作为预览图片
2017/12/10 NodeJs
layui递归实现动态左侧菜单
2019/07/26 Javascript
vue webpack build资源相对路径的问题及解决方法
2020/06/04 Javascript
vue+elementui通用弹窗的实现(新增+编辑)
2021/01/07 Vue.js
Python多线程结合队列下载百度音乐的方法
2015/07/27 Python
win7上python2.7连接mysql数据库的方法
2017/01/14 Python
Python数据可视化库seaborn的使用总结
2019/01/15 Python
python实现nao机器人手臂动作控制
2019/04/29 Python
python实现知乎高颜值图片爬取
2019/08/12 Python
大学生毕业自我鉴定范文
2013/09/19 职场文书
女娲补天教学反思
2014/02/05 职场文书
三分钟演讲稿范文
2014/04/24 职场文书
公司委托书范本5篇
2014/09/20 职场文书
党员评议思想汇报
2014/10/08 职场文书
预备党员入党思想汇报(范文)
2019/08/14 职场文书
Kubernetes中Deployment的升级与回滚
2022/04/01 Servers
《王国之心》迎来了发售的20周年, 野村哲发布贺图
2022/04/11 其他游戏
mysql实现将字符串字段转为数字排序或比大小
2022/06/14 MySQL