直接上干货 不废话了

普通上传:  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. select,poll,epoll区别

    select:忙轮询,一直在轮询,效率跟链接数成反比,资源限制 poll:轮询,不用一直轮询,有事件触发时轮询,资源限制 epoll:有事件触发时直接通知复杂度O(1)

  2. Java & Android Color-Background

    int i = Color.parseColor("#FFFFFF"); int j = Color.rgb(255,255,255); 1.SetBackground(Drawa ...

  3. 两种设置disabled属性以及三种方法移除disabled属性

    //两种方法设置disabled属性 $('#areaSelect').attr("disabled",true); $('#areaSelect').attr("dis ...

  4. formData上传图片

    ---------------------formData上传图片--------------------- <form id="imageform"> <img ...

  5. Java中事务的概念

    | 版权声明:本文为博主原创文章,未经博主允许不得转载. 前言: 在学习事务确实有不少弯路,那么今天笔者就用例子讲解一下事务,让初学者少走一些弯路. [回顾事务]问:什么是事务? 答:用专业术语来说事 ...

  6. js获取ip地址

    方法三(所有的平台及浏览器):使用的搜狐接口 <script src="http://pv.sohu.com/cityjson?ie=utf-8"></scrip ...

  7. photoshop,黑白转彩色单色

    方法一: 打开 色相/饱和度 面板,勾选上 着色, 然后调节 明度 滑块. 方法二: 前面方法的缺点是会将修改直接塌陷到图层,如果想不塌陷,可以使用色相蒙板: 同样勾选 着色

  8. Eclipse下的Maven

    本文转载自:http://www.cnblogs.com/zlslch/p/5882567.html 当我们无法从本地仓库找到需要的构件的时候,就会从远程仓库下载构件至本地仓库.一般地,对于每个人来说 ...

  9. Automation Test in Maya Plugin Development

    现状和问题- 开发插件的功能A的时候随手建立场景, 测试插件的功能A. 测试通过后,测试场景就被丢掉.- 发现插件的功能A有bug时, 修改代码, 然后随手建立场景, 测试bug. 测试通过后,测试场 ...

  10. DHTMLX-Form

    DHTMLX-Form dhtmlxForm提供了一个标准形式与一些有用的补充,如不同风格,使用的数据从客户端和服务器端,与其他dhtmlx组件的集成.验证等. 例子 <!DOCTYPE htm ...