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拖拽上传图片到七牛云的详细内容,更多请关注其它相关文章!