layui实现上传图片即时预览删除

发布于 2020-04-06  6 次阅读


前端

<form class="layui-form layui-form-pane" action="" style="margin: 10px;">
	<div class="layui-upload" style="text-align: center;">
		<div class="layui-upload">
			<button type="button" class="layui-btn" id="smallPic" style="width: 100%;"><i class="layui-icon"></i>上传图片</button>
			<blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 25px;">
				预览图:
				<div class="layui-upload-list" id="smallPicContent" style="display: flex;flex-wrap: wrap;"></div>
			</blockquote>
		</div>
	</div>
</form>
<script>
    layui.use(['upload','form'], function(){
        var $ = layui.jquery,upload = layui.upload;
        var form = layui.form;
        let imgArry=[];
        var imgData = {};
        var resurl = [];
        //单击预览大图
        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 = 300;
                var bigW = scaleWH * bigH;
                if (bigW > 600) {
                    bigW = 600;
                    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 + " />"
                    });
                }

            });
        }
        upload.render({
            elem: '#smallPic'
            ,url: '/index.php/index/Appointment/upload'
            ,multiple: true
            ,before: function(obj){
                var files = obj.pushFile();
                obj.preview(function (index, file, result) {
                    imgArry.push(index);
                    $('#smallPicContent').append(
                        '<div  style="width:80px;height: 90px;float: left;margin-right: 25px;margin-top: 10px;" class="image-container" id="smallPicContainer' + index + '">' +
                        '<div class="delete-css"><div id="upload_smallPic_' + index + '" style="width: 20px;height: 20px;">' +
                        '<i class="layui-icon ayui-icon-close"></i>' +
                        '</div></div>' +
                        '<img id="showSmallPic' + index + '"  style="width:80px;height: 80px" src="' + result + '" alt="' + file.name + '">' +
                        '</div>'
                    );
                    //删除某图片
                    $("#upload_smallPic_" + index).bind('click', function () {
                        let inx =$("#upload_smallPic_" + index).index()
                        delete(imgData[index])
                        $("#smallPicContainer" + index).remove();
                        $('#img').val(JSON.stringify(imgData));
                        smallPic="";
                    });
                    //某图片放大预览
                    showMedia("showSmallPic" + index, "image", result);
                })
            }
            ,done: function(res){
                resurl.push(res.data);
                imgArry.forEach( (v,i) => {
                    imgData[v] = resurl[i];
                },this);
                $('#img').val(JSON.stringify(imgData));
            }
        });
    });
</script>


一沙一世界,一花一天堂。君掌盛无边,刹那成永恒。