thinkphp_图片上传裁剪功能

标签：

准备材料

1. THINKPHP

2. jQuery表单插件

3. cropper 裁剪插件

思路：  利用THINKPHP上传文件类与图片裁剪类，前台想办法组合参数给后台  那怎么样可以异步提交文件呢 关键就是 jquery表单插件了 

后台准备

thinkphp 上传类  http://www.kancloud.cn/manual/thinkphp/1876 

thinkphp  裁剪类 http://www.kancloud.cn/manual/thinkphp/1878 

前台准备

jQuery表单插件  http://malsup.com/jquery/form/#code-samples  中文文档 http://www.cnblogs.com/linzheng/archive/2010/11/17/1880288.html 

裁剪插件  http://www.jqcool.net/image-cropper.html 

即时预览图片  (不会上传文件)

/** 
* 从 file 域获取 本地图片 url 
*/ 
function getFileUrl(sourceId) { 
var url; 
if (navigator.userAgent.indexOf("MSIE")>=1) { // IE 
url = document.getElementById(sourceId).value; 
} else if(navigator.userAgent.indexOf("Firefox")>0) { // Firefox 
url = window.URL.createObjectURL(document.getElementById(sourceId).files.item(0)); 
} else if(navigator.userAgent.indexOf("Chrome")>0) { // Chrome 
url = window.URL.createObjectURL(document.getElementById(sourceId).files.item(0)); 
} 
return url; 
} 



/** 
* 将本地图片 显示到浏览器上 
*/ 
function preImg(sourceId, targetId) { 
var url = getFileUrl(sourceId); 
var imgPre = document.getElementById(targetId); 
imgPre.src = url; 
} 


//触发事件调用
 preImg(this.id,‘imgPre‘);

thinkphp_图片上传裁剪功能

标签：

原文地址：http://my.oschina.net/Majw/blog/511309