jQuery插件无法进行多项选择

时间:2015-10-24 03:26:21

标签: javascript jquery ajax file-upload plugins

(function ( $ ) {
	$.fn.bcatUpload = function (options) {
		if ( methods[options] ) {
			return methods[ options ].apply( this, Array.prototype.slice.call( arguments, 1 ));
		} else if ( typeof options === 'object' || ! options ) {
			return methods.init.apply( this, arguments );
		} else {
			$.error( 'Method ' +  options + ' does not exist on jQuery.bcatUpload' );
		}
	}

	$.fn.bcatUpload.files_array = [];


	var methods = {
		init: function (arguments) {
			return this.each(function(index, el) {

				element = $(this);
				var settings = $.extend(true, {}, $defaults, arguments);
				private_methods.prepare(element);

				element.change(function(event) {
					event.preventDefault();
					var file_list = element[0].files;
					$.each(file_list, function(index, file) {
						$.fn.bcatUpload.files_array.push(file);
						private_methods.display(element);
					});
				});
			});
		},
		remove: function (index) {
			element = $(this);
			$.fn.bcatUpload.files_array.splice(index, 1);
			console.log($.fn.bcatUpload.files_array);
			private_methods.display(element);
		},
		upload: function () {
			// Start the upload...
			console.log('Uploading...');
			console.log($.fn.bcatUpload.files_array);
			return methods;
		}
	};

	var private_methods = {
		prepare: function (element) {
			$html = element.wrap('<div class="bcat-upload-container"></div>').parent();
			element.hide();
			var btn_class= ($defaults.button.class == null) ? '' : 'class="'+$defaults.button.class+'"';
			$html.append('<button type="button" '+btn_class+'>'+$defaults.button.label+'</button>');
			$html.append('<div class="bcat-file-list"></div><div class="bcat-clear"></div>');
			$html.find('button').click(function(event) {
				element.click();
			});
		},
		display: function (element) {
			$html = element.siblings('.bcat-file-list');
			var file_string = '';
			$.each($.fn.bcatUpload.files_array, function(index, file) {
				file_name = private_methods.formatFileName(file);
				file_string += '<blockquote><span class="filename">'+file_name+'</span>';
				file_string += '<a class="close" href="javascript:$('+element.attr('id')+').bcatUpload(\'remove\', '+index+');" data-index="'+index+'">';
				file_string += '&times;</a></blockquote>';
			});
			$html.html(file_string);

			// Register the Click Event Handler.
			// $html.find('blockquote a.close').click(function(event) {
			// 	methods.remove($(this).attr('data-index'));
			// });
		},
		formatFileName: function (file) {
			var filename = private_methods.getFileName(file.name);
			var ext = private_methods.getExtension(file.name);
			if (filename.length > 20) {
				filename = filename.substring(0, 20) + '..';
			}
			return filename + '.' + ext;
		},
		getExtension: function (filename) {
			var file_name_array = filename.split('.');
 			return file_name_array[file_name_array.length - 1];
		},
		getFileName: function (filename) {
			var file_name_array = filename.split('.');
			var ext = private_methods.getExtension(filename);
			return filename.substring(0, filename.length - parseInt(ext.length) - 1);
		},
		getHumanSize: function (bytes, si) {
			var thresh = si ? 1000 : 1024;
		    if(Math.abs(bytes) < thresh) {
		        return bytes + ' B';
		    }
		    var units = si
		        ? ['KB','MB','GB','TB','PB','EB','ZB','YB']
		        : ['KiB','MiB','GiB','TiB','PiB','EiB','ZiB','YiB'];
		    var u = -1;
		    do {
		        bytes /= thresh;
		        ++u;
		    } while(Math.abs(bytes) >= thresh && u < units.length - 1);
		    return bytes.toFixed(1)+' '+units[u];
		}
	}

	var $defaults = {
		id 			: $(this).attr('id'),
		url 		: '',
		data 		: {},
		type 		: 'image',
		size 		: {
			min 	: null, 				// 1024 	=> 1KB.
			max 	: null, 				// 2097152 	=> 2MB.
			total 	: null, 				// 4194304 	=> 4MB.
		},
		dimention 	: {
			min 	: [null, null],
			max 	: [null, null]
		},
		allowed 		: {
			ext 	: [],
			mimes 	: {
				image : [
					'image/jpeg', 			// JPG/JPEG image.
					'image/gif', 			// GIF 		image.
					'image/png', 			// PNG 		image.
					'image/bmp' 			// BMP 		Image
				], 
				file: [
					'application/pdf', 															// PDF 	file.
					'application/msword', 														// DOC 	file.
					'application/vnd.openxmlformats-officedocument.wordprocessingml.document' 	// DOCX file.
				]
			}
		},
		button 		: {
			class 	: null,
			label 	: 'Select File',
			icon 	: null
		},
		limit 		: 0
	}
}( jQuery ));

$(":file").bcatUpload({
	size: {
		min: 2048,
		max: 50000000 
	}
});
div.bcat-upload-container {
		display:block;
		clear:both;
	}
	div.bcat-upload-container button, #upload {
		background: darkred;
		padding:10px 15px;
		border-width: 0px;
		color:#F2F2F2;
		font-weight:bold;
		border-radius: 3px;
	}
	div.bcat-upload-container .bcat-clear {clear: both;}
	div.bcat-upload-container div.bcat-file-list {
		display: block;
		clear: both;
	}
	div.bcat-upload-container div.bcat-file-list blockquote {
		padding: 10px;
		margin: 10px;
		display: block;
		border-left: 2px solid #ccc;
		border-bottom: 1px solid #ccc;
	}
	div.bcat-upload-container div.bcat-file-list blockquote .filename {
		font-size: 12px;
		font-family: 'Courier New';
	}
	div.bcat-upload-container div.bcat-file-list blockquote a {
		text-decoration: none;
		float: right;
	}

    #upload {background: darkgreen;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<form action="" method="POST">
  <input type="file" id="docs1" multiple /><br />
  <input type="file" id="docs2" multiple /><br />
  <input type="button" value="Upload" id="upload" onclick="$(':file').bcatUpload('upload');" />
</form>

以上是文件上传的插件。当只选择一个文件元素时,上面的代码可以工作。但如果我选择多个,那么它就会停止正常工作。它只适用于我实例化的最后一个。

我无法弄清楚出了什么问题。

注意:这里没有包含通过ajax的文件上传过程......我只是不想为html中的每个文件元素设置所选的文件数组。然后我可以开始上传方法来执行ajax文件上传。

0 个答案:

没有答案