多个图片框上传图片

Posted 2020-10-12 guoke1970s

html代码

<ul class="commodityList commoService goods-info repair-goods-list repair_box box_type2">
    <li class="js_close"><i class="fa fa-trash-o"></i></li>
    <li class="clearfix norepairList node-goods-li">
        <div class="commodityListImg pull-left posi-rel norepair-goods-img-node">
            <em class="threeArrIcon">
                <a class="delete-norepair-img hide"> </a>
                <span class="goods-sn">1</span>
            </em>

            <div class="commodityListFl pull-left  norepair-goods-info-node">
                <div class="commodityListFlT clearfix mb-10 node-goods-category-parent clearfix">
                    <div class="gTit pull-left">
                        <em class="redDot">*</em>商品类别：
                    </div>
                    <div class="gSelect w-165 pull-left mr-10 node-goods-category" data-original-title="" title="">
                        <select name="category[]" class="a_category" onchange="changeCategory(this)">
                            <option>请选择商品</option>
                            @foreach($product_category as $product)
                                <option value="{{$product->id}}">{{$product->name}}</option>
                            @endforeach
                        </select>
                        <select name="c_category[]" class="c_category">
                            <option>请选择商品</option>
                        </select>
                    </div>
                    <div class="node-goods-unit-info pull-left clearfix">
                        <div class="pull-left inputAddSub mr5 node-goods-number">
                            <a class="pull-left" onclick="number(this)">-</a>
                            <input class="pull-left fun-goods-number fun-limit-number" type="number"
                                   name="good_number[]" value="1" placeholder="" autocomplete="off">
                            <a class="pull-left" onclick="number(this)">+</a>
                        </div>
                        <span class="pull-left node-goods-unit">&nbsp;&nbsp;个</span>
                    </div>
                    <em class="garbageIcon node-delete-goods"></em>
                </div>
                <div class="commodityListFlT clearfix mb-10">
                    <div class="gTit pull-left">
                        <em class="redDot">*</em>故障描述：
                    </div>
                    <input type="text" class="commoditIpt fun-goods-name" name="good_type[]" maxlength="40"
                           autocomplete="off" placeholder="请填写商品的型号" datatype="*" nullmsg="请输入商品型号">
                </div>
                <ul class="repair_img clearfix bbs_ad">
                    <li class="imgbox">
                        <div class="imgnum">
                            <input type="file" class="filepath"/>
                            <span class="close">X</span>
                            <div class="img1"></div>
                            <img src="" class="img2"/>
                        </div>
                    </li>
                    <li class="imgbox">
                        <div class="imgnum">
                            <input type="file" class="filepath"/>
                            <span class="close">X</span>
                            <div class="img1"></div>
                            <img src="" class="img2"/>
                        </div>
                    </li>
                    <li class="imgbox">
                        <div class="imgnum">
                            <input type="file" class="filepath"/>
                            <span class="close">X</span>
                            <div class="img1"></div>
                            <img src="" class="img2"/>
                        </div>
                    </li>
                    <li class="imgbox">
                        <div class="imgnum">
                            <input type="file" class="filepath"/>
                            <span class="close">X</span>
                            <div class="img1"></div>
                            <img src="" class="img2"/>
                        </div>
                    </li>
                    <li class="imgbox">
                        <div class="imgnum">
                            <input type="file" class="filepath"/>
                            <span class="close">X</span>
                            <div class="img1"></div>
                            <img src="" class="img2"/>
                        </div>
                    </li>
                </ul>
                <div id="bbs_ad"></div>
                <div class="text-right">
                    <a class="add_picList" href="javascript:void(0)" onclick="addPic(this)">继续添加图片</a>
                </div>
                <p>请按照实际情况上传图片，最多可上传10张;支持JPG/JPEG/PNG格式,大小不超过5M。</p>
            </div>
        </div>
    </li>
</ul>
js代码,每个file_id[]数组取对应的块的索引区分 后台判断存储

//JS上传图片显示
$(function () {
    $(document).on("change", ".filepath", function () {
        var srcs = getObjectURL(this.files[0]);   //获取路径
        var _this = $(this);
        var dd = $(this).parents(‘.commodityList‘).index();
        console.log(dd);
        console.log(this.files[0]);
        var html = ‘‘;
        var formData = new FormData();
        formData.append("file", this.files[0]);
        $.ajax({
            url: "/task/fileUpload",
            type: "POST",
            data: formData,
            headers: {
                ‘X-CSRF-TOKEN‘: $(‘meta[name="csrf-token"]‘).attr(‘content‘)
            },
            /**
             *必须false才会自动加上正确的Content-Type
             */
            contentType: false,
            /**
             * 必须false才会避开jQuery对 formdata 的默认处理
             * XMLHttpRequest会对 formdata 进行正确的处理
             */
            processData: false,
            success: function (data) {
                console.log(data);
                html = ‘<input type="hidden" name="file_id‘ + dd + ‘[]" value="‘ + data.file_url + ‘">‘;
                _this.parents(‘.imgnum‘).append(html);
                $("#imgWait").html("上传成功");

            },
            error: function () {
                alert("上传失败！");
                $("#imgWait").hide();
            }
        });

        $(this).nextAll(".img1").hide();   //this指的是input
        $(this).nextAll(".img2").show();  //fireBUg查看第二次换图片不起做用
        $(this).nextAll(‘.close‘).show();   //this指的是input
        $(this).nextAll(".img2").attr("src", srcs);    //this指的是input

        $(".close").on("click", function () {
            $(this).hide();     //this指的是span
            $(this).nextAll(".img2").hide();
            $(this).nextAll(".img1").show();
        })
    })
});