php拖拽上传图片到七牛云
2016-03-28 本文已影响698人
波哥
七牛：10GB永久免费存储空间,每月10GB下载流量,10万次Put请求,100万次Get请求，对于新用户来说，非常友好。
用来做博客图床很合适。
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 lang="zh-CN">
<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 class='container'>
<h1>图片上传</h1>
<div class='navbar navbar-inverse'>
<div class='navbar-inner nav-collapse' style="height: auto;">
<ul class="nav">
<li class="active"><a href="http://168fun.cn/">主页</a></li>
<li><a href="http://168fun.cn/archives/">归档</a></li>
</ul>
</div>
</div>
<div id='content' class='row-fluid'>
<div class='span12 main'>
<h2>Main Content Section</h2>
<form id="my-awesome-dropzone" action="./upload.php" class="dropzone"></form>
<div class='span6'>
<textarea class="form-control" 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>
