Thinkphp中使用JQuery插件Uploadify

Thinkphp中使用JQuery插件Uploadify

标签（空格分隔）： JQuery

前端的html代码

<link rel="stylesheet" type="text/css" href="__PUBLIC__/Uploadify/uploadify.css">

<script type="text/javascript" src='__PUBLIC__/Js/jquery-1.7.2.min.js'></script>
<script type="text/javascript"src='__PUBLIC__/Uploadify/jquery.uploadify.min.js'></script>

<script type="text/javascript">
var PUBLIC        = '__PUBLIC__';
var uploader      = '{:U("UserSetting/uploadify")}';
var ROOT          = '__ROOT__';
</script>

<div class='form'>
<form action="{:U('editFace')}" method='post'>
<div class='edit-face'>
<img src="<if condition='$user.face180'>__ROOT__/{$user.face180}
<else /> __PUBLIC__/Images/noface.gif </if>" id='faceImg'>
<p>
<input type="file" name='face' id='face'/>
</p>
<p>
<input type="hidden" name='face180' value=''/>
<input type="hidden" name='face80' value=''/>
<input type="hidden" name='face50' value=''/>
<input type="submit" value='保存修改' class='edit-sub'/>
</p>
</div>
</form>
</div>

action 当submit提交时，把三个input同时提交到表单处理函数，表单处理函数把

face180

face80

face50

三个图片路径存入数据库

###表单处理函数

public function editFace(){
$user_info = M('user_info');
$where = array('wb_user_id' => $_SESSION['uid'], );
$user_info->where($where)->save(I('post.'));
redirect(U('index'));

###Jquery函数

$('#face').uploadify({
swf : PUBLIC+'/Uploadify/uploadify.swf',
buttonImage : PUBLIC+'/Uploadify/browse-btn.png',
fileTypeDesc : 'Image File',
fileTypeExts : '*.jpeg;*.jpg;*.gif',
uploader : uploader,
onUploadSuccess : function(file, data, response){
//下面的方法是jquery的方法 javascript方法可以使用eval、json.parse
var json_data = $.parseJSON( data );
if(json_data.status){
$('#faceImg').attr('src',ROOT+json_data.path.max);
$('input[name=face180]').val(json_data.path.max);
$('input[name=face80]').val(json_data.path.mid);
$('input[name=face50]').val(json_data.path.min);
}else{
alert(json_data.msg);
}
}
})

uploader 后台处理程序的相对路径 我们在html里已经定义

uploader

常量对应的路径

onUploadSuccess：上传成功后触发，还3个参数

file：上传成功的文件对象

data：服务端返回的数据 本例中返回的是json数据，我们用

$.parseJSON()

处理后得到json对象，根据返回的status来把图片路径赋值到input隐藏域中，之后submit到表单处理函数

response：响应服务端返回的成功信息true，如返回false，则在successTimeout后呈现响应。

###uploader的处理函数

public function uploadify(){
if(!IS_POST){
$this->error('页面不存在');
}
//图像上传
$upload_file = new \Think\Upload(C('UPLOAD_IMAGE'));
$upload_info = $upload_file->upload();
if(!$upload_info){
$fialed_info =  array(
'status' => 0,
'msg'=> $upload_file->getError(),
);
echo json_encode($fialed_info);
}else{
//获取到文件的路径信息 然后使用Image类来生成缩略图
foreach ($upload_info as $file_info) {
$img_path ='./upload/'.$file_info['savepath'].$file_info['savename'];
$image = new \Think\Image();
$image -> open($img_path);
$min_thumb_path = './upload/'.$file_info['savepath'].'min'.$file_info['savename'];
$mid_thumb_path = './upload/'.$file_info['savepath'].'mid'.$file_info['savename'];
$max_thumb_path = './upload/'.$file_info['savepath'].'max'.$file_info['savename'];
$image->thumb(50, 50,\Think\Image::IMAGE_THUMB_CENTER)->save($min_thumb_path);
$image->thumb(80, 80,\Think\Image::IMAGE_THUMB_CENTER)->save($mid_thumb_path);
$image->thumb(180, 180,\Think\Image::IMAGE_THUMB_CENTER)->save($max_thumb_path);
//返回成功时的信息
$success_info = array(
'status' => 1,
'path' => array(
'min' => $min_thumb_path,
'mid' => $mid_thumb_path,
'max' => $max_thumb_path,
),
);
//将返回信息转化成json格式
echo json_encode($success_info);
}
}
}

###Upload的参数配置

'UPLOAD_IMAGE' => array(
'maxSize'  =>0,
'exts'     => array('jpg','jpeg','png','gif'),
'rootPath' => './upload/', 						//文件上传保存的根路径
'savePath' => 'face/',							//文件上传的保存路径（相对于根路径）
'autoSub'  => true,
'subName'  => array('date','Ymd'),				//子目录创建方式，采用数组或者字符串方式定义
),

uploadify的全部参数

属性名称	默认值	说明
auto	true	设置为true当选择文件后就直接上传了，为false需要点击上传按钮才上传 。
buttonClass	”	按钮样式
buttonCursor	‘hand’	鼠标指针悬停在按钮上的样子
buttonImage	null	浏览按钮的图片的路径 。
buttonText	‘SELECT FILES’	浏览按钮的文本。
checkExisting	false	文件上传重复性检查程序，检查即将上传的文件在服务器端是否已存在，存在返回1，不存在返回0
debug	false	如果设置为true则表示启用SWFUpload的调试模式
fileObjName	‘Filedata’	文件上传对象的名称，如果命名为’the_files’，PHP程序可以用$_FILES['the_files']来处理上传的文件对象。
fileSizeLimit	0	上传文件的大小限制 ，如果为整数型则表示以KB为单位的大小，如果是字符串，则可以使用(B, KB, MB, or GB)为单位，比如’2MB’；如果设置为0则表示无限制
fileTypeDesc	‘All Files’	这个属性值必须设置fileTypeExts属性后才有效，用来设置选择文件对话框中的提示文本，如设置fileTypeDesc为“请选择rar doc pdf文件”
fileTypeExts	‘.’	设置可以选择的文件的类型，格式如：’.doc;.pdf;*.rar’ 。
formData	JSON	格式上传每个文件的同时提交到服务器的额外数据，可在’onUploadStart’事件中使用’settings’方法动态设置。
height	30	设置浏览按钮的高度 ，默认值
itemTemplate	false	用于设置上传队列的HTML模版，可以使用以下标签：instanceID-Uploadify实例的 DfileID–列队中此文件的ID,或者理解为此任务的 DfileName–文件的名称 fileSize – 当前上传文件的大小插入模版标签时使用格式如：${fileName}
method	Post	提交方式Post或Get
multi	true	设置为true时可以上传多个文件。
overrideEvents		设置哪些事件可以被重写，JSON格式，如：’overrideEvents’ : ['onUploadProgress']
preventCaching	true	如果为true，则每次上传文件时自动加上一串随机字符串参数，防止URL缓存影响上传结果
progressData	‘percentage’	设置上传进度显示方式，percentage显示上传百分比，speed显示上传速度
queueID	false	设置上传队列容器DOM元素的ID，如果为false则自动生成一个队列容器。
queueSizeLimit	999	队列最多显示的任务数量，如果选择的文件数量超出此限制，将会出发onSelectError事件。注意此项并非最大文件上传数量，如果要限制最大上传文件数量，应设置uploadLimit。
removeCompleted	true	是否自动将已完成任务从队列中删除，如果设置为false则会一直保留此任务显示。
removeTimeout	3	如果设置了任务完成后自动从队列中移除，则可以规定从完成到被移除的时间间隔。
requeueErrors	false	如果设置为true，则单个任务上传失败后将返回错误，并重新加入任务队列上传。
successTimeout	30	文件上传成功后服务端应返回成功标志，此项设置返回结果的超时时间
swf	‘uploadify.swf’	uploadify.swf 文件的相对路径。
uploader	uploadify.php	后台处理程序的相对路径。
uploadLimit	999	最大上传文件数量，如果达到或超出此限制将会触发onUploadError事件。
width	120	设置文件浏览按钮的宽度。