zoukankan      html  css  js  c++  java
  • sae storage 使用uploadify插件进行文件批量上传

    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);

    接收uploadifyformDatapost数据方式$_POST['token'];

  • 相关阅读:
    Leetcode 35. 搜索插入位置 二分查找
    《算法竞赛进阶指南》 第一章 Acwing 91. 最短Hamilton路径
    《算法竞赛进阶指南》 第一章 Acwing 90. 64位整数乘法
    《算法竞赛进阶指南》 第一章 Acwing 89. a^b 位运算 更新bitset版本
    挑战程序设计竞赛 2章习题 Aizu
    挑战程序设计竞赛 2章习题 poj 2718 Smallest Difference dfs
    Leetcode 33. 搜索旋转排序数组 二分
    Leetcode 30. 串联所有单词的子串
    LeetCode 22. 括号生成 DFS
    Leetcode 16. 最接近的三数之和 及后继几题
  • 原文地址:https://www.cnblogs.com/huhangfei/p/4989238.html
Copyright © 2011-2022 走看看