onethink上传图片(资源)和预览
直接上干货 不废话了
普通上传: onthink框架 后台已经有图片和文件上传功能
controller里只需:
public function addPicture(){
/* 调用文件上传组件上传文件 */
$Picture = D('Picture');
$info = $Picture->upload(
$_FILES, C('PICTURE_UPLOAD'),
C('PICTURE_UPLOAD_DRIVER'),
null );
//TODO:上传到远程服务器
$this->ajaxReturn($info);
}
上传成功后会返回图片信息 具体信息可以用dump打印
onthink的后台是支持批量上传的前台需要修改 我这里由于没考虑兼容性所以 直接采用的是 js formdata 的方式进行上传 优点是你可以自己定制上传按钮
缺点 进度条之类的要自己写TAT 一个简单的例子:
<input type="file" id="uploadImageBack" class="uploadPictureInput" accept="image/gif, image/jpeg,image/png"/>
var fromdata = new FormData();
function uploadPic(id,name)
{
$("#"+id).on("change", function(){
var files = !!this.files ? this.files : [];
return if (!files.length || !window.FileReader) return;
if (/^image/.test( files[0].type)){
var reader = new FileReader();
reader.readAsDataURL(files[0]);
fromdata.append(name, files[0]);
reader.onloadend = function(){
$("#"+id).parent().parent().find('.upload-img-box').empty();
$("#"+id).parent().parent().find('.upload-img-box').html( '<div class="upload-pre-item"><span class="delPic" key="'+name+'">X</span><img src="' + this.result + '"/></div>' );
} }
});
}
你可以修改files 为递增的形式 使之可以实现批量上传 (注意低版本浏览器可能不支持该功能)
确保服务器端已经配置好上传的文件夹还有并且给了文件夹权限
FTP上传: 首先改一下admin下面的config文件增加
'PICTURE_UPLOAD_FTP' => array(
'mimes' => '', //允许上传的文件MiMe类型
'maxSize' => 2*1024*1024, //上传的文件大小限制 (0-不做限制)
'exts' => 'jpg,gif,png,jpeg', //允许上传的文件后缀
'autoSub' => true, //自动子目录保存文件
'subName' => array('date', 'Ymd'), //子目录创建方式,[0]-函数名,[1]-参数,多个参数使用数组
'rootPath' => false, //保存根路径 'savePath' => '', //保存路径
'saveName' =>array('uniqid', ''), //上传文件命名规则,[0]-函数名,[1]-参数,多个参数使用数组
'saveExt' => '',//文件保存后缀,空则使用原后缀
'replace' => true, //存在同名是否覆盖
'hash' => true, //是否生成hash编码
'callback' => false, //检测文件是否存在回调函数,如果存在返回文件信息数组
),
'PICTURE_UPLOAD_DRIVER_FTP'=>'Ftp',
'PICTURE_UPLOAD_CONFIG' => array(
'host' => '192.168.24.186', //服务器
'port' => 21, //端口
'timeout' => 90, //超时时间
'username' => 'test',
'password' => 'test',
),
然后controller里改为:
public function addPicture(){
/* 返回标准数据 */
$return = array('status' => 1, 'info' => '上传成功',);
/* 调用文件上传组件上传文件 */
$Picture = D('Picture');
$info = $Picture->upload(
$_FILES,
C('PICTURE_UPLOAD_FTP'),
C('PICTURE_UPLOAD_DRIVER_FTP'),
C("PICTURE_UPLOAD_CONFIG") );
//TODO:上传到远程服务器 $book = D('Books');
/* 返回JSON数据 */
$this->ajaxReturn($info);
}
onethink上传图片(资源)和预览的更多相关文章
- HTML5 CSS3 经典案例:无插件拖拽上传图片 (支持预览与批量) (二)
转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/31513065 上一篇已经实现了这个项目的整体的HTML和CSS: HTML5 C ...
- OSS上传图片无法在线预览的解决方案
OSS上传图片无法在线预览的解决方案 最近在做的项目涉及到商品详情,由于前端用的flutter框架并且该详情为富文本,dart语言关于富文本的组件不是非常友好,当富文本中的图片无法在浏览器中直接预览的 ...
- (干货)微信小程序之上传图片和图片预览
这几天一直负责做微信小程序这一块,也可以说是边做边学习吧,把自己做的微信小程序的一些功能分享出来,与大家探讨一下,相互学习相互进步. 先看下效果图 只写了一下效果样式的话希望大家不要太在意,下面马路杀 ...
- 微信小程序之上传图片和图片预览
这几天一直负责做微信小程序这一块,也可以说是边做边学习吧,把自己做的微信小程序的一些功能分享出来,与大家探讨一下,相互学习相互进步. 先看下效果图 只写了一下效果样式的话希望大家不要太在意,下面马路杀 ...
- 基于jquery实现的上传图片及图片预览效果代码
<!DOCTYPE html> <html> <head> <title>HTML5上传图片预览</title> <meta http ...
- javascript和HTML5上传图片之前实现预览效果
一:FileList对象与file对象 FileList对象表示用户选择的文件列表,在HTML4中,file控件内只允许放置一个文件,但是到了HTML5中,通过添加multiple属性,file控件内 ...
- 利用FileReader实现上传图片前本地预览
引子 平时做图片上传预览时如果没有特殊的要求就直接先把图片传到后台去,成功之后拿到URL再渲染到页面上,这样做在图片比较小的时候没什么问题,大一点的话就会比较慢才能看到预览了,而且还产生了垃圾文件,所 ...
- JS 上传图片时实现预览
网页中一张图片可以这样显示: <img src="http://www.letuknowit.com/images/wg.png"/>也可以这样显示:<img s ...
- 模拟微信上传图片(带预览,支持预览gif)
一.Html <style type="text/css"> #previewDiv{width:50px;height:50px;overflow:hidden;po ...
- JS上传图片本地实时预览缩略图
HTML 代码如下 <body> <table width="100%" border="0" cellspacing="0&quo ...
随机推荐
- iOS 一个app跳转另一个app并实现通信(如A跳到B并打开B中指定页面)
功能实现:A跳到B并打开B中指定页面 步骤: 1.首先创建两个项目(项目A,项目B),在项目B中的info.plist文件中添加URL Types,如下图所示:其中URL idenifier是项目B的 ...
- 『U3D学习』破坏神回忆图<一>任务系统
学习资料:siki老师<泰斗破坏神> 联系QQ:1790555618 功能描述:任务面板内容生成,角色进行任务,自动寻路到指定地点. 从今天起,本人会发学习回忆图,先总结开发阶段功能,后续 ...
- STM32学习笔记——OLED屏
STM32学习笔记--OLED屏 OLED屏的特点: 1. 模块有单色和双色可选,单色为纯蓝色,双色为黄蓝双色(本人选用双色): 2. 显示尺寸为0.96寸 3. 分辨率为128*64 4. ...
- 2016HUAS_ACM暑假集训4A - 递推
利用组合公式C(n,m)=C(n-1,m)+C(n-1,m-1).也就是从n个数里面选择m个数.按递增方式放在每一层循环. 杨辉三角+二项式定理,还真是挺有“意思”的一道题.说实话,非原创.见谅... ...
- 命名空间System.Threading命名空间的同步锁 Monitor类
官方备注: Monitor类通过向单个线程授予对象所来控制对对象的访问.对象所提供限制访问代码块的能力.当一个线程拥有对象的锁时,其他任何线程都不能获取该锁.还可以使用Monitor来确保不会允许其他 ...
- 【POJ3621】Sightseeing Cows
Sightseeing Cows Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 8331 Accepted: 2791 ...
- [原创]cocos2d-x研习录-第三阶 背景音乐和音效
在游戏中,音效是一个不可或缺的部分,它可以为我们的游戏增加效果.音效在游戏中一般分为长时间的背景音乐和短促的特效音乐.Cocos2D-x支持多种常见音乐格式(mp3.wav等). Cocos2D-x提 ...
- EXT.net DateField format设置
DateField df = new DateField(); df.Format = "yyyy-MM-dd HH:mm:ss";格 ...
- 访问者模式(Visitor Pattern)
定义:封装某些作用于某种数据结构中各元素的操作,它可以在不改变数据结构的前提下定义作用于这些元素的新的操作. Visitor 抽象访问者角色:为该对象结构中具体元素角色声明一个访问操作接口.该操作接口 ...
- DE2-115开发板学习(1_时钟信号引脚分配与复位信号的产生)
1.DE2-115开发板资源 Altera EPCS64 Configuration Device 64MB SDRAM (两片) 50MHz Oscillator EP4CE115F29C7(4PL ...