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

首先 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 上传插件 带预览 非自动上传功能的实例(非常实用)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。

(0)

相关推荐

  • layui文件上传实现代码

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

  • layui文件上传控件带更改后数据传值的方法

    1,文件上传控件开启 2,before内添加方法,以json格式存储数据.数据以对象形式存在,切对象格式不能直接传到后台,所以转化为json格式再进行传送. 3,后台String接收param参数,转为json,直接通过get方法取值保存 后台代码: 以上这篇layui文件上传控件带更改后数据传值的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

  • layui扩展上传组件模拟进度条的方法

    如下所示: <div id="uploadPatchForm" style="display:none" class="roundRect"> <div id="uploadLoadingDiv"> <div class="layui-progress" lay-showpercent="true" lay-filter="demo" &

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

    首先 Html部分: <form method="post" action="?" οnsubmit="return check();" id="form"> <div class="refund-img"> <div class="refund-img-item addRefundimg" id="addImg"> <img

  • Ajax上传图片及上传前先预览功能实例代码

    手头上有几个小项目用到了easyUI,一开始决定使用easyUI就注定了项目整体上前后端分离,基本上所有的请求都采用Ajax来完成.在文件上传的时候用到了Ajax上传文件,以及图片在上传之前的预览效果,解决了这两个小问题,和小伙伴们分享下. 上传之前的预览 方式一 先来说说图片上传之前的预览问题.这里主要采用了HTML5中的FileReader对象来实现,关于FileReader对象,如果小伙伴们不了解,可以查看这篇文章HTML5学习之FileReader接口.我们来看看实现方式: <!DOCT

  • Nodejs实现图片上传、压缩预览、定时删除功能

    前言 我们程序员日常都会用到图片压缩,面对这么常用的功能,肯定要尝试实现一番. 第一步,node基本配置 这里我们用到的是koa框架,它可是继express框架之后又一个更富有表现力.更健壮的web框架. 1.引入基本配置 const Koa = require('koa');// koa框架 const Router = require('koa-router');// 接口必备 const cors = require('koa2-cors'); // 跨域必备 const tinify =

  • js实现头像上传并且可预览提交

    在用户注册账号或者修改资料的时候会需要用户在本地选择一张图片作为头像,并同时预览, 常见的思路有两种:一是将图片上传至服务器的临时文件夹中,并返回该图片的url,然后渲染在html页面:另一种思路是,直接在本地内存中预览图片,用户确认提交后再上传至服务器保存. 这两种方法各有利弊,方法一很明显,浪费流量和服务器资源:方法二则加重了浏览器的负担,并且对浏览器的兼容性要求更高. 这里介绍的是直接在本地内存中预览图片,用户确认提交后再上传至服务器保存这种方法 html <div class="r

  • html5以及jQuery实现本地图片上传前的预览代码实例讲解

    html5以及jQuery实现本地图片上传前的预览,效果类似如下: 选择图片前的页面: 选择图片之后的预览效果: 下面直接上代码(只是最简单的实现代码,css样式没有复制,自己随意发挥) <!DOCTYPE html> <html> <head> <title>HTML5上传图片预览</title> <meta http-equiv="Content-Type" content="text/html; char

  • SpringBoot实现PPT格式文件上传并在线预览功能

    1.需要引入依赖 <dependency> <groupId>com.itextpdf</groupId> <artifactId>itextpdf</artifactId> <version>5.5.9</version> </dependency> <dependency> <groupId>org.apache.poi</groupId> <artifactId&

  • 分离与继承的思想实现图片上传后的预览功能:ImageUploadView

    本文要介绍的是网页中常见的图片上传后直接在页面生成小图预览的实现思路,考虑到该功能有一定的适用性,于是把相关的逻辑封装成了一个ImageUploadView组件,实际使用效果可查看下一段的git效果图.在实现这个组件的过程中,有用到前面几篇博客介绍的相关内容,比如继承库class.js,任意组件的事件管理库eventBase.js,同时包含进了自己对职责分离,表现与行为分离这两方面的一些思考,欢迎阅读与交流. 演示效果: 注:由于演示的代码都是静态的,所以文件上传的组件是用setTimeout模

  • jquery 图片上传按比例预览插件集合

    js部分是这样的: 复制代码 代码如下: //**********************图片上传预览插件************************ //作者:IDDQD(2009-07-01) //Email:iddqd5376@163.com //http://blog.sina.com.cn/iddqd //版本:1.0 //说明:图片上传预览插件 //上传的时候可以生成固定宽高范围内的等比例缩放图 //参数设置: //width 存放图片固定大小容器的宽 //height 存放图片

  • jquery实现图片上传前本地预览

    前段时间遇到一个问题,前端想实现图片上传预览(不经过后端PHP或JAVA处理),用户点击file按钮上传文件,点击确定马上就能看到预览的效果,但在实现的时候无论怎样都取不到file上图片的真实路径,得到的反而是C:\fakepath\a.jpg,这个路径是错误的.百度之后得到说浏览器基于保护用户的相关安全措施,隐藏了上传的真实路径,用fakepath代替,当然,调整浏览器的相关安全设置可以解决这个问题.但我们不可能让所有用户都通过设置浏览器的安全设置来进行图片上传,这种方法在网络交互上显然不现实

  • JS+HTML5 FileReader实现文件上传前本地预览功能

    HTML5之FileReader的使用 HTML5定义了FileReader作为文件API的重要成员用于读取文件,根据W3C的定义,FileReader接口提供了读取文件的方法和包含读取结果的事件模型. FileReader的使用方式非常简单,可以按照如下步骤创建FileReader对象并调用其方法: 1.检测浏览器对FileReader的支持 if(window.FileReader) { var fr = new FileReader(); // add your code here } e

随机推荐