EasyUI Forum

<div style="width: 300px;">
	<form enctype="multipart/form-data" id="id-ff" name="id-ff" method="post">
		<table border="0" style="width:100%">
			<tr>
				<td><input id="id-fb" name="userfile[]" type="text" style="width: 100%;"></td>
				<td style="width: 90px; text-align: right;"><a id="id-btn-upload" href="javascript:void(0)">Upload</a></td>
			</tr>
		</table>
	</form>
</div>
<div id="multi-purpose"></div>
<script type="text/javascript">
$(function() {
	// Show a progress bar on modal window
	function progressFile(method,val){
		var div_id='win-progress-file';
		var progress_id='progress-file';
		var contenthtml = '<div id="'+progress_id+'" class="easyui-progressbar" style="width:100%;"></div>' +
			'<div style="margin-top: 10px; text-align: center; font-size: 1.3em; font-weight: bold;">Uploading files</div>';
		var op = method.toLowerCase();
		switch (op) {
			case 'show':
				$("#multi-purpose").append('<div id="'+div_id+'" style="padding: 20px;"></div>');
				$("#"+div_id).window({
						title: 'Wait please ...',
						width: 300,
						resizable: false, shadow: false,
						minimizable: false, maximizable: false, collapsible:false, closable: false,
						modal: true,
						onClose: function (event, ui) {
								$("#"+div_id).window('destroy');
								$("#"+div_id).remove();
						},
						content: contenthtml
				});
			break;
			case 'close':
				$("#"+div_id).window('close');
			break;
			case 'update':
				$("#"+progress_id).progressbar('setValue', val);
			break;

		}
	}
	
    // upload function (submit form)
    function upLoad() {
        if ($('#id-fb').textbox('getValue').length === 0) {
            $.messager.alert('Message','No files selected for upload.','error');
            return false;
        }
        $('#id-ff').form('submit', {
            url: 'manage-uploaded-files.php', //What do you want to do with files uploaded on server?
            iframe: false,
            onProgress: function (percent) {
                progressFile('update',percent);
            },
            onSubmit: function(param) {
                progressFile('show');
            },
            success: function(data){
                $('#id-ff').form('clear');
				$.messager.alert('Message','Files uploaded.','info');
			}
        });
    }
	
	$('#id-fb').filebox({
		buttonText: 'Browse...',
		multiple: true,
		icons:[{
			iconCls:'icon-clear',
			handler: function(e){
				$(e.data.target).filebox('clear');
			}
		}],
		onChange: function (newValue, oldValue) {
			if ($(this).textbox('getValue').length > 0 ) {
				$('#id-btn-upload').linkbutton('enable');
			}
			else { $('#id-btn-upload').linkbutton('disable'); }
		}
	});
	$('#id-btn-upload').linkbutton({
		iconCls: 'icon-upload', disabled: true, plain: true,
		onClick: function() { upLoad(); }
	});	
	$('#id-ff').form();
}
</script>