标签:
准备材料
THINKPHP
jQuery表单插件
cropper 裁剪插件
思路: 利用THINKPHP上传文件类与图片裁剪类,前台想办法组合参数给后台 那怎么样可以异步提交文件呢 关键就是 jquery表单插件了
后台准备
前台准备
即时预览图片 (不会上传文件)
/**
*从file域获取本地图片url
*/
functiongetFileUrl(sourceId){
varurl;
if(navigator.userAgent.indexOf("MSIE")>=1){//IE
url=document.getElementById(sourceId).value;
}elseif(navigator.userAgent.indexOf("Firefox")>0){//Firefox
url=window.URL.createObjectURL(document.getElementById(sourceId).files.item(0));
}elseif(navigator.userAgent.indexOf("Chrome")>0){//Chrome
url=window.URL.createObjectURL(document.getElementById(sourceId).files.item(0));
}
returnurl;
}
/**
*将本地图片显示到浏览器上
*/
functionpreImg(sourceId,targetId){
varurl=getFileUrl(sourceId);
varimgPre=document.getElementById(targetId);
imgPre.src=url;
}
//触发事件调用
preImg(this.id,‘imgPre‘);
标签: