欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  后端开发

PHP拖拽上传图片到七牛云

程序员文章站 2022-04-21 09:51:52
...
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拖拽上传图片到七牛云的详细内容,更多请关注其它相关文章!