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);

}

时间: 2024-10-07 01:50:32

onethink上传图片(资源)和预览的相关文章

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

转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/31513065 上一篇已经实现了这个项目的整体的HTML和CSS: HTML5 CSS3 经典案例:无插件拖拽上传图片 (支持预览与批量) (一) 这篇博客直接在上篇的基础上完成,最终效果: 效果图1: 效果图2: 好了,请允许我把图片贴了两遍,方便大家看效果了~ 可以看出我们的图片的li的html其实还是挺复杂的,于是我把html文档做了一些修改: <span style=&quo

3种上传图片并实现预览的方法

在常见的用户注册页面,需要用户在本地选择一张图片作为头像,并同时预览. 常见的思路有两种:一是将图片上传至服务器的临时文件夹中,并返回该图片的url,然后渲染在html页面:另一种思路是,直接在本地内存中预览图片,用户确认提交后再上传至服务器保存. 这两种方法各有利弊,方法一很明显,浪费流量和服务器资源:方法二则加重了浏览器的负担,并且对浏览器的兼容性要求更高(在某些低版本中的IE浏览器不支持). 以下是实现上述思路的方法: 1. 模板文件 1 <!DOCTYPE html> 2 <ht

在tp下UMeditor上传图片成功,预览失败

我的是tp3.2  上传编辑器图片时候处理的图片的类用的是UM自带的imagUp.class.php, 将UMeditor1.2.2放到  shop/Public/statics/下面 在上传图片的时候图片显示 用bug工具查看显示图片路径少了shop(项目根路径) 需要修改UM的配置文件umeditor.config.php 修改  ,imagePath:'/shop/Upload/image/umeditor/' <?php window.UMEDITOR_CONFIG = { //为编辑器

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

一:FileList对象与file对象 FileList对象表示用户选择的文件列表,在HTML4中,file控件内只允许放置一个文件,但是到了HTML5中,通过添加multiple属性,file控件内允许一次放置多个文件,控件内的每一个用户选择的文件都是一个file对象,而FileList对象是file对象的列表: 比如如下代码: 选择文件<input type="file" id="file" multiple size="80"/>

页面上传图片后立即预览

页面上的应用大多都有在个人信息管理中设置头像的这么一个功能,而对于实现这个功能前提就是上传头像的功能,而当上传完成即可预览是所有后续操作的前提.在网上巴拉了一番,然后整理了一下,拼凑了一个小demo供大家学习.本博文出自博客园,作者Red,联系邮箱 [email protected],转载请保留本文原文链接http://www.cnblogs.com/itred/p/5723864.html. 这个demo基本可以实现页面上打开页面后,点击上传头像图片的按钮,经过选择,上传成功后即可在页面指定位

C#.net4建设网页上传图片前客户端预览图片不能显示

搞了好半天,完全照教学资料设的javascrip脚本,但就是显示不了,后来才发觉,原来客户端要把该网站设为信任才能显示. 所以记录一下,以后备查. <script type="text/javascript">        function showphoto() {            alert(document.getElementById("FileUpload1").value);            //把所选图片的全路径+文件名以“f

js上传图片前进行预览

<script type="text/javascript"> //图片上传预览    IE是用了滤镜. function previewImage(file) { var MAXWIDTH = 260; var MAXHEIGHT = 180; var div = document.getElementById('preview'); if (file.files && file.files[0]) { div.style.display = "

上传图片在前台预览

前端做做图片上传功能时,经常想上传完后可以直接预览,这时候通常有两种方式,一种就是转成base64编码,然后展示出来. document.getElementById('file').onchange = function(){ var reader = new FileReader(); reader.readAsDataURL(this.files[0]); reader.onload = function(e) { document.getElementById('img').src =

Spring MVC 上传图片无刷新预览

Spring Mvc 上传图片 我早期写在了 360图书馆 ,就不移过来了. 地址http://www.360doc.com/content/14/1226/11/17181183_435868225.shtml 无刷新上传 jsp页面代码.使用的是ajaxFileUpload插件. 先简单介绍一下ajaxFileUpload ,这个插件仅7KB .用起来也特别简单. 如果不是用在特别复杂的地方上应该不会出现什么bug 代码如下: HTML代码: 1 <input type="file&q

Ajax 上传图片并预览

1. 直接上最简单的 一种 ajax 异步上传图片,并预览 html: 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 5 <title>图片上传 | cookie</title> 6 </head> 7 <body