直接上干货 不废话了

普通上传:  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. jekins构建自动化项目的步骤

    填入项目名字 源码管理从git自动拉取代码到工作目录 jenkins拉取代码会到工作空间linux下安装完目录是/var/lib/jenkins/workspace/jeekins-test(可以根据 ...

  2. pvoid64 pvoid

    如果需要某一个结构体,既在kernel space用,又在user space用,如 typedef struct { PVOID data; int size; }binary,pbinary; 上 ...

  3. iOS_仿QQ表情键盘

    当UITextFiled和UITextView这种文本输入类控件成为第一响应者时,弹出的键盘由他们的一个UIView类的inputView属性来控制,当inputView为nil时会弹出系统的键盘,想 ...

  4. ffmpeg 和 SDL 的结合使用

    FFmpeg是一套可以用来记录.转换数字音频.视频,并能将其转化为流的开源计算机程序.采用LGPL或GPL许可证.它提供了录制.转换以及流化音视 频的完整解决方案.它包含了非常先进的音频/视频编解码库 ...

  5. python中的input,print

    此用例在python3.3.5中测试通过: 输入:在python中输入是使用input,下面示例代码表示把输入的值存入变量s中,并输入s 在这里提醒一下:使用input获取的值都是string类型

  6. 35 个 Java 代码性能优化总结

    前言 代码优化,一个很重要的课题.可能有些人觉得没用,一些细小的地方有什么好修改的,改与不改对于代码的运行效率有什么影响呢?这个问题我是这么考虑的,就像大海里面的鲸鱼一样,它吃一条小虾米有用吗?没用, ...

  7. Amazon验证码机器算法识别

    Amazon验证码识别 在破解Amazon的验证码的时候,利用机器学习得到验证码破解精度超过70%,主要是训练样本不够,如果在足够的样本下达到90%是非常有可能的. update后,样本数为2800多 ...

  8. 使用jQuery Autocomplete(自动完成)插件

    jQuery 的Autocomplete(自动完成.自动填充)插件有不少,但比较下来我感觉,还是bassistance.de 的比较强大,我们就来写一些代码感受一下. 最简单的Autocomplete ...

  9. Java在Web项目中读取properties文件

    import java.io.FileNotFoundException; import java.io.IOException; import java.io.InputStream; import ...

  10. 黄聪:win7 QQ自动远程协助 提示关闭了远程桌面

    最近在使用QQ自动远程协助的时候,输入完远程验证密码后,提示“关闭了远程桌面” 系统环境:win7 64位 问题描述:在使用QQ自动远程协助,对方QQ提示关闭了远程桌面. 解决办法:将2台电脑的时间调 ...