uploadify插件在文件上传方面还是很不错的,这不我需要往sae 的storage上上传文件,就用了它。
下面我就分享一下如何实现的吧。
我们先到官网下载最新的uploadify最新的插件包。
在页面中引用以下必须js/css文件,注意uploadify是基于Jquery的所以必须在之前引用一下Jquery包。
<link rel='stylesheet' href='../script/uploadify/uploadify.css?v=2' type='text/css' /> <script type="text/javascript" src="../script/uploadify/jquery.min.js"></script> <script type="text/javascript" src="../script/uploadify/jquery.uploadify.min.js"></script>
页面中定义上传的容器
<div id="file_upload"></div>
然后创建上传插件
$('#file_upload').uploadify({ 'onSelect' : function(file){ }, 'formData': { 'token':'<?php echo $token; ?>', //token 'userid':'<?php echo $current_user->ID; ?>', 'email':'<?php echo $current_user->user_email; ?>' }, 'removeCompleted':false, 'buttonText' : '选择文件', 'swf' : '../script/uploadify/uploadify.swf', 'uploader' : 'http://codeo.cn/wp-content/themes/xiu-new/pages/co_upload.php', 'method' : 'POST', 'fileObjName':'imgFile', 'queueID':'queue', 'fileSizeLimit':'200k', 'onUploadSuccess' : function(file, data, response) { data=eval("("+data+")"); if(data.s){ $("#"+file.id).find(".data").html("-完成"); var cancel=$('#'+file.id).find(".cancel a"); if (cancel) { cancel.attr("rel", data); cancel.click(function () { //删除文件及数据 }); } }else{ $("#"+file.id).find(".data").html("失败:"+data.m); } }, 'onCancel':function(file){ } ,'overrideEvents': ['onSelectError', 'onDialogClose'], //返回一个错误,选择文件的时候触发 'onSelectError': function (file, errorCode, errorMsg) { switch (errorCode) { case -100: alert("上传的文件数量已经超出系统限制的" + $('#file_upload').uploadify('settings', 'queueSizeLimit') + "个文件!"); break; case -110: alert("文件 [" + file.name + "] 大小超出系统限制的" + $('#file_upload').uploadify('settings', 'fileSizeLimit') + "大小!"); break; case -120: alert("文件 [" + file.name + "] 大小异常!"); break; case -130: alert("文件 [" + file.name + "] 类型不正确!"); break; } return true; }, //检测FLASH失败调用 'onFallback': function () { alert("您未安装FLASH控件,无法上传图片!请安装FLASH控件后再试。"); } });
介绍一下uploadify相关参数
- formData:可以填写要传递的参数,以供后台使用;
- uploader:后台处理文件
- overrideEvents:重写事件,以便于自定义提示
- onSelectError:错误提示重写
- onUploadSuccess:每个文件成功后执行的事件,在这里我们可以绑定uploadify的取消按钮的点击事件,实现uploadify的真删除
sae 后台是如何接收uploadify参数进行处理
<?php //允许的文件后缀 $fileTypes = array('jpg','jpeg','gif','png'); if (!empty($_FILES)) { //得到上传的临时文件流 $tempFile = $_FILES['imgFile']['tmp_name']; //得到文件原名 $fileName = $_FILES["imgFile"]["name"];//iconv("UTF-8","GB2312",$_FILES["imgFile"]["name"]); $fileName=strFilter($fileName); //扩展名 $temp_arr = explode(".", $fileName); $file_ext = array_pop($temp_arr); $file_ext = trim($file_ext); $file_ext = strtolower($file_ext); if (in_array($file_ext, $fileTypes) === false) { echo "2"; exit; } //传值 本次唯一id $tank=$_POST['token']; $userid=$_POST['userid']; $email=$_POST['email']; $file_dir=date("Y/m/d").'/'; $storage = new SaeStorage(); $domain = 'codeku'; $destFileName = $file_dir.create_guid().'_'.$fileName; $srcFileName = $tempFile; //$attr = array('encoding'=>'gzip'); $result = $storage->upload($domain,$destFileName, $srcFileName); if(!$result) { echomsg('false','文件上传失败!'); exit; } if($result){ //也可以插入数据库等操作 } echomsg('true','操作成功!'.$destFileName.$fileName); } ?>
sae 保存文件核心方法是
$result = $storage->upload($domain,$destFileName, $srcFileName);
接收uploadifyformData
post数据方式$_POST['token'];
。