laravel框架中的多图上传

效果图：

前端代码：

<div class="role" onclick="file(this)">
     <img src="" alt="" id="goods_1" class="file" >
     <span style="color: #ccc;">上传图像</span>
     <input type="file"  name="goods_imgs[]" class="file" value="" id="goods1" onchange="le(this)">
</div>
<div class="role" style="display: none" onclick="file(this)">
     <img src="" alt="" id="goods_2" class="file" >
     <span style="color: #ccc;">上传图像</span>
     <input type="file"  name="goods_imgs[]" class="file" value="" id="goods2" onchange="le(this)">
</div>

<div class="role" onclick="copy(this)">
      <span style="color: #ccc;">+</span>
</div>

css样式：

.role input[type='file']{opacity:0;}
.role{border:1px solid #c9cccf;text-align:center;width:200px;height:200px;line-height:200px;font-size:18px;margin-top:15px;float:left;margin-left:5px;}


.role img{width: 198px;height: 198px;display: none;}

 js代码：

<script type="text/javascript">
    //点击圆框时上传图片
    function file(evn) {
        var img_obj = $(evn).children(".file")
        var file_id = $(img_obj[1]).attr("id")
        document.getElementById(file_id).click()
    }


    //点击时复制角色框
    function copy(evn) {
        var obj = $(evn).prev();
        var num =  $(".role").length
        console.log(num)
        $(obj).clone().insertBefore(evn);
        $(obj).css("display","block")
        var img_obj = $(obj).children(".file")
        console.log(img_obj)
        var img_id = $(img_obj[0]).attr("id","goods_"+num)
        var file_id = $(img_obj[1]).attr("id","goods"+num)
    }
    //左侧图像点击时显示图像
    function le(evn){
        var id = $(evn).attr('id');//获取id
        var num = "goods_"+id.substr(5,1);
        var file = event.target.files[0];
        if (window.FileReader) {
            var reader = new FileReader();
            reader.readAsDataURL(file);
            //监听文件读取结束后事件
            reader.onloadend = function (e) {
                var divObj= $(evn).prev()  //获取div的DOM对象
                $(divObj).html("") //插入文件名
                $("#"+num).css("display","block");
                $("#"+num).attr("src",e.target.result);    //e.target.result就是最后的路径地址
            };
        }
    }

</script>