Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
@md5 jQuery ezPhotoUploader.js
(function($) {
var defaults = {
'buttonTitle':'загрузить фотографию',
'url':'/ajax/upload/',
'urlDelete':'/ajax/delete/',
'filesDir':'/upload/',
'allowedExtensions':'jpg,jpeg,png,gif,bmp',
'limit':5, // number of files
'limitSize':4, // filesize limit in Mb
'data':null, // additional data
'errorFormat':'недопустимый формат',
'errorSize':'размер превышает'
};
var options;
$.fn.ezPhotoUploader = function (params) {
options = $.extend({}, defaults, options, params);
var ul = this;
var items = ul.children('li').length;
// add button
ul.append('<li class="add" title="' + options.buttonTitle + '"><i></i><input style="display:none;" accept="image/*" name="file" value="image" multiple="multiple" type="file"><a href="#"></a></li>');
var button = ul.find('li.add > input[type=file]');
// click button
button.next('a').click(function() {
button.click();
return(false);
});
// choose files
button.change(function() {
ul.find('li.add > i').addClass('on');
button.attr('disabled', true);
$(button[0].files).each(function() {
var file = this;
if (!validateExtension(file)) {
$.growl.error({ message: file.name + ' — ' + options.errorFormat });
}
else if (!validateSize(file)) {
$.growl.error({ message: file.name + ' — ' + options.errorSize + ' ' + options.limitSize + 'Mb' });
}
else {
var li = $('<li><div><span><i style="width:15%;"></i></span></div></li>');
li.insertBefore(ul.find('li.add'));
items++;
upload(button.attr('name'), file, li);
if (items >= options.limit) {
ul.find('li.add').hide();
return(false);
}
}
});
ul.find('li.add > i').removeClass('on');
button.attr('disabled', false);
});
if (items >= options.limit) {
ul.find('li.add').hide();
}
function validateExtension(file)
{
var ext = file.name.split('.').pop().toLowerCase();
var allowed = options.allowedExtensions.split(',');
return($.inArray(ext, allowed) != -1);
}
function validateSize(file)
{
return(options.limitSize == 0 || ((file.size/1024)/1024) < options.limitSize);
}
function upload(field, file, li)
{
var formData = new FormData();
formData.append(field, file);
formData.append('data', options.data);
$.ajax({
url: options.url,
type: 'POST',
data: formData,
dataType: 'json',
success: function(data) {
var percent = 100;
li.find('i').width(percent+'%');
if (data.type == 'error') {
$.growl.error({ message: data.info });
$(li).fadeOut(function() {
$(li).remove();
});
items–;
}
else {
li.html('<a href="#" class="d" rel="' + data.file + '" title="удалить"><span class="ui-icon ui-icon-white ui-icon-close"></span></a><a href="#" class="r" title="повернуть на 90&#176;"><span class="ui-icon ui-icon-white ui-icon-arrowrefresh-1-s"></span></a><a href="' + options.filesDir + data.file + '" target="_blank"><img src="' + options.filesDir + 'thumb-' + data.file + '"></a><input type="hidden" name="photos[]" value="' + data.file + '"><input type="hidden" name="rotates[]" value="0" class="r">');
}
},
xhr: function() {
myXhr = $.ajaxSettings.xhr();
if (myXhr.upload) {
myXhr.upload.addEventListener('progress', function(e) {
var total = e.total;
var loaded = e.loaded;
var percent = Number(((e.loaded * 100)/e.total).toFixed(2));
li.find('i').width(percent+'%');
}, false);
}
return(myXhr);
},
async: true,
cache: false,
contentType: false,
processData: false
});
}
function progress(e)
{
if (e.lengthComputable) {
var total = e.total;
var loaded = e.loaded;
var percent = Number(((e.loaded * 100)/e.total).toFixed(2));
//li.find('i').width(percent+'%');
console.log(percent);
}
}
// delete uploaded photo
$(ul).on('click', 'a.d', function() {
var a = $(this);
$.getJSON(options.urlDelete + '?file=' + $(this).attr('rel'), function(data) {
if (data.type == 'success') {
$(a).parent().fadeOut(function() {
$(this).remove();
});
items–;
if (items < options.limit) {
ul.find('li.add').show();
}
}
else {
$.growl.error({ message: data.info });
}
});
return(false);
});
// rotate uploaded photos
$(ul).on('click', 'a.r', function() {
var old_value = parseInt($(this).parent().find('input.r').val());
var value = old_value + 90;
if (value == 360) {
value = 0;
}
$(this).parent().find('input.r').val(value);
var img = $(this).parent().find('img');
$({deg: old_value}).animate({deg: value}, {
duration: 300,
step: function(now) {
$(img).css({
transform: 'rotate(' + now + 'deg)'
});
}
});
return(false);
});
}
})(jQuery);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment