前端上传多张图片 （ajaxfileupload.js）

  <div class="form-group">

                                <label for="name" class="col-sm-2 control-label">服务照片
                                    <span class="required"> * </span>
                                </label>
                                <div class="col-sm-7 carrierOne">
                                    <div class="fileLoad fileLeft">
                                        <div class="close-file">//点击删除当前上传图片
                                            <i class="glyphicon glyphicon-remove clo" onclick="del(event,this)"></i> //bootstrap字体图标
                                        </div>
                                        <img id="dv" class="cover-radius fileImg image" width="100px"/>//预览图片
                                        <div class="fileTitle">
                                            <i class="glyphicon glyphicon-open"></i>
                                            上传图片

                                        </div>

//上传载体

                                        <input id="picture_upload" name="images" type="file" onchange="upload_more(this)" class="fileInput"/>

//from 表单提交图片地址载体

                                        <input name="images[]" value="" type="hidden"  class="hid"/>
                                    </div>
                                </div>

                            </div>

js代码

function upload_more(obj){
            var fileLeft = $('.fileLeft').length;//获取上传图片载体数
            obj.id = obj.id + fileLeft;   //更改当前点击input的id名称
            var fileId = obj.id; //赋值给上传id
            var file = obj.files[0];  //获取图片信息
            var fileType = file.type; //获取图片类型

   // 校验类型
            if(fileType != "image/jpeg" && fileType != "image/png"){

//bootstrap弹出层插件
                $.bootstrapGrowl("亲，上传图片仅支持jpg和png格式哦,请你更换图片重新上传哦",{
                    align:'center',
                    delay: 3000,
                    width: 300,
                    allow_dismiss: true
                });
                return false
            }

   //php设置 防止攻击
            var token = { _token:'{{ csrf_token() }}' };
            $.ajaxFileUpload({
                url: "{{ url('picture/upload') }}", //用于文件上传的服务器端请求地址
                data:token,
                type: 'post',
                secureuri: false, //是否需要安全协议，一般设置为false
                fileElementId: [fileId], //文件上传域的ID
                dataType: 'json', //返回值类型 一般设置为json
                success: function (data, status)  { //服务器成功响应处理函数

  //处理服务端返回的链接
                    var isUrl = data.data.url.replace(/\/\//g, '/');

   //赋值给from表单上传载体
                    $("#"+fileId).siblings('.hid').val(isUrl) ;

  //赋值给上传图片载体
                    var imgUrl = $("#"+fileId).siblings('img').attr('src');

  //判断是否在当前上传照片点击
                    if(imgUrl){

/./是否显示关闭按钮
                        $("#"+fileId).siblings('.close-file').show();
                        $("#"+fileId).siblings('img').attr('src',isUrl);
                    }else{
                        $("#"+fileId).siblings('.close-file').show();
                        $("#"+fileId).siblings('img').attr('src',isUrl);
                        var fil = $('#fileTwo').html();
                        $('.carrierOne').append(fil);
                    }
                },
                error: function (data, status, e){//服务器响应失败处理函数
                    console.log(e)
                }
            });
        }