# Simple Demo without css


View Source
$('#file1').uploader({
    url: "server/upload.php?id=file1",
    //fileElement: 'file1',
    uploadTriggeredButton: 'btn1',
    allowFiles: 'jpg,gif,png,jpge,bmp',
    list: {
        element: 'ul1',
        allowDelete: true,
        deleteUrl: 'server/delete.php',
        ajaxParams: ['id', 'ext'],
    }
}).init();

# Demo template 1

+ Select File...
View Source
$('#file2').uploader({
    url: "server/upload.php?id=file2",
    //fileElement: 'file2',
    uploadTriggeredButton: 'btn2',
    allowFiles: 'jpg,gif,png,jpge,bmp',
    onValidateFailed: function (name) {
        alert('Only "jpg,gif,png,jpge,bmp" is allowed');
        return false;
    },
    list: {
        element: 'ul2',
        allowDelete: true,
        deleteUrl: 'server/delete.php',
        ajaxParams: ['id', 'ext'],
        fileTemplate: '<span class="name">{name}</span><span class="size">{zise} Kb</span>',
        deleteButtonTemplate: '<button class="btn btn-danger delete" type="button"><i class="glyphicon glyphicon-trash"></i><span>Delete</span></button>',
    },
    onSelect: function (name) {
        $(this.uploadButton).find('span').html('Upload (' + name + ')');
    },
    beforeUpload: function () {
        $(this.uploadButton).find('span').html('Uploading');
    },
    afterUpload: function (rst) {
        $(this.uploadButton).find('span').html('Upload');
    },
    dataFilter: function (rst) {
        rst.zise = Math.ceil(rst.zise * 100 / 1024) / 100;
        return rst;
    }
}).init();

# Demo template 2

+ Select File...
View Source
$('#file3').uploader({
    url: "server/upload.php?id=file3",
    allowFiles: 'jpg,gif,png,jpge,bmp',
    onValidateFailed: function (name) {
        alert('Only "jpg,gif,png,jpge,bmp" is allowed');
        return false;
    },
    list: {
        element: 'ul3',
        liTemplate: '<div class="pic-items"></div>',
        //insertWay: 'prepend',
        insertWay: function (ul, li) {
            ul.find('.pic-uploader').before(li);
        },
        allowDelete: true,
        deleteUrl: 'server/delete.php',
        ajaxParams: ['id', 'ext'],
        fileTemplate: '<img src="server/{id}.{ext}" /><div>{name}({zise} Kb)</div>',
        deleteButtonTemplate: '<a href="javascript:;">X</a>'
    },
    beforeUpload: function () {
        $(this.fileElement).parents('.pic-uploader').find('span').html('Uploading');
    },
    afterUpload: function (rst) {
        $(this.fileElement).parents('.pic-uploader').find('span').html('+ Select File...');
    },
    onValidateFailed: function (name) {
        alert('Only "jpg,gif,png,jpge,bmp" is allowed');
        return false;
    }
}).init();