关于layui文件上传-- 多图片上传预览

忘是亡心i 2022-05-27 01:17 399阅读 0赞

<html>
    
    <head>
    
    <meta charset='UTF-8'>
    
    <meta name='Author' content='wanghua'>
    
    <title>Test upload with Layui2</title>
    
    <link rel='stylesheet' href='/assets/layui2/css/layui.css'/>
    
      <style>
    
        .thumb {margin-left:5px; margin-top:15px; height:128px}
    
        #prevModal {width:100%; height:100%; text-align:center; display:none;}
    
        #img_prev {max-width:98%; max-height:98%; margin: 10px auto}
    
      </style>
    
    </head>
    
    <body>
    
    
    
    <div class='layui-container' style='margin-top:15px'>
    
        <button type="button" class="layui-btn" id="test1">
    
           <i class="layui-icon"></i>选择图片
    
        </button>
    
        <div class='layui-input-block' id='div_prev' title=''></div>
    
    </div>
    
    
    
    <div id='prevModal'>
    
       <img id='img_prev'/>
    
    </div>

<script type='text/javascript' src='/assets/layui2/layui.js'></script>
    
    <script type='text/javascript'>
    
    layui.use(['upload','layer'], function(){
    
        var upload = layui.upload, layer = layui.layer, $ = layui.jquery;
    
        var uploadInst = upload.render({
    
        elem: '#test1', //绑定元素
    
        accept: 'images', //允许上传的文件类型
    
        multiple: true, //允许多文件上传
    
        auto: false, //选完文件后不要自动上传
    
        bindAction: '#upd', //指定一个按钮触发上传
    
        url: '/upload/', //上传接口
    
        choose: function(obj){
    
            var files = obj.pushFile(); //将每次选择的文件追加到文件队列
    
            //图像预览，如果是多文件，会逐个添加。(不支持ie8/9)
    
            obj.preview(function(index, file, result){
    
                var imgobj = new Image(); //创建新img对象
    
                imgobj.src = result; //指定数据源
        
                imgobj.className = 'thumb';
    
                imgobj.onclick = function(result) {
    
                //单击预览
    
                img_prev.src = this.src;
    
                var w = $(window).width() - 42, h = $(window).height() - 42;
    
                layer.open({
    
                    title: '预览',
    
                    type: 1,
    
                    area: [w, h], //宽高
    
                    content: $('#prevModal')
    
                });
    
            };
    
            document.getElementById("div_prev").appendChild(imgobj); //添加到预览区域
    
            });
    
        },
    
           done: function(res){
    
             //上传完毕回调
    
           },
    
            error: function(){
    
                //请求异常回调
    
            }
    
        });
    
    });
    
    </script>

**要点小结：**

1）layui upload组件的熟练程度，在这里重点就是 choose 回调以及各必要参数的配置；

2）实时创建 img 对象并添加到预览区域；

3）对实时创建的img对象的单击事件处理绑定。

其它：

upload组件提供了已选择文件列表对象，因此，如果要更进一步，单击大图预览，还可以使用 layer.photos() 做个临时相册预览。但这里为了简明，直接用的是 layer.open。

--------------------

如果看完对你有所帮助，那就打赏博主吧 哈哈哈哈~~~~

发表评论取消回复

表情：

评论列表（有 0 条评论，399人围观）

还没有评论，来说两句吧...

相关阅读

相关上传图片实现预览

![Image 1][]浏览器必须支持FileReader,先判断是否支持。监听type属性等于file的input的change（值改变）事件。使用F

Bertha 。/ 2023年10月16日 22:41/ 0 赞/ 15 阅读

相关关于layui文件上传-- 多图片上传预览

<html> <head> <meta charset='UTF-8'> <meta name='Author'

忘是亡心i/ 2022年05月27日 01:17/ 0 赞/ 400 阅读

相关 js上传图片预览

function imgFile(file){ file.change(function(){ var current_img=this.file

本是古典何须时尚/ 2022年05月22日 03:34/ 0 赞/ 476 阅读

相关 Angularjs 实现多图片上传预览

先看效果图 ![70][] 图片上传的预览，我们最主要解决的是拿到input的on-change事件，再是读取图片，读取图片我们需要用到FileReader。我们先写一

水深无声/ 2022年05月15日 12:10/ 0 赞/ 362 阅读

相关 layui-图片上传，可使用选择图片->上传图片，预览图片，删除图片（转载）

原文地址：https://gitee.com/AMortal/codes/qt8m6zk30u1g4evr95jhx13 1. `<!DOCTYPE html>` 2.

亦凉/ 2022年05月11日 00:50/ 0 赞/ 834 阅读

相关 Vue图片上传预览

Vue图片上传预览想要的效果 ![zUO9bbB.png][] 代码实现页面核心代码 <h3

骑猪看日落/ 2022年05月08日 09:24/ 0 赞/ 545 阅读

相关图片预览与上传

> 小编推荐：[Fundebug][]提供JS错误监控、微信小程序错误监控、微信小游戏错误监控，Node.j错误监控和Java错误监控。真的是一个很好用的错误监控费服务，众多大

小鱼儿/ 2022年04月24日 10:50/ 0 赞/ 598 阅读

相关一个图片上传预览

一、一个按钮上传文件操作前台选择文件，只能通过input的file类型的文件选择框操作。但有时却为了界面的美观，要求用按钮来完成。第一步、隐藏文件选择框第二步、

╰半橙微兮°/ 2022年04月08日 11:56/ 0 赞/ 626 阅读

相关上传图片并预览

HTML： <input accept="image/" name=" fileImage" type="file" onchange="upload"> <

Myth丶恋晨/ 2021年11月23日 10:16/ 0 赞/ 785 阅读

相关 extjs上传图片预览

[EXTJS图片上传预览(含本地上传前预览和服务器图片预览)][EXTJS] 创建EXTJS组件 ![复制代码][copycode.gif] 1 //生成me

系统管理员/ 2021年09月10日 07:04/ 0 赞/ 823 阅读