I hope this can help you.
Html/javascript/EasyUi code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>UPload Example</title>
<!-- Load here all css and libraries for EasyUi -->
</head>
<body>
<form enctype="multipart/form-data" id="ff" name="ff" method="post">
<table border="0" style="width:100%">
<tr>
<td><input id="fb" name="userfile[]" type="text" style="width: 100%;"></td>
<td style="width: 90px; text-align: right;"><a id="btn-upload" href="javascript:void(0)">Upload</a></td>
</tr>
</table>
</form>
<div id="multiusage"></div>
<script type="text/javascript">
$(function() {
$('#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 ) {
$('#btn-upload').linkbutton('enable');
}
else { $('#btn-upload').linkbutton('disable'); }
}
});
var inputfile = $('#fb').next().find('.textbox-value');
$('#btn-upload').linkbutton({
iconCls: 'icon-upload', disabled: true, plain: true,
onClick: function() { upLoad(); }
});
// Function to execute on submit form
function upLoad() {
if ($('#fb').textbox('getValue').length === 0) {
$.messager.alert('Message','Upload not possible.<br /><br />No file selected.','error');
return false;
}
$('#ff').form('submit', {
url: 'upload-backend.php',
queryParams: { uploadpath: '/tmp/uploads' },
iframe: false,
onProgress: function (percent) {
progressFile('update',percent);
},
onSubmit: function(param) {
progressFile('show');
},
success: function(data) {
$('ff').form('clear');
setTimeout(function() {
submitReturn(data,function(data) { // nothing to exec on submit success
},
function(){ // nothing to exec on submit error
},false);
},1000); }
});
}
// Show modal ProgrssBar when uploading file
function progressFile(method,val){
var div_id='win-progress-file';
var progress_id='progress-file';
var htmlcontent = '<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':
$("#multiusage").append('<div id="'+div_id+'" style="padding: 20px;"></div>');
$("#"+div_id).window({
title: 'Wait ...',
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: htmlcontent
});
break;
case 'close':
$("#"+div_id).window('close');
break;
case 'update':
$("#"+progress_id).progressbar('setValue', val);
break;
}
}
//Manage form submit return message (you can optionally exec specified function on success and on error)
function submitReturn(data,successCallback,errorCallback,showSavemsg) {
showSavemsg = typeof showSavemsg !== 'undefined' ? showSavemsg : true;
$.messager.progress('close');
progressFile('close');
try {
var data = $.parseJSON(data);
} catch (e) {
// console.log(e);
$.messager.alert('JavaScript Exception Error',data);
errorCallback();
return false;
}
if (data.error === true){
$.messager.alert('Server Error',data.message,'error');
errorCallback(data);
return false;
} else {
if (showSavemsg) {
$.messager.show({
title:'Message',
msg:'<span class="icon-ok"><img src="img/blank.gif" width="22" height="16"></span><span>Data successfully saved.</span>'
});
}
successCallback(data);
}
}
});
</script>
</body>
</html>
PHP Backend code:
<?php
set_time_limit(0);
$uploadpath=(string)filter_input(INPUT_POST, 'uploadpath');
$response = array();
$result = array();
function exit_with_error ($msg) {
$response = array();
$response["error"] = true;
$response["message"] = $msg;
echo json_encode($response,JSON_HEX_TAG);
die;
}
function codeToMessage($code) {
switch ($code) {
case UPLOAD_ERR_INI_SIZE:
$message = "File too big. Check \"upload_max_filesize\" in php.ini.";
break;
case UPLOAD_ERR_FORM_SIZE:
$message = "File too big. Check \"MAX_FILE_SIZE\" specified on HTML form.";
break;
case UPLOAD_ERR_PARTIAL:
$message = "File partially uploaded.";
break;
case UPLOAD_ERR_NO_FILE:
$message = "File not uploaded.";
break;
case UPLOAD_ERR_NO_TMP_DIR:
$message = "Temporary folder not availaible.";
break;
case UPLOAD_ERR_CANT_WRITE:
$message = "Write error on file-system.";
break;
case UPLOAD_ERR_EXTENSION:
$message = "Upload blocked by extension.";
break;
default:
$message = "General error.";
break;
}
return $message;
}
set_error_handler(function ($errno, $errstr, $errfile, $errline ,array $errcontex) {
throw new ErrorException($errstr, 0, $errno, $errfile, $errline);
});
try {
// if single file
if(!is_array($_FILES["userfile"]["name"])) {
if ($_FILES["userfile"]["error"] === UPLOAD_ERR_OK) {
$fileName = $_FILES["userfile"]["name"];
if (!move_uploaded_file($_FILES["userfile"]["tmp_name"],$uploadpath.DIRECTORY_SEPARATOR.$fileName)) {
$msg="Upload not completed.<br />Error on copy file \"".$fileName."\" in folder \"".$uploadpath."\"";
exit_with_error($msg);
}
}
else {
$upldmsg = codeToMessage($_FILES["userfile"]["error"]);
$msg = "Upload not completed.<br />\"".$_FILES["userfile"]["name"]."\" : ".$upldmsg;
exit_with_error($msg);
}
}
//else if Multiple files
else {
$fileCount = count($_FILES["userfile"]["name"]);
for($i=0; $i < $fileCount; $i++) {
if ($_FILES["userfile"]["error"][$i] === UPLOAD_ERR_OK) {
$fileName = $_FILES["userfile"]["name"][$i];
if (!move_uploaded_file($_FILES["userfile"]["tmp_name"][$i],$uploadpath.DIRECTORY_SEPARATOR.$fileName)) {
$msg="Upload not completed.<br />Error on copy file \"".$fileName."\" in folder \"".$uploadpath."\"";
exit_with_error($msg);
}
}
else {
$upldmsg = codeToMessage($_FILES["userfile"]["error"][$i]);
$msg = "Upload not completed.<br />\"".$_FILES["userfile"]["name"][$i]."\" : ".$upldmsg;
exit_with_error($msg);
}
}
}
} catch (ErrorException $e) {
$response["error"] = true;
$msg = "ERROR: Upload not completed.<br /><br /><br/><b>URL:</b> ".$_SERVER['PHP_SELF']."<br />"
. "<b>Error on line n. :</b> ".$e->getLine()."<br/><b>MESSAGE:</b><br />";
$response["message"] = $msg.$e->getMessage();
echo json_encode($response,JSON_HEX_TAG);
die;
}
$response["error"] = false;
echo json_encode($response);
?>