• 技术文章 >后端开发 >php教程

    PHP拖拽上传图片到七牛云

    *文*文2017-12-21 15:17:37原创1124
    OSS对象存储是安全,低成本,高可靠的云存储服务,本文以图片上传结合七牛云存储为实例,来实现OSS存储功能。

    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>
    <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>
        <h1>图片上传</h1>
        <div class='navbar navbar-inverse'>
          <div class='navbar-inner nav-collapse' style="height: auto;">
            <ul>
              <li><a href="http://168fun.cn/">主页</a></li>
              <li><a href="http://168fun.cn/archives/">归档</a></li>
            </ul>
          </div>
        </div>
        <div id='content'>
          <div class='span12 main'>
            <h2>Main Content Section</h2>
          
          <form id="my-awesome-dropzone" action="./upload.php"></form>
          <div>
          <textarea 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拖拽上传图片到七牛云的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:php 上传 七牛云
    上一篇:PHP常见排序算法学习 下一篇:linux下apache2+php+ssl的安装
    PHP编程就业班

    相关文章推荐

    • HTML英文单词汇总(PHP新手收藏)• 我28了,还能不能学PHP?• CSS英文单词汇总(PHP新手收藏)• PHP英文单词汇总(PHP新手收藏)• ThinkPHP3.2 加载过程(2)

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网