多图片上传（预览）

---

var curPicture = []
  
    $('#GoodsPicUpload').on('change', function (e) {
        var fileArr = $(this)[0].files;
        Array.prototype.push.apply(curPicture, fileArr);
        var files = e.target.files;
        if (files.length > 0) {
            for (var i = 0; i < files.length; i++) {
                var reader = new FileReader();
                reader.onload = function () {
                    var text = `<div class="img-list showf">
                            <span class="del-img hand"><i class="fa fa-minus-circle"></i></span>
                            <img src="${this.result}" alt="图片" class="layui-upload-img" class="showf">
                            </div>
                        `
                    $('#GoodsPicture').append(text);
                }
                reader.readAsDataURL(files[i]);
            }
        }
        console.log(curPicture)
    })

    $('#GoodsPicture').on('click','.del-img',function(){
        var index = $(".showf").index($(this).parents('.showf'));
        curPicture.splice(index, 1)
        $(this).parents('.img-list').remove()
    })

ajax请求

    $('#savegoodsBasic').on('click', function () {
        let GoodsFullName = $('#GoodsFullName').val();
        let GoodsAbbName = $('#GoodsAbbName').val();
       
        var fd = new FormData();
        fd .append("GoodsFullName", GoodsFullName);
        fd .append("GoodsAbbName ", GoodsAbbName );
        for (var i = 0, j = curPicture.length; i < j; ++i) {
            fd.append('GoodsPicture', curPicture[i]);
        }
        $.ajax({
            type: "POST",
            url: url,
            data: fd,
            dataType: 'json',
            cache: false,
            traditional: true,
            processData: false,
            contentType: false,
            success: function (result) {
                console.log(result)

            }
        });

    })

html

    <form class="form-horizontal" id="add_goods_form" enctype="multipart/form-data">
<div class="form-group">
              <label class="col-sm-3 control-label form-label">商品图片</label>
                        <div class="col-sm-6">
                              <div class="layui-upload">
                                    <button type="button" class="layui-btn">
                                                            选择图片
                                    <input type="file" id="GoodsPicUpload" multiple name="picture" style="position:absolute;top:0;left:0;font-size:34px; opacity:0">
                                    </button>
               <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
                       预览图：
                            <div class="layui-upload-list" id="GoodsPicture"></div>
                </blockquote>
                              </div>
                         </div>
    </div>
</form>

效果图：