@md5 jQuery ezPhotoUploader.js

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);