layui 文件上传

最新推荐文章于 2024-05-25 22:39:08 发布

user-ds

最新推荐文章于 2024-05-25 22:39:08 发布

阅读量272

点赞数

分类专栏： layui

本文链接：https://blog.csdn.net/qq_42312459/article/details/105153298

版权

layui 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>开始使用layui</title>
    <link rel="stylesheet" href="${ctx}/layui/css/layui.css">
</head>
<body>

<!-- 你的HTML代码 -->
<div class="layui-upload">
    <button type="button" class="layui-btn" id="test2">多图片上传</button>
    <blockquote  class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
        预览图：
        <div class="layui-upload-list" id="ImgPreview" style="height: 300px">

        </div>
    </blockquote>
</div>
<script src="${ctx}/layui/layui.all.js"></script>
<script>
    ;!function () {
        //无需再执行layui.use()方法加载模块，直接使用即可
        var form = layui.form
            , layer = layui.layer,
            element = layui.element;
        element.init();
        var $ = layui.jquery, upload = layui.upload;
        //多文件列表示例
        var demoListView = $('#demoList')
            , uploadListIns = upload.render({
            elem: '#test2'
            // , url: ${ctx} +'/upload'.
            // , accept: 'file'
            , multiple: true
            // , exts: "${exts}"
            , choose: function (obj) {
                //将每次选择的文件追加到文件队列
                var files = obj.pushFile();
                //预读本地文件，如果是多文件，则会遍历。(不支持ie8/9)
                obj.preview(function (index, file, result) {
                    if (file.size > 0 && $('#ImgPreview').find('img').length === 0) {
                        $('#ImgPreview').empty();
                    }
                    // 添加图片 ImgPreview-预览的dom元素的id
                    $('#ImgPreview').append('<div style="float: left;margin-top: 10px;" class="image-container" id="container' + index + '">' +
                        '<div class="delete-css" >' +
                        '<button id="upload_img_' + index + '" class="layui-btn layui-btn-danger layui-btn-xs">删除</button>' +
                        '</div>' +
                        '<img id="showImg' + index + '" style="width: 100px; height:100px;margin:10px;cursor:pointer;"src="' + result + '" alt="' + file.name + '">' +
                        '</div>');
                    //删除某图片
                    $("#upload_img_" + index).bind('click', function () {
                        delete files[index];
                        $("#container" + index).remove();
                    });

                    //某图片放大预览
                    $("#showImg" + index).bind('click', function () {
                        var width = $("#showImg" + index).width();
                        var height = $("#showImg" + index).height();
                        var scaleWH = width / height;
                        var bigH = 400;
                        var bigW = scaleWH * bigH;
                        if (bigW > 900) {
                            bigW = 900;
                            bigH = bigW / scaleWH;
                        }

                        // 放大预览图片
                        layer.open({
                            type: 1,
                            title: false,
                            closeBtn: 1,
                            shadeClose: true,
                            area: [bigW + 'px', bigH + 'px'], //宽高
                            content: "<img width='" + bigW + "' height='" + bigH + "' src=" + result + " />"
                        });

                    });

                });
            }
        });

    }();
</script>
<script>
    var mm = function () {
        alert("xxxx");
        console.log("xxxx");
        layer.msg('Hello World');
    }
</script>
</body>
</html>

user-ds

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
layui 文件上传

<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <title>开始使用la...
复制链接

扫一扫