直接上干货 不废话了

普通上传:  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上传图片(资源)和预览的更多相关文章

  1. HTML5 CSS3 经典案例:无插件拖拽上传图片 (支持预览与批量) (二)

    转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/31513065 上一篇已经实现了这个项目的整体的HTML和CSS: HTML5 C ...

  2. OSS上传图片无法在线预览的解决方案

    OSS上传图片无法在线预览的解决方案 最近在做的项目涉及到商品详情,由于前端用的flutter框架并且该详情为富文本,dart语言关于富文本的组件不是非常友好,当富文本中的图片无法在浏览器中直接预览的 ...

  3. (干货)微信小程序之上传图片和图片预览

    这几天一直负责做微信小程序这一块,也可以说是边做边学习吧,把自己做的微信小程序的一些功能分享出来,与大家探讨一下,相互学习相互进步. 先看下效果图 只写了一下效果样式的话希望大家不要太在意,下面马路杀 ...

  4. 微信小程序之上传图片和图片预览

    这几天一直负责做微信小程序这一块,也可以说是边做边学习吧,把自己做的微信小程序的一些功能分享出来,与大家探讨一下,相互学习相互进步. 先看下效果图 只写了一下效果样式的话希望大家不要太在意,下面马路杀 ...

  5. 基于jquery实现的上传图片及图片预览效果代码

    <!DOCTYPE html> <html> <head> <title>HTML5上传图片预览</title> <meta http ...

  6. javascript和HTML5上传图片之前实现预览效果

    一:FileList对象与file对象 FileList对象表示用户选择的文件列表,在HTML4中,file控件内只允许放置一个文件,但是到了HTML5中,通过添加multiple属性,file控件内 ...

  7. 利用FileReader实现上传图片前本地预览

    引子 平时做图片上传预览时如果没有特殊的要求就直接先把图片传到后台去,成功之后拿到URL再渲染到页面上,这样做在图片比较小的时候没什么问题,大一点的话就会比较慢才能看到预览了,而且还产生了垃圾文件,所 ...

  8. JS 上传图片时实现预览

    网页中一张图片可以这样显示: <img src="http://www.letuknowit.com/images/wg.png"/>也可以这样显示:<img s ...

  9. 模拟微信上传图片(带预览,支持预览gif)

    一.Html <style type="text/css"> #previewDiv{width:50px;height:50px;overflow:hidden;po ...

  10. JS上传图片本地实时预览缩略图

    HTML 代码如下 <body> <table width="100%" border="0" cellspacing="0&quo ...

随机推荐

  1. sass编译

    sass编译 命令行编译 单文件转换命令 sass style.scss style.css 单文件监听命令 sass --watch style.scss:style.css 文件夹监听命令 sas ...

  2. WaitForMultipleObjects返回失败原因之一

    上网搜了下 关于 WaitForMultipleObjects等待多个线程退出的状态失败的情况,也有人遇到类似的情况. 一次项目中我也遇到这么个情况.项目中创建线程都是用的  _beginthread ...

  3. NTP时间同步服务器设置

    一.Window Server设置 [服务器端设置]1) 修改注册表以下键值:HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Services\W32Time\ ...

  4. Centos 6.5安装oracle 11g

    (添加host)一.Centos 6.5 安装图形界面 gnome # yum groupinstall "Desktop" # yum groupinstall "X ...

  5. Java Junit单元测试

    使用Junit进行单元测试,首先引入Junit的jar,配置如下. @RunWith(SpringJUnit4ClassRunner.class) @ContextConfiguration(&quo ...

  6. Three.js开发指南---使用three.js里的各种光源(第三章)

    本章的主要内容 1 three.js有哪些可用的光源 2 什么时候用什么光源. 3 如何调整配置各种光源 4 如何创建镜头炫光 一 光源 光源大概有7种, 其中基础光源有4种 环境光(AmbientL ...

  7. 在CentOS 6.x中支持exfat格式的U盘(移动硬盘)

    参考资料:http://linux.cn/article-1503-1.html CentOS系列一直没有默认支持使用exfat格式的大容量U盘(移动硬盘),但可以通过添加fuse-exfat模块来支 ...

  8. redis缓存

    参考: java对redis的基本操作 http://www.cnblogs.com/edisonfeng/p/3571870.html 一.支持类型: key:一般设计为标准的字符串, values ...

  9. visual studio 2013快捷键与2012不同

    升级了Visual Studio2013后发现有些快捷键不能使用,于是自己尝试设置找回,还真给发现了: 依次选择(工具-->选项-->环境-->键盘)把映射方案改成Visual C# ...

  10. [zz]谱聚类

    了凡春秋USTC 谱聚类 http://chunqiu.blog.ustc.edu.cn/?p=505 最近忙着写文章,好久不写博客了.最近看到一个聚类方法--谱聚类,号称现代聚类方法,看到它简洁的公 ...