zoukankan      html  css  js  c++  java
  • layui——上传图片,并实现放大预览

     一般上传文件后会返回文件的路径,然后存储到数据库,那么首先实现上传后的放大和删除功能

      function uploadSmallPic() {
            var upload = layui.upload;
            upload.render({
                elem: '#smallPic'
                , url: '/upload/uploadPic'
                , auto: false
                , number: 1
                , bindAction: '#uploadSmallPic'
                , choose: function (obj) {
                    var files = obj.pushFile();
                    obj.preview(function (index, file, result) {
                        $('#smallPicContent').append('<div  style="80px;height: 90px;float: left;margin-right: 5px" class="image-container" id="smallPicContainer' + index + '">' +
                            '<div class="delete-css"><button id="upload_smallPic_' + index + '" style=" 20px;height: 20px;"><i class="layui-icon ayui-icon-close">�' +
                            '</i></button>' +
                            '</div>' +
                            '<img id="showSmallPic' + index + '"  style="80px;height: 80px" src="' + result + '" alt="' + file.name + '"></div>'
                        );
                        //删除某图片
                        $("#upload_smallPic_" + index).bind('click', function () {
                            $("#smallPicContainer" + index).remove();
                            smallPic="";
                        });
                        //某图片放大预览
                        showMedia("showSmallPic" + index, "image", result);
                    })
                },
                done: function (res, index) {
                    smallPic = res.data;
                    layer.msg(res.msg);
                    $('#smallPicContent').html('');
                    return delete this.files[index];
                }
            });
        }
    function showMedia(id, type, src) {
    var idBar = "#" + id;
    $(idBar).bind('click', function () {
    var width = $(idBar).width();
    var height = $(idBar).height();
    var scaleWH = width / height;
    var bigH = 500;
    var bigW = scaleWH * bigH;
    if (bigW > 900) {
    bigW = 900;
    bigH = bigW / scaleWH;
    } // 放大预览图片
    if (type == "video") {
    layer.open({
    type: 1,
    title: false,
    closeBtn: 1,
    shadeClose: true,
    area: [bigW + 'px', bigH + 'px'], //宽高
    content: "<video width='" + bigW + "' height='" + bigH + "'controls="controls" src=" + src + " />"
    });
    } else {
    layer.open({
    type: 1,
    title: false,
    closeBtn: 1,
    shadeClose: true,
    area: [bigW + 'px', bigH + 'px'], //宽高
    content: "<img width='" + bigW + "' height='" + bigH + "'controls="controls" src=" + src + " />"
    });
    }

    });
    }
    //删除图片
    function deleteMedia(id, index) {
    var idBar = "#" + id;
    $(idBar).bind('click', function () {
    //从map中删除
    imgUrlList.splice(index, 1)
    //删除div
    $("#container" + index).remove();
    });
    }
     

    但在编辑数据时需要实现数据图片回显

      //设置小图
                        if (resp.data.goods.smallPic != null) {
                            smallPic = resp.data.goods.smallPic;
                            $('#smallPicContent').append('<div  style="80px;height: 90px;float: left;margin-right: 5px" class="image-container" id="smallPicContainer">' +
                                '<div class="delete-css"><button id="upload_smallPic_' + '" style=" 20px;height: 20px;"><i class="layui-icon ayui-icon-close">�' +
                                '</i></button>' +
                                '</div>' +
                                '<img id="showSmallPic' + '"  style="80px;height: 80px" src="' + smallPic + '"></div>'
                            );
                            //删除某图片
                            $("#upload_smallPic_").bind('click', function () {
                                $("#smallPicContainer").remove();
                                smallPic="";
                            });
                            //某图片放大预览
                            showMedia("showSmallPic", "image", smallPic);
                        }
    遇事犹豫不决时,须持虎狼之心,行仁义之事
  • 相关阅读:
    每日日报2020.12.1
    每日日报2020.11.30
    981. Time Based Key-Value Store
    1146. Snapshot Array
    565. Array Nesting
    79. Word Search
    43. Multiply Strings
    Largest value of the expression
    1014. Best Sightseeing Pair
    562. Longest Line of Consecutive One in Matrix
  • 原文地址:https://www.cnblogs.com/fmlyzp/p/10663810.html
Copyright © 2011-2022 走看看