jQuery file upload

jQuery(function () {
	
   var uploader = $('input#uploader').fileupload({
		url: App.base.setURL('upload', 'image'),
		type: 'POST',
        dataType: 'json',
		previewMaxWidth: 100,
        previewMaxHeight: 100,
        previewCrop: true,
		autoUpload: false,
    });
	
	uploader.on('fileuploadchange', function (e, data){
		if(App.upload.imageNUMBER > App.upload.MAX_FILE_NUM){
			App.upload.layer.alert('上传图片的数量不能超过'+App.upload.max_file_num, {icon: 5});
			return false;
		}
		if(data.files.length > App.upload.MAX_FILE_NUM){
			App.upload.layer.alert('上传图片的数量不能超过'+App.upload.max_file_num, {icon: 5});
			return false;
		}
		for(var index in data.files){
			if(App.upload.IMAGE_FILE_TYPE.test(data.files[index].type) == false){
				App.upload.layer.alert('上传图片的格式只能为'+App.upload.image_file_type, {icon: 5});
				return false;
			}
			if(data.files[index].size > App.upload.MAX_FILE_SIZE){
				App.upload.layer.alert('上传图片的大小最多只能为'+App.upload.max_file_size, {icon: 5});
				return false;
			}
		};
		App.upload.imageFINALL = data.files.length;
		log('file-upload-change-' + App.upload.imageFINALL);
	});
	
	uploader.on('fileuploadprogressall', function (e, data){
		progress = parseInt(data.loaded / data.total * 100, 10);
		App.upload.element.progress('layui-progress', progress + '%');
		log('file-upload-progressall-' + progress);
	});
	
	uploader.on('fileuploadprocessalways', function(e, data){
		UUID = data.formData.UUID;
		$('div.preview').append('<a onclick=App.upload.delete(this) id=' + UUID + '><img><i></i></a>');
		$('div.preview').find('a#' + UUID).children('img').attr('src', data.files[data.index].preview.toDataURL());
		log('file-upload-processalways{' + UUID + '}');
	});
	
	uploader.on('fileuploaddone', function (e, data){
		if(data.result.status > 100){
			App.upload.layer.alert(data.result.message, {icon: 5});
			$('div.layui-progress').hide();
			if(data.result.status == 104){
				window.location.reload();	
			}
			return false;	
		}

		App.upload.imageNUMBER += 1;

		UUID = data.result.files.UUID;
		image = data.result.files.image;
		thumb = data.result.files.thumb;
		
		$('form').append('<input type=hidden id=id-'+ UUID +' name=order[] value='+ image + '@' + thumb +'>');
		log('file-upload-done@' + App.upload.imageNUMBER);
	});
	
	uploader.on('fileuploadadd', function (e, data){
		var UUID = App.base.getUUID();
		data.process().done(function () {
			serialize = data.form.serializeArray();
			serialize.push({name:'UUID', value:UUID});
			data.formData = serialize;
			data.formData.UUID = UUID;
        	data.submit();
        });
		log('file-upload-add[' + UUID + ']');
	});
	
	uploader.on('fileuploadstart', function (){
		$('div.layui-progress').show();
		$('input#button').val(App.upload.loading).attr('disabled', true);
		log('file-upload-start');
	});
	
	uploader.on('fileuploadstop', function (e, data){
		$('div.layui-progress').hide();
		App.upload.element.progress('layui-progress', '0%');
		$('input#button').val(App.upload.button).attr('disabled', false);
		log('file-upload-stop');	
	});
	
	uploader.on('fileuploadsend', function (e, data){
		log('file-upload-send');
	});
	
	uploader.on('fileuploadalways', function (e, data){
		log('file-upload-always');
	});
	
	uploader.on('fileuploadprocessdone', function (e, data){
		log('file-upload-processdone');
	});
	
	uploader.on('fileuploadcomplete', function (e, data){
		log('file-upload-completed');	
	});
	
	uploader.on('fileuploadfinishe', function (e, data){
		log('file-upload-finishe');	
	});
	
	App.upload.delete = function (object){
		App.upload.imageNUMBER -= 1;
		$(object).fadeOut();
		input = $('form').find('input#id-' + $(object).attr('id'));
		token = $('form').find('input#token');
		App.upload.remove(input.val(), token.val());
		window.setTimeout(function (){
			$(object).remove();
			input.remove();
		}, 666);
	}
	
	App.upload.remove = function (order, Token){
		$.post(App.base.setURL('upload', 'remove'), {order: order, Token: Token});	
	}
	
	layui.use(['layer', 'element'], function (){
		App.upload.layer = layui.layer;
		App.upload.element = layui.element();
	});
	
});

 

转载于:https://my.oschina.net/andyhua/blog/1858727