一个PHP文件上传组件,支持单图、多图、视频、
使用方法这个图片上传工具可以配置成全局使用,包括单图上传、多图上传、视频上传、音频上传、编辑器图片视频上传、音频上传带播放功能(支持上传到七牛)。带附件历史记录功能。编辑器使用百度Ueditor开发。移动端上传为Weui改造。
)
1.PHP使用方法 pc端访问一种为Thinkphp3.2集成,直接可以使用(需配置在项目一级目录,二级目录会报错)。另一种为纯前端使用的jsdk。
yourpath/home/index/index
移动端访问 yourpath/home/index/mobileindex
项目配置文件
修改 /resource/js/app/config.js
修改 /Application/Common/config.php
核心文件
新增了 /ThinkPHP/Library/Org/Util/UploadFile.class.php
修改了 /ThinkPHP/Think/Upload/Driver/Qiniu.class.php
数据库
附件表,可按需修改
CREATE TABLE `attachment` (
`id` int(11) NOT NULL AUTO_INCREMENT COMMENT '自增ID',
`file_type` enum('1','2','3','4') NOT NULL COMMENT '附件类型1图片2音频3视频4其他',
`file_name` varchar(100) NOT NULL COMMENT '附件名',
`file_url` varchar(200) NOT NULL COMMENT '附件地址',
`is_cdn` tinyint(1) NOT NULL DEFAULT '0' COMMENT '是否在cdn,1是0否',
`file_size` int(11) NOT NULL DEFAULT '0' COMMENT '附件大小',
`year` smallint(6) NOT NULL COMMENT '上传年份',
`month` tinyint(2) NOT NULL COMMENT '上传月份',
`create_time` timestamp NULL DEFAULT CURRENT_TIMESTAMP COMMENT '上传时间',
PRIMARY KEY (`id`),
KEY `year` (`year`) USING BTREE,
KEY `month` (`month`) USING BTREE
) ENGINE=InnoDB DEFAULT CHARSET=utf8;
图片上传函数参数
$name 表单字段的名称,同一页面不能为空
$value 表单input值
$default 默认显示的缩略图
$options 图片上传配置信息
单图上传
tpl_form_field_image($name, $value = ‘’, $default = ‘’, $options = array())
多图上传
tpl_form_field_multi_audio($name, $value = array(), $options = array())
音频上传、视频上传类似,具体参考/Application/Common/Common/function.php
yourpath/webTest/index.html
只需要把里面的webTest目录文件取出来就行。
修改配置webTest/assets/js/EasyUpload.js
,如下所示:
//项目url地址
var app_path = 'http://xxx';
//定义路由
var appConfigPath = {
//上传地址
uploadPath:app_path+"index.php/home/index/upload",
//历史图片
imgList:app_path+"index.php/home/index/imageList",
//展示远程图片地址
fetchImage:app_path+"index.php/home/index/fetch",
//历史视频
vedioList:app_path+"index.php/home/index/videoList",
//历史音频
audioList:app_path+"index.php/home/index/audioList",
deleteFile:app_path+"index.php/home/index/deleteFile"
};
调用方式,参照webTest/index.html
引入css和js文件,再调用需要上传的方法,方法里的参数有 domName 节点名、defaultValue 默认值、options 配置 。具体参数使用方式查看webTest/assets/js/EasyUpload.js
如下所示:
<script>
$(function () {
//图片上传
EasyUpload.loadFiledImage("#filedImage");
//编辑器
EasyUpload.loadUeditor("#content");
//音频上传
EasyUpload.loadAudio('#audios');
//视频上传
EasyUpload.loadVideo('#movies');
});
</script>
文件上传返回格式:
{
"ext": "gif",
"name": "jdfw.gif",
"attachment": "/Uploads/image/2017-09-06/59afb44c54ef4.gif",
"filename": "/Uploads/image/2017-09-06/59afb44c54ef4.gif",
"url": "http://10.10.12.232:99/Uploads/image/2017-09-06/59afb44c54ef4.gif",
"is_image": 1,
"filesize": 1280038,
"height": 80,
"widch": 80
}
历史记录返回格式(items的key为id的值)
{
"message": {
"message": {
"items": {
"1": {
"id": "1",
"filename": "cms结构_v1.png",
"attachment": "/Uploads/image/2017-09-06/59afb1fbeeaf1.png",
"url": "/Uploads/image/2017-09-06/59afb1fbeeaf1.png",
"type": "1",
"createtime": "2017-09-06"
}
},
"page": ""
},
"error": 0
},
"redirect": "",
"type": "ajax"
}
下载地址
https://github.com/wangwenfan/EasyUpload
版权声明:
1、该文章(资料)来源于互联网公开信息,我方只是对该内容做点评,所分享的下载地址为原作者公开地址。2、网站不提供资料下载,如需下载请到原作者页面进行下载。