Title: Complete program for File upload with FILEBOX
Post by: thecyberzone on December 06, 2017, 09:22:20 AM
Anybody please upload a complete example containing frontend using easyui Filebox and progressbar, javascript and backend PHP file to store actual file in a directory. Thanks in advance.
Title: Re: Complete program for File upload with FILEBOX
Post by: Max Lamda on December 07, 2017, 12:58:11 AM
<script>
function putfile(mform) { var url='upload.php';
var fname=mform.find('.uploadfile').val(); fname=fname.split('\\').pop().split('/').pop();
$('#progressbar').progressbar({ value: 0, text: 'Upload of "' + fname + '", progress: {value}%' });
$('#progress').dialog({ modal:true, title:false });
$(mform[0]).form('submit', { url: url, type: 'POST', onProgress: function(percent) { $('#progressbar').progressbar({ value: percent }); }, iframe: false, success: function(d) { var data=JSON.parse(d); $('#progress').dialog('close'); if(typeof data.error != 'undefined') { alert(data.error); } else { $(from).closest('.upload').find('.loadlink').val(data.url); } }, error: function(data) { $('#progress').dialog('close'); alert('Fehler im Prozess'); }, cache: false, contentType: false, dataType: 'json', processData: false }); }
</script>
<div id='progress' style='display:none'> <div id="progressbar" style="width:400px;" class="easyui-progressbar"></div> </div>
<form class='uploadform'> <input type='file' class='uploadfile' name='uploadfile' onchange='putfile(this)' width='200px' /> <input type='hidden' name='target' value='information for uploadscript here' /> </form>
Title: Re: Complete program for File upload with FILEBOX
Post by: Max Lamda on December 07, 2017, 01:00:45 AM
<?php
$f=$_FILES['uploadfile']; $name=$f['name'];
$dest='/path/to/foo/';
if(move_uploaded_file($f['tmp_name'], fbase . "{$dest}{$name}")) { echo json_encode(array('status' => 'ok'); } else { echo json_encode(array('status' => 'error'); }
exit();
Title: Re: Complete program for File upload with FILEBOX
Post by: Max Lamda on December 07, 2017, 01:01:29 AM
I tried to paste the parts of a really big programm.
Hope it works without to many modifications.
Title: Re: Complete program for File upload with FILEBOX
Post by: thecyberzone on December 14, 2017, 02:49:40 AM
Could not link. Please give working example.
Title: Re: Complete program for File upload with FILEBOX
Post by: proceno72 on December 14, 2017, 05:33:20 AM
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);
?>
|