zoukankan      html  css  js  c++  java
  • 【Uploadify】远程上传图片到【七牛云存储】

    1.下载Uploadify 版本3.2.1 

    2.下载七牛SDK 解压后将 qiniu 文件夹copy到uploadify文件夹下

    3.修改uploadify.php文件

    <?php
    
    $verifyToken = md5('unique_salt' . $_POST['timestamp']);
    
    if (!empty($_FILES) && $_POST['token'] == $verifyToken) {
        $tempFile = $_FILES['Filedata']['tmp_name'];
        //生成新的文件名 
        $filename = time().mt_rand(10,99).'.'.end(explode('.', $_FILES['Filedata']['name']));
        
        $fileTypes = array('jpg','jpeg','gif','png');
        $fileParts = pathinfo($_FILES['Filedata']['name']);
    
        if (in_array($fileParts['extension'],$fileTypes)) {
            //上传图片到云端 start
            require_once("qiniu/io.php");
            require_once("qiniu/rs.php");
    
            $bucket = "abc";//空间名
            //截取原始文件后缀名
            $key1 = "Uploads/".$filename;
            $accessKey = 'X3X89F2xQlca63vmIfNtxmqPkJ9TKHNKE-XYzPjH'; //AK
            $secretKey = 'O90SCQPjeONRFb1Ka15L1GK8qndACuo0C2lehngV'; //SK
    
            Qiniu_SetKeys($accessKey, $secretKey);
            $putPolicy = new Qiniu_RS_PutPolicy($bucket);
            $upToken = $putPolicy->Token(null);
            $putExtra = new Qiniu_PutExtra();
            $putExtra->Crc32 = 1;
            //$tempFile uploadify上传的临时文件路径
            list($ret, $err) = Qiniu_PutFile($upToken, $key1, $tempFile, $putExtra);
            //上传图片到云端 end
    
            //返回文件名给前台
            echo "http://abc.qiniudn.com/".$key1; //前台使用回调函数的data参数接收
        } else {
            echo 'Invalid file type.';
        }
    }

    前台代码 上传一个文件并显示到IMG标签中

    <table style="border:none;" >
                    <tr>
                        <td><img width="100" height="100" id="timg"/></td>
                        <td width=100%>
                            <script src="__STATIC__/uploadify/jquery.uploadify.js" type="text/javascript"></script>
                            <link rel="stylesheet" type="text/css" href="__STATIC__/uploadify/uploadify.css">
                            <div id="queue"></div>
                            <input id="file_upload" name="file_upload" type="file" multiple="true">
                            <script type="text/javascript">
                            <?php $timestamp = time();?>
                            $(function() {
                                $('#file_upload').uploadify({
                                    'formData'     : {
                                        'timestamp' : '<?php echo $timestamp;?>',
                                        'token'     : '<?php echo md5('unique_salt' . $timestamp);?>'
                                    },
                                    'swf'      : '__STATIC__/uploadify/uploadify.swf',
                                    'uploader' : '__STATIC__/uploadify/uploadify.php',
                                    'onUploadSuccess' : function(file,data,response) {
                                        $("#timg").attr("src",data);
                                        $("#txtimg").val(data);
                                    }
                                });
                            });
                            </script>
                        </td>
                    </tr>
                </table>

    如图:

  • 相关阅读:
    前端面试题六
    前端面试题五
    前端面试题四
    前端面试题之三
    前端面试题分享二
    前端面试题分享一
    JS学习笔记一
    git使用学习笔记一
    常见User-Agent
    ado.net之SQLServer和Oracle (sys_cursor) 数据库链接——获取结果集方式对比
  • 原文地址:https://www.cnblogs.com/gosky/p/3721070.html
Copyright © 2011-2022 走看看