Maison > Article > développement back-end > Glisser-déposer PHP pour télécharger des images sur Qiniu Cloud

Glisser-déposer PHP pour télécharger des images sur Qiniu Cloud

*文original: 2017-12-21 15:17:372245parcourir

Le stockage objet OSS est un service de stockage cloud sûr, peu coûteux et hautement fiable. Cet article utilise le téléchargement d'images combiné avec Qiniu Cloud Storage comme exemple pour implémenter la fonction de stockage OSS.

Installation php Qiniu cloud

Utilisez composer pour installer

#安装 
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;;

php utilisez 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));
        }
    }

Page de téléchargement HTML, utilisez

pour utiliser le plug-in de téléchargement par glisser-déposer 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=&#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>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Apprenez les algorithmes de tri courants PHPArticle suivant：Apprenez les algorithmes de tri courants PHP

Articles Liés

Voir plus