(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 += '×</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文件上传。