muhimel / fileuploader
文件上传项目
dev-master
2019-07-31 11:56 UTC
Requires
- php: ^5.3.2 || ^7.0
This package is auto-updated.
Last update: 2024-09-29 05:55:25 UTC
README
这是一个简单的文件上传应用程序
要求
PHP >= 5.3.2
Vue Js v2
Axios JS
使用方法
对于 CakePHP
从项目根目录打开 composer.json 并添加以下行
require:{
"muhimel/fileuploader":"v1.1.1.0-dev"
}
从终端运行以下命令(从项目根目录)
composer update
或者
composer require --dev muhimel/fileuploader "v1.1.1.0-dev"
// recommanded to use this command so composer will only install this library
// will not update other library used in the project
从 vendor/muhimel/fileuploader/src 复制 assets 目录。在 webroot 下创建一个名为 (uploader) 的目录并将 assets 目录粘贴到该目录下
创建一个插件名称(例如 FileUpload)
现在在 FileUpload 插件内创建 UploadController
确保您添加以下命名空间
use Muhimel\Uploader;
use Muhimel\Helper\HtmlHelper;
use Muhimel\Interfaces\UploaderInterface;
现在在 UploadController 内创建 index 方法并写入以下代码,控制器应实现 UploaderInterface 接口;
public function index($category,$accept,$suffix=null,$selectionType="single"){
// change base url
$baseUrl = 'https:///appname/';
HtmlHelper::setAssetPath($baseUrl.'uploader/assets/');
HtmlHelper::setAsset('css/bootstrap.min.css');
HtmlHelper::setAsset('js/vue/vue.js');
HtmlHelper::setAsset('js/axios/axios.min.js');
Uploader::getUI([
'base_url'=> $baseUrl,
'upload_url'=>'file-upload/upload/process/'.$category.(!empty($suffix)? '/'.$suffix : ''),
'csrf_token'=> $this->request->param('_csrfToken'),
'uploader-object' => null, //optional
'selection-type' => $selectionType,
'accept'=> $accept // use document to allow (.docx,.xlsx,.pptx,pdf) or use images to allow (.png,.jpg,.bmp,.gif)
]);
}
现在在 UploadController 内写入 process 方法
public function process($category,$suffix=null)
{
$this->category = $category;
// you can modify suffix here as your need
if($this->request->allowMethod(['post'])){
$targetDir = $_SERVER['DOCUMENT_ROOT'].$this->request->webroot.'webroot/uploads/'.((!empty($suffix))? $suffix.'/' : '');
Uploader::setOptions(['target_dir'=>$targetDir]);
Uploader::upload($this);
}
exit;
}
在 UploadController 内写入以下 2 个监听器方法
public function beforeUpload(&$file)
{
// file upload error checking and error message
if(empty($file)){
echo json_encode(array(
'code'=>400,
'message'=> 'Sorry! file not selected'
));
exit;
}
if($file['size'] > (5*(1024*1024))){
echo json_encode(array(
'code'=>400,
'message'=> 'Sorry! File size should not greater than 5Mb'
));
exit;
}
// setting file name and file original name
$file['original_filename'] = $file['name'];
$file['name'] = $this->category.'-'.md5(microtime(true)).substr($file['name'],strrpos($file['name'],'.'));
}
public function afterUpload($file)
{
// custom project specific code
$uploadDir = explode('/',substr($file['uploadDir'],0,strlen($file['uploadDir'])-1));
$lastFolderName = array_pop($uploadDir);
$lastFolder = null;
try{
$uaFileFoldersRepo = TableRegistry::get('FileUpload.UaFileFolders');
$lastFolder = $uaFileFoldersRepo->find('all')->where(['name'=>$lastFolderName])->first();
if(!empty($lastFolder)){
$uaFilesRepo = TableRegistry::get('FileUpload.UaFiles');
$uaFile = $uaFilesRepo->newEntity();
$uaFile->user_id = $this->logged_user_id;
$uaFile->ua_file_folder_id = $lastFolder->id;
$uaFile->file_name = $file['name'];
$uaFile->file_orginal_name = $file['original_filename'];
$uaFile->type = $file['type'];
$uaFile->extension = substr($file['name'],(strrpos($file['name'],'.')+1),strlen($file['name']));
$uaFile->file_size = $file['size'];
$file['file']=$uaFile;
$file['folder_id'] = $lastFolder->id;
if(!$uaFilesRepo->save($uaFile)){
$file['file_insert_error'] = $uaFile->errors();
}
}
}catch(\Exception $ex){
$file['error_message'] = $ex->getMessage();
echo json_encode(array(
'code'=>400,
'uploaded' => $file
));
exit;
}
// end of custom project specific code
// this method should response like following
echo json_encode(array(
'code'=>200,
'uploaded' => $file
));
exit;
}
现在在您想添加上传器的页面上写入以下 HTML 标签和属性
<div id="root">
<uploader style="margin-top:6px;"
:btncss="'btn btn-default btn-success'"
:btnname="'Button Name'"
:route="'file-upload/upload"
:dir="'default'"
:accept="'images'"
:category="'category-name'"
:uploadedfiles="handleUploader"
:selectiontype="'single'">
</uploader>
</div>
确保您在 webroot/js/ 或 plugins/pluginname/webroot/js/ 下有 uploader.js 文件,并且确保在您的 pagewise custom.js 方法部分有以下方法
handleUploader:function(uploadedFiles){
// all uploaded file information will be available in uploadedFiles array
// handle your own code here
}