美文网首页
php拖拽上传图片到七牛云

php拖拽上传图片到七牛云

作者: 波哥 | 来源:发表于2016-03-28 15:47 被阅读698次

    七牛:10GB永久免费存储空间,每月10GB下载流量,10万次Put请求,100万次Get请求,对于新用户来说,非常友好。

    用来做博客图床很合适。
    php七牛云安装
    --


    使用composer安装

    #安装 
    Composer curl -sS https://getcomposer.org/installer | php
    
    #使用 Composer 获取最新版本的 Qiniu SDK 
    php composer.phar require qiniu/php-sdk
    
    #代码中 require Composer生成的 autoloader
    <?php
        require 'vendor/autoload.php';
    
    

    php使用七牛sdk

    <?php
        require_once './vendor/autoload.php';
    
        // 引入鉴权类
        use Qiniu\Auth;
    
        // 引入上传类
        use Qiniu\Storage\UploadManager;
    
        // 需要填写你的 Access Key 和 Secret Key
        $accessKey = ' Access Key ';
        $secretKey = ' Secret Key';
    
        // 构建鉴权对象
        $auth = new Auth($accessKey, $secretKey);
    
        // 要上传的空间
        $bucket = 'test';
    
        // 生成上传 Token
        $token = $auth->uploadToken($bucket);
    
    
        // 初始化 UploadManager 对象并进行文件的上传
        $uploadMgr = new UploadManager();
    
        if($_FILES){
    
            $key = $_FILES["file"]["name"];
    
            // 调用 UploadManager 的 putFile 方法进行文件的上传
            list($ret, $err) = $uploadMgr->putFile($token, $key, $_FILES["file"]["tmp_name"]);
            if ($err !== null) {
                var_dump($err);
            } else {
                $data['code'] = 1;
                $data['message'] = 'success';
                $data['img_url'] = 'http://7xplx9.com1.z0.glb.clouddn.com/'.$ret['key'];
                $data['markdown_img'] = '[站外图片上传中……(2)]'; //markdown的图片加载格式
      
                exit( json_encode($data));
            }
            
           
        }
    
    

    html上传页面,使用


    使用dropzone拖拽上传插件

     
    <!DOCTYPE html>
    <html lang="zh-CN">
    <meta charset="utf-8">
    <head>
    <title>图片上传</title>
    <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.min.css" rel="stylesheet">
    <link rel="stylesheet" href="./static/css/dropzone.css">
    <style type='text/css'>
        body {
          background-color: #CCC;
        }
        #content {
          background-color: #FFF;
          border-radius: 5px;
        }
        #content .main {
          padding: 20px;
        }
        #content .sidebar {
          padding: 10px;
        }
        #content p {
          line-height: 30px;
        }
    </style>
    </head>
    <body>
      <div class='container'>
        <h1>图片上传</h1>
        <div class='navbar navbar-inverse'>
          <div class='navbar-inner nav-collapse' style="height: auto;">
            <ul class="nav">
              <li class="active"><a href="http://168fun.cn/">主页</a></li>
              <li><a href="http://168fun.cn/archives/">归档</a></li>
            </ul>
          </div>
        </div>
        <div id='content' class='row-fluid'>
          <div class='span12 main'>
            <h2>Main Content Section</h2>
          
    
          <form id="my-awesome-dropzone" action="./upload.php" class="dropzone"></form>
          <div class='span6'>
          <textarea class="form-control" id="biao1" rows="3" value=""></textarea>
          <input type="button" onClick="copyUrl2()" class="btn btn-default" value="点击复制代码" />
          <input type="button" onClick="openLink()" class="btn btn-default" value="打开图片" />
          </div>
          </div>
         
        </div>
      </div>
    </body>
    
    <script src="./static/js/dropzone.js"></script>
    <script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
    
    <script>
      
      function copyUrl2()
      {
        var Url2=document.getElementById("biao1");
        Url2.select(); // 选择对象
        document.execCommand("Copy"); // 执行浏览器复制命令
      }
    
      function openLink()
      {
        var url = $("#biao1").attr("value");
        window.open(url);
      }
    
      Dropzone.options.myAwesomeDropzone = { 
            url: "upload.php",
            addRemoveLinks: true,
            dictRemoveLinks: "x",
            dictCancelUpload: "x",
            maxFiles: 10,
            maxFilesize: 5,
            acceptedFiles: ".jpg,.png",
            init: function() {
                this.on("success", function(file, response, e) {
                    var res = JSON.parse(response);
                    $('#biao1').attr('value',res.img_url);
                    $('#biao1').text(res.markdown_img);
                });
                this.on("removedfile", function(file) {
                    console.log("File " + file.name + "removed");
                });
            }
            
        };
    
        
    </script>
    </html>
    
    

    相关文章

      网友评论

          本文标题:php拖拽上传图片到七牛云

          本文链接:https://www.haomeiwen.com/subject/qetdlttx.html