首先新建看控制器部分
IndexController
<?php
namespace Backend\Controller;
use Think\Controller;
class IndexController extends Controller {
publicfunction index(){
$imgList = M('Img')->query('select ImgUrl,ImgNamefrom img where deleted = 0');
$this->assign('imgList',$imgList);
$this->display();//$upload->upload('./upload/images/')
}
Publicfunction ajaxImgUpload(){
$imageSizeArray =array('96,60','265,165','400,248','880,545','240,220');//裁剪规格
$upload = new\Think\Upload($this->getimagetype());#实例化上传类
$fileName = rand(1111, 9999) . time();
$upload->saveName = md5($fileName);
$path =$this->_addFilePath($upload->saveName);
$upload->rootPath = './upload/images/' .$path;
$upload->subName = '';
// 上传文件
$info
=
$upload->upload();
if(!$info) {
$this->ajaxSuccess('',array('msg'=>$upload->getError(),'isError'=>true));
}else{
$image = new \Think\Image();
$imgPath =$upload->rootPath.$info['uploadFileName']['savename'];
foreach( $imageSizeArray as $sizeArray ){
if( !is_array( $sizeArray ) ){
$sizeArray = explode(',', $sizeArray);
}
$saveName = substr($info['uploadFileName']['savename'], 0,32) . '_'. $sizeArray[0] . '_' . $sizeArray[1] .'.'.$info['uploadFileName']['ext'];
//$saveName = $file. '_' . $sizeArray[0] . '_' . $sizeArray[1].$info['uploadFileName']['savename'];
$trueSaveName =$upload->rootPath.$saveName;
//$this->resizeimage( $file, $sizeArray[0],$sizeArray[1], $trueSaveName );
$image->open($imgPath);
$image->thumb($sizeArray[0], $sizeArray[1],\Think\Image::IMAGE_THUMB_FIXED)->save($trueSaveName);
$imageinfo = getimagesize($trueSaveName);
if($imageinfo['0'] >= 720 * 3&& $imageinfo['1']>= 720 * 3){
$swname = 'watermark720.png';
}else if($imageinfo['0'] >= 480 * 3&& $imageinfo['1']>= 480 * 3){
$swname = 'watermark480.png';
}else if($imageinfo['0'] >= 240 * 3&&
$imageinfo['1'] >= 240 * 3){
$swname = 'watermark240.png';
}else{
$swname = 'watermark120.png';
}
$waterPath = 'default/images/'.$swname;//水印地址
$image->open($trueSaveName)->water($waterPath,\Think\Image::IMAGE_WATER_CENTER,50)->save($trueSaveName);
}
$image->open($trueSaveName)->water($waterPath,\Think\Image::IMAGE_WATER_CENTER,50)->save($imgPath);
$this->ajaxSuccess('',array('msg'=>'图片上传成功','isError'=>false,'uploadInfo'=>$info));
}
}
privatefunction _addFilePath($fineName)
{
$v1 = substr($fineName, 0, 2);
$v2 = substr($fineName, 2, 2);
$file_path = $v1 . '/' . $v2 . '/';
$base_dir = './upload/images/';
if (!is_dir($base_dir . $v1)) {
mkdir($base_dir . $v1, 0775, true);
}
if (!is_dir($base_dir . $v1 . C('S') . $v2)) {
mkdir($base_dir . $v1 . '/' . $v2, 0775, true);
}
return $file_path;
}
publicfunction getimagetype(){
return array(
'maxSize' => 3145728,
'exts' =>array('jpg', 'gif', 'png', 'jpeg'),
'autoSub' =>true,
);
}
public functionaddImgInfo(){
$info = I('param.info');
$Img_url
=substr($info['uploadFileName']['savename'],0,2).'/'.substr($info['uploadFileName']['savename'],2,2).'/';
$Img_name = $info['uploadFileName']['savename'];
$dataArr = array(
'ImgName'=>$info['uploadFileName']['savename'],
'ImgUrl' =>$Img_url,
);
M("img")->data($dataArr)->add();
if($result !==false){
$this->ajaxSuccess('',array('msg'=>'添加图片成功','isError'=>false,'ImgUrl'=>$Img_url,'ImgName'=>$Img_name));
}else{
$this->_ajaxFailure('',array('msg'=>'添加图片失败','isError'=>true));
}
}
protected function_ajaxSuccess($msg = '操作成功', array $data = array())
{
$ret = array('ret' => 'OK', 'msg'=>$msg, 'data' => $data);
$this->ajaxExit($ret);
}
protectedfunction _ajaxFailure($msg = '操作失败', array $data = array())
{
$ret = array('ret' => 'ERROR','msg'
=> $msg, 'data'=> $data);
$this->ajaxExit($ret);
}
protectedfunction _ajaxExit($ret)
{
echo json_encode($ret, JSON_UNESCAPED_UNICODE);
exit();
}
}
前端html部分
index.html
<meta charset="utf-8">
<title>图片上传</title>
<scriptsrc="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
</script>
<label class="control-label"for="bike_type"> </label>
<input style="display:none" name="userfile"type="file">
<input id="newbikephotoName" name="bike_photo"value="" type="hidden">
<input id="oldbikephotoName" value=""type="hidden">
<div class="controls"style="text-align:left;">
<span id="imgArea">
<foreach name="imgList" item="vo"key="k">
<span>
<img οnclick="del(this);"src="{:C('UPLOAD_IMG_PATH')}{$vo.ImgUrl}{$vo.ImgName}"style="max-height:200px;">
</span>
</foreach>
</span>
<spanclass="help-inline"></span>
<br>
<divid="uploadphotoconfirm"></div>
<br>
<form class="avatar-form"action="/CarWashShop/ajaxUploadImg" enctype="multipart/form-data"method="post" id="subid">
<input class="avatar-input pull-left"style="margin-left:0px;width:auto;" id="uploadFileName"name="uploadFileName" οnchange="ajaxUploadImg();"type="file">
</form>
<span class="help-inline">*请上传格式为.png.jpg .jpeg 的图片</span>
</div>
<script>
functionajaxUploadImg(){
var formData = new FormData($( "#subid" )[0]);
$.ajax({
type: "POST",
data:formData,
autoSubmit: false,
url: "/Index/ajaxImgUpload",
enctype: 'multipart/form-data',
async: false,
dataType:'json',
cache: false,
contentType: false,
processData: false,
success: function (data) {
if(data.data.isError==false){
addImgInfo(data.data.uploadInfo);
}else{
alert(data.data.msg);
}
//modalAlert('文件上传',data.data.msg,'');
//window.location.href=window.location.href;
}
});
}
functionaddImgInfo(info){
$.ajax({
type: "POST",
url: "/Index/addImgInfo",
dataType:"json",
data:{
info:info,
},
success: function (data) {
//modalAlert('提示',data.data.msg,'');
var Img_name = data.data.ImgName;
var Img_url = data.data.ImgUrl;
var ImgPath = './upload/images/'+Img_url+Img_name
var String ='<span>'+'<imgid="newbikephoto" src="'+ImgPath+'" style="max-height:200px;"onlick="del('+"'"+this+"'"+');"/>'+'</span>';
$("#imgArea").append(String);
//$("tbody").find("td:last").find(".xiche_boximg").find("div:last").html();
//window.location.href = window.location.href;
}
});
}
function del(thisd){
$(thisd).parent('span').remove();
}
</script>
数据库需新建一个Img表 字段分别为ImgUrl ImgName deleted即可
水印需自己准备几张图片,分别命名watermark720.png,watermark480.png,watermark240.png,watermark120.png
IndexController
<?php
namespace Backend\Controller;
use Think\Controller;
class IndexController extends Controller {
}
前端html部分
index.html
<meta charset="utf-8">
<title>图片上传</title>
<scriptsrc="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
</script>
<label class="control-label"for="bike_type"> </label>
<div class="controls"style="text-align:left;">
<divid="uploadphotoconfirm"></div>
<br>
<script>
}
</script>
数据库需新建一个Img表 字段分别为ImgUrl
水印需自己准备几张图片,分别命名watermark720.png,watermark480.png,watermark240.png,watermark120.png