图片九宫格（MVC项目）

@model WebApplication1.Dto.QzBusinessDtlDto

<div class="form-group detail-pics-wrapper">
    <label for="">详情图片</label>

    <div class="yes-preview-uploader">

        @if (Model.QzImageLists != null)
        {
            @for (int i = 0; i < Model.QzImageLists.Count; i++)
            {
                <div class="yes-preview-uploader__img" onclick="handleRemoveImg(this)">
                    <img src="@Model.QzImageLists[i].Image" />
                </div>
                @Html.HiddenFor(O => O.QzImageLists[i].Guid)
            }
        }
        @if (Model.QzImageLists.Count < 9)
        {
             <div class="yes-preview-uploader__trigger" onclick="handleTriggerUpload()">+</div>
        }

        <input type="file" class="yes-preview-uploader__input" name="imgitems" accept=".jpg,.png,.gif" multiple onchange="handleUploadImgs(this)" />

    </div>



</div>

@section Scripts{
    <script>
        let editor
        const detailImgList = []
        let counter = 0
        $(function () {
            //编辑器
            editor = CKEDITOR.replace("QzBusi.Desc", {
                filebrowserImageUploadUrl: "jiuhuaxiang/upload/image?",
                removePlugins: 'elementspath,resize',
                codeSnippet_theme: 'zenburn',
                height: '400'
            });

            $('#BodyForm').bootstrapValidator({
                //        live: 'disabled',
                message: 'This value is not valid',
                feedbackIcons: {
                    valid: 'glyphicon glyphicon-ok',
                    invalid: 'glyphicon glyphicon-remove',
                    validating: 'glyphicon glyphicon-refresh'
                },
                fields: {
                    "Name": {
                        validators: {
                            notEmpty: {
                                message: '标题不能为空!'
                            }
                        }
                    },
                    "Type": {
                        validators: {
                            notEmpty: {
                                message: '请选择显示方式!'
                            }
                        }
                    },
                    "Sort": {
                        validators: {
                            regexp: {
                                regexp: /^[0-9]+$/,
                                message: '排序号要求为数字！'
                            },
                        }
                    }
                }
            });
        });

        function handleUpload(uploadEl) {
            previewFile(uploadEl);
        }


        function handleCheckAll(checked) {
            // 1. 在对全选 checkbox 设置选中值
            $('.j-cbx-all').val(checked ? 1 : 0)
            $('.j-cbx-relate').each(function (i, cbx) {
                // 2. 先对界面上的 checkbox 设置选中效果
                cbx.checked = checked
                // 3. 修改所有的被影响的关联关系的 checkbox 的选中值
                $('.j-hd-relate#' + cbx.dataset['scenicid']).val(checked ? '1' : '0')
            })
        }


        function handleCheck(scenicId, checked) {
            $('.j-hd-relate#' + scenicId).val(checked ? '1' : '0')
        }




        function handleTriggerUpload() {
            // 触发上传组件选择文件
            $('.yes-preview-uploader__input').click()
        }

        function handleUploadImgs(fileUploader) {
            // 1. 解析 input:file 中的文件流，读取用于预览图片的数据
            const files = fileUploader.files
            if (files && files.length > 0) {
                // 2. 遍历数据，生成对应的img
                //图片添加数目 最多九张
                var num = 9 - $('.yes-preview-uploader__img').length
                num = num > files.length ? files.length : num

                for (let i = 0; i < num; i++) {
                    // Js内置文件流
                    let reader = new FileReader();

                    // 读取file中的图片完成后
                    reader.onloadend = function () {
                        // 3. 将 img 插入到当前的上传按钮之前
                        counter++
                        let fileId = files[i].name + counter
                        detailImgList.push({
                            fileId: fileId,
                            file: files[i]
                        })

                        let imgWrapper = document.createElement('div');
                        $(imgWrapper).addClass('yes-preview-uploader__img new').data('imgName', files[i].name).data('fileId', fileId).on('click', (e) => { handleRemoveImg(imgWrapper) });
                        let img = document.createElement('img');
                        //$(<div class="yes-preview-uploader__img"></div>)
                        $(img).attr('src', reader.result).appendTo($(imgWrapper));
                        $('.yes-preview-uploader__trigger')[0].before(imgWrapper);
                        if ($('.yes-preview-uploader__img').length < 9) {
                            $('.yes-preview-uploader__trigger').show()
                        }
                        else {
                            $('.yes-preview-uploader__trigger').hide()
                        }

                        //preview.show();
                        //preview.attr("src", reader.result);
                    }

                    // 图片文件不空就显示
                    if (files[i]) {
                        reader.readAsDataURL(files[i]);
                    }
                }
            }

        }

        function handleRemoveImg(imgEl) {
            console.log(imgEl)
            var el = $(imgEl)
            // 新添加的图片，删除需要删除对应的input:file 中的文件流
            if (el.hasClass('new')) {
                console.log(el, $('.yes-preview-uploader__input')[0].value)
                var fileIndex = detailImgList.findIndex(f => f.fileId === el.data('fileId'))
                if (fileIndex > -1) {
                    detailImgList.splice(fileIndex, 1)
                }
            }

            //对应QzImageLists数据设空值
            $(imgEl).next().val('')

            $(imgEl).remove()

            if ($('.yes-preview-uploader__img').length < 9) {
                $('.yes-preview-uploader__trigger').show()
            }
        }

        function handleSubmit() {
            const e = window.event || arguments.callee.caller.arguments[0];
            console.log('submitting', e);
            e.preventDefault();
            e.stopPropagation();
            const formData = new FormData();
            $('#BodyForm').serializeArray().forEach((item) => {
                formData.set(item.name, item.value)
            })
            // 处理简介字段
            formData.set('QzBusi.Desc', editor.getData())
            // 处理上传
            if ($('#ICO1')[0] && $('#ICO1')[0].files && $('#ICO1')[0].files.length > 0) {
                formData.append('ICO1', ...$('#ICO1')[0].files)
            }
            if ($('#AUD1')[0] && $('#AUD1')[0].files && $('#AUD1')[0].files.length > 0) {

                formData.append('AUD1', ...$('#AUD1')[0].files)
            }
            // 处理详情图片上传
            detailImgList.forEach(img => {
                formData.append('imgitems', img.file)
            })

            $.ajax({
                enctype: 'multipart/form-data',
                type: 'POST',
                processData: false,
                contentType: false,
                url: location.href,
                data: formData,
                success: () => {
                    alert('操作成功');
                    location.href = '/QzBusiness/ListInfo'
                }
            })
        }
    </script>
}