EasyUI Forum
March 28, 2024, 08:09:27 AM *
Welcome, Guest. Please login or register.

Login with username, password and session length
News:
 
   Home   Help Search Login Register  
Pages: [1]
  Print  
Author Topic: Complete program for File upload with FILEBOX  (Read 17805 times)
thecyberzone
Full Member
***
Posts: 176



View Profile Email
« 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.
Logged
Max Lamda
Newbie
*
Posts: 48


View Profile
« Reply #1 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>



Logged
Max Lamda
Newbie
*
Posts: 48


View Profile
« Reply #2 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();
Logged
Max Lamda
Newbie
*
Posts: 48


View Profile
« Reply #3 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.
Logged
thecyberzone
Full Member
***
Posts: 176



View Profile Email
« Reply #4 on: December 14, 2017, 02:49:40 AM »

Could not link. Please give working example.
Logged
proceno72
Newbie
*
Posts: 39



View Profile
« Reply #5 on: December 14, 2017, 05:33:20 AM »

I hope this can help you.

Html/javascript/EasyUi code:
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:
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($errstr0$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);

?>

Logged
Pages: [1]
  Print  
 
Jump to:  

Powered by MySQL Powered by PHP Powered by SMF 1.1.18 | SMF © 2013, Simple Machines Valid XHTML 1.0! Valid CSS!