公司出了一个需求,要求是创建一个图集文章,后台管理员上传多张图片后,前台调数据预览。因为这个项目是模仿另一个项目做的,所以功能需要跟另一个网站一样,我看了一下另一个网站,那个网站的上传图片用的是uploadify,那这就好办了,直接去官网看了下demo,全是英文,没办法,谁叫英文不好呢,最后从百度搜了一个汉化了的demo例子,注释都是中文了,好看多了。网站有一个需求是需要上传完之后在下面显示出来图片。我看了下例子,例子里面没有这个功能,还有就是uploadify上传的图片不会重命名,如果服务器上有跟上传的图片同名的图片,新上传的图片会吧服务器的图片覆盖,模仿的那个网站居然没有注意到这个问题。。。。

好了,说了也挺多了,先贴出来上传的效果图, 依次是:上传图片前,选择图片后,上传完成后   ,,,,擦居然没发现选择的图片标题。。。娘的给人家打广告了,懒得换了。

 

下面看下代码:代码一开始是php的混编写法,最后我给整合到了thinkphp里面。一会给大家说一下注意细节:

大家首先自己新建一个class类,或者也可以用thinkphp自动生成的IndexAction.class.php也可以。在IndexAction.class.php里面新建一个function 这个方法的作用就是显示页面

<?php

class IndexAction extends CommonAction
{

public function index()
{
$this->display();    //渲染的index.html页面就是显示上传的页面
}

//上传图片回调
public function uploadify(){
$photo = M('photo');
$targetFolder = './Public/tuji/'; //设置上传目录
if (!empty($_FILES)) {
$tempFile = $_FILES['Filedata']['tmp_name'];

$extend = explode("." , $_FILES['Filedata']['name']);
$va=count($extend)-1;

$path = time().mt_rand(10000,99999).".".$extend[$va];
$targetFile =$targetFolder. '/' . $path; //$_FILES['Filedata']['name'];//上传后的图片路径
// Validate the file type
$fileTypes = array('jpg','jpeg','gif','png'); //允许的文件后缀
$fileParts = pathinfo($_FILES['Filedata']['name']);

if (in_array($fileParts['extension'],$fileTypes)) {
move_uploaded_file($tempFile,iconv("UTF-8","gb2312", $targetFile));
$data['originalname'] = $_FILES['Filedata']['name'];
$data['type'] = $_GET['id'];
$data['newname'] = $path;
$photo->add($data);
echo $path;//上传成功后返回给前端的数据
} else {
echo '不支持的文件类型';
}
}
}
}
?>

?>

上传页面:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>上传图片</title>

<script src="__PUBLIC__/uploadify/jquery.min.js" type="text/javascript"></script>
<script src="__PUBLIC__/uploadify/jquery.uploadify.min.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="__PUBLIC__/uploadify/uploadify.css">

</head>

<body>

<script type="text/javascript">
var img_id_upload=new Array();//初始化数组,存储已经上传的图片名
var i=0;//初始化数组下标
$(function() {
$('#file_upload').uploadify({
'auto'     : false,//关闭自动上传
'removeTimeout' : 1,//文件队列上传完成1秒后删除
'swf'      : '__PUBLIC__/swf/uploadify.swf',
'uploader' : '__URL__/uploadify?id=<?php echo $_GET['id'];?>',
'method'   : 'post',          //方法,服务端可以用$_POST数组获取数据
'buttonText' : '选择图片',//设置按钮文本
'multi'    : true,//允许同时上传多张图片
'uploadLimit' : 10,//一次最多只允许上传10张图片
'fileTypeDesc' : 'Image Files',//只允许上传图像
'fileTypeExts' : '*.gif; *.jpg; *.png',//限制允许上传的图片后缀
'fileSizeLimit' : '2000KB',//限制上传的图片大小
'onUploadSuccess' : function(file, data, response) { //每次成功上传后执行的回调函数,从服务端返回数据到前端
$('#image').append('<div>这里是图片:<img width="100px" height="100px" src="__PUBLIC__/tuji/'+data+'"  height=80 width=80 /></div>');
img_id_upload[i]=data;
i++;
},
'onQueueComplete' : function(queueData) {             //上传队列全部完成后执行的回调函数
if(img_id_upload.length>0){
//alert('成功上传的文件有:'+encodeURIComponent(img_id_upload));
}
}
// Put your options here
});
});
</script>

<input type="file" name="file_upload" id="file_upload" />
<p><a href="javascript:$('#file_upload').uploadify('upload','*');">上传</a>
</p>
<br />
<div id="image"></div><br />

</body>

</html

代码部分贴玩了,下面我说下细节,首先我们上传这些图片在前台写没有问题,如果在后台写的吗,后台基本都有权限检测,比如我就用了thinkphp 的rbac,所有模块都继承了检测登陆的commonAction,但是上传这个组件访问的上传图片回调方法都没有带过去session值,所以过不了权限检测,上传的时候就会报 http error 302  ,貌似是这个错     这个时候如果用的是rbac 的话,就在配置项里面把不需要验证的操作写上上传的回调方法名,就ok了,还有一点是上传的html代码里有这么一句注视: //每次成功上传后执行的回调函数,从服务端返回数据到前端, 这个注释跟花括号中间隔着一个空格,原先松林下载下来的时候中间没有隔着空格,js就始终报错,调试了好久好久,最后加了个空格好了,真是没有天理啊。这个上传是松林写在现在的项目里的,但是松林最后想了一下,这样跟大家说完了,也不知道怎么回事,况且html加载的那些js文件,swf文件也没法贴出来,所以松林整理了一下,给大家发上来供大家参考。还要说下,松林加了一个功能,就是存储到数据库功能,因为以后前台还需要调取这些图片展示呢。

 

demo下载:   uploadify

 

 

 

文章均属 松林's blog 原创 转载请注明转自松林's blog

本文地址 : http://www.songlin51.com/archives/803.html