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 相关文章推荐
比较简单的一个符合web标准的JS调用flash方法
Nov 29 Javascript
js 多浏览器分别判断代码
Apr 01 Javascript
动态载入/删除/更新外部 JavaScript/Css 文件的代码
Jul 03 Javascript
jQuery动态添加 input type=file的实现代码
Jun 14 Javascript
导入extjs、jquery 文件时$使用冲突问题解决方法
Jan 14 Javascript
Jquery插件分享之气泡形提示控件grumble.js
May 20 Javascript
js焦点文字滚动效果代码分享
Aug 25 Javascript
JavaScript数组复制详解
Feb 02 Javascript
基于JS脚本语言的基础语法详解
Jul 22 Javascript
Javascript(es2016) import和require用法和区别详解
Aug 11 Javascript
vue-cli项目中怎么使用mock数据
Sep 27 Javascript
使用vue的v-for生成table并给table加上序号的实例代码
Oct 27 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最常用的ini函数分析 针对PHP.ini配置文件
2010/04/22 PHP
php创建桌面快捷方式实现方法
2015/12/31 PHP
PHP正则+Snoopy抓取框架实现的抓取淘宝店信誉功能实例
2017/05/17 PHP
JQuery Dialog的内存泄露问题解决方法
2010/06/18 Javascript
lyhucSelect基于Jquery的Select数据联动插件
2011/03/29 Javascript
jQuery JSON的解析方式分享
2011/04/05 Javascript
JavaScript高级程序设计 客户端存储学习笔记
2011/09/10 Javascript
浅析hasOwnProperty方法的应用
2013/11/20 Javascript
千分位数字格式化(用逗号隔开 代码已做了修改 支持0-9位逗号隔开)的JS代码
2013/12/05 Javascript
jquery制作弹窗提示窗口代码分享
2014/03/02 Javascript
javascript闭包(Closure)用法实例简析
2015/11/30 Javascript
使用jQuery制作遮罩层弹出效果的极简实例分享
2016/05/12 Javascript
Vue中的v-cloak使用解读
2017/03/27 Javascript
vue-router实现webApp切换页面动画效果代码
2017/05/25 Javascript
详解Angular4中路由Router类的跳转navigate
2017/06/09 Javascript
node中使用es5/6以及支持性与性能对比
2017/08/11 Javascript
Angular2实现组件交互的方法分析
2017/12/19 Javascript
使用flow来规范javascript的变量类型
2019/09/12 Javascript
vue双击事件2.0事件监听(点击-双击-鼠标事件)和事件修饰符操作
2020/07/27 Javascript
如何手写一个简易的 Vuex
2020/10/10 Javascript
Python爬虫包 BeautifulSoup  递归抓取实例详解
2017/01/28 Python
Python从使用线程到使用async/await的深入讲解
2018/09/16 Python
python复制列表时[:]和[::]之间有什么区别
2018/10/16 Python
python连接mongodb密码认证实例
2018/10/16 Python
使用TensorFlow搭建一个全连接神经网络教程
2020/02/06 Python
Python enumerate内置库用法解析
2020/02/24 Python
使用tensorflow进行音乐类型的分类
2020/08/14 Python
夏威夷灵感服装及配饰:Reyn Spooner
2018/09/18 全球购物
银行营业厅大堂经理岗位职责
2014/01/06 职场文书
关于人生的感言
2014/01/17 职场文书
硕士研究生求职自荐信范文
2014/03/11 职场文书
物理分数没达标检讨书
2014/09/13 职场文书
党的群众路线领导班子整改方案
2014/09/27 职场文书
大学生毕业评语
2014/12/31 职场文书
工程主管竞聘书
2015/09/15 职场文书
win sever 2022如何占用操作主机角色
2022/06/25 Servers