onuploadstart得不到值 php,Thinkphp中使用JQuery插件Uploadify

Thinkphp中使用JQuery插件Uploadify

标签(空格分隔)： JQuery

前端的html代码

var PUBLIC = '__PUBLIC__';

var uploader = '{:U("UserSetting/uploadify")}';

var ROOT = '__ROOT__';

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

设置文件浏览按钮的宽度。