HTML中:
<style>
#img_upload-queue{width:120px;float:left;} /*uploadify的上传进度条样式,前面的img_upload是根据上传按钮的ID来的*/
</style>javascript
//须要引入这3个JS文件
<script type="text/javascript" src="__PUBLIC__/js/jquery.js"></script>
<link rel="stylesheet" href="__PUBLIC__/uploadify/uploadify.css">
<script src="__PUBLIC__/uploadify/jquery.uploadify.min.js"></script>
<script>
$(function() {
$('#img_upload').uploadify({ //经过ID来调用uplodify
'swf' : '__PUBLIC__/uploadify/uploadify.swf', //必须载入uplodify.swf文件
'uploader' : "<{:U('Product/uploadify')}>", //上传提交控制器地址
'buttonText' : '缩略图上传', //上传按钮显示的文字
'onUploadSuccess' : function(file, data, response) { //上传回调
$('#img').attr('src','__ROOT__/Upload/thumb/'+ data); //将返回的地址拼接成图片路径,显示缩略图
$('#thumb').val(data); //将返回的地址加载到input中
},
//这里的formData主要是解决FF没法经过flash传session的问题,uplodify是经过flash上传的
'formData' : { //经过formData日后台传递参数,POST方式;uploadify在FF里上传的时候会丢失session,因为控制器中经过session判 断了登陆,因此致使上传失败,返回302错误,所以须要从新传递session内容过去,并在控制器从新组合session
'sid' : '<{:session_id()}>', //传递SESSIONID
'sname' : '<{:session("username")}>', //传递username
'sid' : '<{:session("uid")}>' //传递uid
}
});
});
</script>css
//HTML中插入uplodify上传控件
<td>
<div><input id="thumb" type="text" style="float:left;margin:35px 20px 0 0;" /></div>
<div style="float:left;margin:30px 20px 0 0;"><input id="img_upload" name="img_upload" type="file" multiple="true" value="" style="float:left" /></div>
<div><img id="img" src="" style="width:100px;height:100px;background:#666;" /></div>
</td>java
PHP中jquery
//公共控制器,用来验证是否登陆等
class CommonController extends Controller{
public function _initialize(){
//此处为解决Uploadify,kindeditor等flash上传在火狐下上传失败,从新设置SESSION
if ($_POST['sid']) { //接收自定义传入的内容,而后手动写入session
session_id($_POST['sid']);
session_start();
session('username',$_POST['sname']); //手动写入session的username,不然下面的判断通不过,则因为没登陆致使上传失败
session('id',$_POST['suid']);
}
if(!$_SESSION['username']){
$this->redirect('Login/index');
}
}
}session
//uplodify文件上传
public function uploadify(){
$config = array(
'maxSize' => 1000000, //上传文件的最大值
'exts' => array('jpeg','jpg','png','gif'), //容许上传的文件后缀 留空不做后缀检查
'autoSub' => true, // 启用子目录保存文件
'subName' => array('date','Ymd'), // 子目录建立方式 可使用hash date custom
'rootPath' => './Upload/thumb/', //保存根路径
'savePath' => '', //上传文件保存路径
);
$upload = new \Think\Upload($config);
$info=$upload->upload();
if($info){
echo $info['Filedata']['savepath'].$info['Filedata']['savename']; //拼接出地址直接echo返回
}else{ //若是上传失败,则输出错误信息
echo $upload->getError();
}
}ui