一个PHP文件上传组件,支持单图、多图、视频、

用WebUpload实现简单文件上传功能

这个图片上传工具可以配置成全局使用,包括单图上传、多图上传、视频上传、音频上传、编辑器图片视频上传、音频上传带播放功能(支持上传到七牛)。带附件历史记录功能。编辑器使用百度Ueditor开发。移动端上传为Weui改造。)

使用方法

一种为Thinkphp3.2集成,直接可以使用(需配置在项目一级目录,二级目录会报错)。另一种为纯前端使用的jsdk。

1.PHP使用方法 pc端访问 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

2. JSDK使用方法 jsdk访问地址 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、网站不提供资料下载,如需下载请到原作者页面进行下载。