Home > Article > Backend Development > PHP drag and drop to upload images to Qiniu Cloud

PHP drag and drop to upload images to Qiniu Cloud

*文Original: 2017-12-21 15:17:372249browse

OSS object storage is a safe, low-cost, and highly reliable cloud storage service. This article uses image uploading combined with Qiniu Cloud Storage as an example to implement the OSS storage function.

php Qiniu Cloud Installation

Use composer to install

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

phpUse Qiniu sdk

<?php
    require_once &#39;./vendor/autoload.php&#39;;
    // 引入鉴权类
    use Qiniu\Auth;
    // 引入上传类
    use Qiniu\Storage\UploadManager;
    // 需要填写你的 Access Key 和 Secret Key
    $accessKey = &#39; Access Key &#39;;
    $secretKey = &#39; Secret Key&#39;;
    // 构建鉴权对象
    $auth = new Auth($accessKey, $secretKey);
    // 要上传的空间
    $bucket = &#39;test&#39;;
    // 生成上传 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[&#39;code&#39;] = 1;
            $data[&#39;message&#39;] = &#39;success&#39;;
            $data[&#39;img_url&#39;] = &#39;http://7xplx9.com1.z0.glb.clouddn.com/&#39;.$ret[&#39;key&#39;];
            $data[&#39;markdown_img&#39;] = &#39;[站外图片上传中……(2)]&#39;; //markdown的图片加载格式
  
            exit( json_encode($data));
        }
    }

html upload Page, use

Use dropzone drag and drop upload plug-in

<!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=&#39;text/css&#39;>
    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=&#39;navbar navbar-inverse&#39;>
      <div class=&#39;navbar-inner nav-collapse&#39; 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=&#39;content&#39;>
      <div class=&#39;span12 main&#39;>
        <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);
                $(&#39;#biao1&#39;).attr(&#39;value&#39;,res.img_url);
                $(&#39;#biao1&#39;).text(res.markdown_img);
            });
            this.on("removedfile", function(file) {
                console.log("File " + file.name + "removed");
            });
        }
        
    };
</script>
</html>

The above is the detailed content of PHP drag and drop to upload images to Qiniu Cloud. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Learn PHP common sorting algorithmsNext article：Learn PHP common sorting algorithms

See more

PHP drag and drop to upload images to Qiniu Cloud

Related articles