php+jq实现多图片上传

1.上传显示图片，实时提交文件

function BigFileUpload(showId,fileFormId,delurl,downloadurl){
    var fileName = new Array();
    var that = this;
    $(fileFormId).form({
        success:function(data){  //返回信息[['文件名称','完整路径']，['','']...]
//                $(showId+"  .shadow").css("display","none");
            data = eval('(' + data + ')');
            $.each(data,function(index,val){
                allpath.push(val[1]);
                console.log(allpath);
                if(index<10){
                    $(showId).append(cloneFileContent(val)); 
                }
                
            });
            console.log(allpath);
            
        }
    });
 
    function cloneFileContent(flName){

        var  temp = $("<div class='colondediv' style='width: 60px;height: 50px;float: left'><img  src='' style='width: 60px;height: 50px;margin-top: 12px;' class='col_servicePictureImgPreview'>" +
            "<div style='position: relative;width: 16px;height: 16px;float: right;margin-top: -60px' class='close'>"
            +"<img  src='../images/close.png' style='width: 15px;height: 15px;' ></div>"+
            "</div>").clone();
        temp.find(".col_servicePictureImgPreview").attr("src", '../images/'+flName[1]);//find() 方法获得当前元素集合中每个元素的后代，通过选择器、jQuery 对象或元素来筛选。
        temp.find(".close").click(function(){
            $.post(delurl,{'fileGuid':flName[1]},function(data){
                if(data.state=='success'){
                    console.log(data);
                    allpath=allpath.filter(function (x) {
                        return x!=flName[1];
                    })
                    console.log(allpath);
                    temp.remove();
                }

            },"json")
        });

        return temp;

    };


    this.operate = function(input){
        
       
        $(fileFormId).form("submit");

    };
    this.getFilenames = function(){
        console.log(fileName);
        return fileName;
    }
}

lessionFileUpload = new BigFileUpload("#col_servicePictureImgDivPreview","#lessionfileForm","{{ path('lessionFileDel') }}","{{ asset('fileUrl') }}");

<input  id="col_servicePictureImgDivAdd"  type="button" readonly="readonly" value="添加图片"  οnclick="$('#lessionfileForm #fileUploadInput').click()" style="width: 173px" />

<div  id="col_servicePictureImgDivPreview" style='display:inline-block'>
   
</div>

<form style="display: none" class="easyui-form" method="post" enctype="multipart/form-data" action="{{ path('lessionFileUpload') }}" id="lessionfileForm">
    <input id="fileUploadInput" type="file" multiple name="trainFile[]" οnchange="lessionFileUpload.operate(this)"/>
</form>

2.修改信息是实现显示图片每张图片左上角有关闭按钮

if(addressaddress!=''&& addressaddress !=null){

        /*本地预览展示*/
console.log(addressaddress);
            $.each(addressaddress.split(','),function(index,val){
                nowaddress.push(val);
                if(index<10){
                    $("#col_servicePictureImgDivPreview").append(localShowImage(val));

                }
              
            });

        function localShowImage(address) {



            var fulContent=$("<div class='colondediv' style='width: 60px;height: 50px;float: left'><img  src='' style='width: 60px;height: 50px;margin-top: 12px;' class='col_servicePictureImgPreview'>" +
                "<div style='position: relative;width: 16px;height: 16px;float: right;margin-top: -60px' class='close'>"
                +"<img  src='../images/close.png' style='width: 15px;height: 15px;' ></div>"+
                "</div>").clone();
            fulContent.find(".col_servicePictureImgPreview").attr("src", '../images/'+address);
            fulContent.find(".close").click(function(){

                $.post('lessionFileDel',{'fileGuid':address},function(data){
                    if(data.state=='success'){
                        nowaddress=nowaddress.filter(function (x) {
                            return x!=address;
                        })
                    console.log(nowaddress);

                    $.post('updatejiyaoaddress',{'address':nowaddress.join(),'meetindid':meetingidf},function () {

                    },'json')
                    fulContent.remove();
                    }

                },"json")
            });
            return fulContent;
        }
    }

转载于:https://my.oschina.net/u/3161974/blog/904483