1. 程式人生 > >plupload 多檔案上傳

plupload 多檔案上傳

情況1:各自傳各自的    

https://www.sojson.com/blog/214.html

//觸發的id
var ids = new Array("cardzmbtn","cardbmbtn","cardzmbtn-img","cardbmbtn-img");

$.each(ids,function(i,n){
	var self = this.toString();
	//例項化一個plupload上傳物件
    var uploader = new plupload.Uploader({
        browse_button : self, //觸發檔案選擇對話方塊的按鈕,為那個元素id
        url : _upload ,//伺服器端的上傳頁面地址
        max_file_size: '2mb',//限制為2MB
        filters: [{title: "Image files",extensions: "jpg,gif,png"}]//圖片限制
    });
    //在例項物件上呼叫init()方法進行初始化
    uploader.init();
  //繫結各種事件,並在事件監聽函式中做你想做的事
    uploader.bind('FilesAdded',function(uploader,files){
    	 uploader.start();
    });
    uploader.bind('FileUploaded',function(uploader,files,data){
    	var imgUrl = "//cdn.www.sojson.com/";
    	
    	//這裡得到圖片的id
    	var id = self.search("-img") == -1?self +"-img":self;
    	console.log("現在在上傳的身份證是:",self.search('cardzmbtn')==0?'正':'反',"面");
    	//成功判斷
    	if(data.status == 200 ){
    		data = $.parseJSON(data.response);
    		var imagePath = imgUrl + data.file
    		//圖片賦值
    		document.getElementById(id).src = imagePath;
    		//正面
    		if(self.search('cardzmbtn')===0){
        		$("#cardzmbtn-input").val(imagePath).attr('src-data',data.file);
        	}else{//反面
        		$("#cardbmbtn-input").val(imagePath).attr('src-data',data.file);
        	}
    	}
    });
});

情況2:新增完多個檔案之後,一起上傳

https://blog.csdn.net/mypanlong/article/details/52849008