File uploader with hidden IFrame
/* FILE UPLOADER */
var CLASS_UPLOADING = 'file-uploading';
var CLASS_UPLOADING_COMPLETE = 'file-uploading-complete';
var CLASS_LOADER_WIDGET = 'file-upload-loader';
var CLASS_LOADER_LABEL = 'file-upload-loader-label';
var CLASS_LOADER_CONTAINER = 'file-upload-container';
var FILE_UPLOAD_URL = '/path/to/handler';
var updateFileContainerState = function(file_input)
{
// hide input
file_input.closest('.ajax-video-form').hide();
// determine index of this input
var current_file_uploader_count = parseInt($('.' + CLASS_LOADER_CONTAINER).length);
var file_uploader_index = 1;
if( !isNaN(current_file_uploader_count) ) {
file_uploader_index = current_file_uploader_count + 1;
}
console.log('uploading index: ' + file_uploader_index);
// show the loader
var loader_container = $('<div/>')
.addClass(CLASS_LOADER_CONTAINER)
.addClass(CLASS_UPLOADING)
.append($('<div/>').addClass(CLASS_LOADER_WIDGET))
.append($('<span/>').addClass(CLASS_LOADER_LABEL).text('Uploading file...'))
.append($('<div/>').addClass('clear'));
file_input.closest('.mtm0')
.prepend(loader_container)
.find('.delete-mtm').remove();
// return index
return file_uploader_index;
}
var postFileToIframe = function(file_input,file_uploader_index)
{
var iframe_name = 'iframe_'+file_uploader_index;
// create iframe
var iframe = $('<iframe/>')
.attr('name',iframe_name)
.appendTo('body');
// create and post the form
var form = $('<form/>')
.attr('action',FILE_UPLOAD_URL + '/id/<?php echo $_GET['id']; ?>/index/'+file_uploader_index)
.attr('method','POST')
.attr('enctype','multipart/form-data')
.attr('encoding','multiplart/form-data')
.attr('MAX_FILE_SIZE','500000000000')
.attr('target',iframe_name)
.append(file_input)
.hide()
.appendTo('body')
.submit();
//console.log(form.find('input'));
}
var uploadFile = function(file_input)
{
// change appearance state, removing input
var file_uploader_index = updateFileContainerState(file_input);
// post file to iframe
postFileToIframe(file_input,file_uploader_index);
}
var updateFileContainerStateComplete = function(file_uploader_index)
{
var complete_container = $($('.' +CLASS_LOADER_CONTAINER)[(file_uploader_index - 1)]);
// change state of loader to complete
complete_container.html(
$('<div/>')
.append($('<div/>').addClass(CLASS_UPLOADING_COMPLETE))
.append($('<div/>').addClass('clear'))
);
}
// Use
// Upload file through iframe
$('input[type="file"]').live('change',function() {
uploadFile($(this));
});