图片上传到七牛云存储空间
html页面如下
<label for="author">图片</label>
<div id="uparea">
<input type="file" id="pickfiles" >
<textarea class="form-control textarea" rows="4" name="img_url" id="img_url" placeholder="img_url"></textarea>
</div>
必要的js文件
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.staticfile.org/plupload/2.1.9/moxie.js"></script>
<script type="text/javascript" src="https://cdn.staticfile.org/plupload/2.1.9/plupload.dev.js"></script>
<script type="text/javascript" src="https://cdn.staticfile.org/qiniu-js-sdk/1.0.14-beta/qiniu.min.js"></script>
<script type="text/javascript" src="js/qiniu.js"></script>
其中qiniu.js在下面贴出
(function(w, d, u) {
var uploader;
function uploaderReady(token) {
// 引入Plupload 、qiniu.js后
uploader = Qiniu.uploader({
runtimes : 'html5,flash,html4', // 上传模式,依次退化
browse_button : 'pickfiles', // 上传选择的点选按钮,**必需**
uptoken : token, // 这里的token是AJAX得到的
// uptoken_url: '/token', //Ajax请求upToken的Url,**强烈建议设置**(服务端提供)
// uptoken: '', //若未指定uptoken_url,则必须指定 uptoken ,uptoken由其他程序生成
save_key: false, // save_key: true, // 默认 false。若在服务端生成uptoken的上传策略中指定了 `sava_key`,则开启,SDK会忽略对key的处理
domain : 'http://XXXX.com', // bucket 域名,下载资源时用到,这个可以到自己的七牛空间里找到具体url,**必需**
get_new_uptoken : false, // 设置上传文件的时候是否每次都重新获取新的token
container : 'uparea', // 上传区域DOM ID,默认是browser_button的父元素,
max_file_size : '4mb', // 最大文件体积限制
flash_swf_url : 'Moxie.swf', // 引入flash,相对路径
max_retries : 3, // 上传失败最大重试次数
dragdrop : true, // 开启可拖曳上传
drop_element : 'uparea', // 拖曳上传区域元素的ID,拖曳文件或文件夹后可触发上传
chunk_size : '4mb', // 分块上传时,每片的体积
auto_start : true, // 选择文件后自动上传,若关闭需要自己绑定事件触发上传
unique_names:false, // unique_names: true,
filters: { //对上传文件类型进行限制
mime_types : [
{ title : "Image files", extensions : "jpg,gif,png"}
],
max_file_size: "4mb",
prevent_duplicates: true
},
init : {
'FilesAdded' : function(up, files) {
plupload.each(files, function(file) {
// 文件添加进队列后,处理相关的事情
// console.log(file.name);
});
},
'BeforeUpload' : function(up, file) {
// 每个文件上传前,处理相关的事情
},
'UploadProgress' : function(up, file) {
// 每个文件上传时,处理相关的事情
},
'FileUploaded' : function(up, file, info) {
// 每个文件上传成功后,处理相关的事情
// 其中 info 是文件上传成功后,服务端返回的json,形式如
// {
// "hash": "Fh8xVqod2MQ1mocfI4S4KpRL6D98",
// "key": "gogopher.jpg"
// }
// 参考http://developer.qiniu.com/docs/v6/api/overview/up/response/simple-response.html
var domain = up.getOption('domain');
var res = JSON.parse(info);
// console.log(res);
var sourceLink = domain +'/'+ res.key; // 获取上传成功后的文件的Url
document.getElementById("img_url").value +=sourceLink+"\n";// 将url展示到标签中
},
'Error' : function(up, err, errTip) {
// 上传出错时,处理相关的事情
},
'UploadComplete' : function() {
// 队列文件处理完毕后,处理相关的事情
},
'Key' : function(up, file) {
// 若想在前端对每个文件的key进行个性化处理,可以配置该函数
// 该配置必须要在 unique_names: false , save_key: false 时才生效
//key就是上传的文件路径
var key = "";
//获取年月日时分秒
var date = new Date();
var year = date.getFullYear();
var month = date.getMonth()+1;
var day = date.getDate();
var hour = date.getHours();
var minute = date.getMinutes();
var second = date.getSeconds();
key += 'blog/' + year+'_'+month+'_'+day+'_'+hour+minute+second;
// console.log("文件路径:"+file.name);
key += file.name;
return key
}
}
});
}
// domain 为七牛空间(bucket)对应的域名,选择某个空间后可以看到
// uploader 为一个plupload对象,继承了所有plupload的方法,参考http://plupload.com/docs
$(d).ready(function() {
var upToken;
$.ajax({
cache : false,
async : false,
type : "POST",
dataType : "json",
url : "/XXX/XXXXX", // java 后台,获取upToken
success : function(data) {
console.log(data.data.upToken);
upToken = data.data.upToken;
uploaderReady(upToken);
},
error : function(XMLHttpRequest, textStatus, errorThrown) {
// alert("textStatus="+textStatus+" errorThrown="+errorThrown);
// alert("获取token失败");
}
});
});
// document.getElementById('pickfiles').onclick = function() { //可通过按钮触发
// uploader.start();
// };
})(window, document);
完成上述配置后,需写一个简单的后台类从七牛获取许可token 准备: 七牛jar包
<!-- 七牛云SDK -->
<dependency>
<groupId>com.qiniu</groupId>
<artifactId>qiniu-java-sdk</artifactId>
<version>7.2.11</version>
</dependency>
然后根据qiniu.js中的请求写后台类 需要ACCESSKEY和SECRETKEY 都可从七牛获取 代码如下
package com.zzipsun.controller;
import java.util.HashMap;
import java.util.Map;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import com.qiniu.util.Auth;
import com.zzipsun.util.JsonResult;
/**
* @author zs
*
*/
@Controller
@RequestMapping("/XXXX")
public class QiNiuController extends BaseController {
/** 基本配置-从七牛管理后台拿到,这两个后台获取
* 设置好账号的ACCESS_KEY和SECRET_KEY
*/
public String ACCESS_KEY = "GnYUvzG5I8D9LJ8K-eXXXXXXXXXXXXXXXXX";
public String SECRET_KEY = "CJJqFk-5AeJO1IVQEXXXXXXXXXXXXXXXXXX";
// 要上传的空间名--bucketname 也叫存储空间名,在七年里自己设置的
//对应要上传到七牛上 你的那个路径(自己建文件夹 注意设置公开)
public String bucketname = "XXXXXXX";
public String getUpToken() {
// 密钥配置
System.out.println("初始化上传变量");
Auth auth = Auth.create(ACCESS_KEY, SECRET_KEY);
return auth.uploadToken(bucketname);
}
//获取qiniu token
@ResponseBody
@RequestMapping(value="getToken")
public JsonResult getToken() {
// System.out.println("uptoken方法:"+name);
// 获取七牛的uptoken
String upToken=getUpToken();
Map<String, String> map = new HashMap<String, String>();
map.put("upToken", upToken);
System.out.println("token======================"+upToken);
return new JsonResult(map);
}
}
再次打开对应页面 即可获得许可
选择图片后即可上传到七牛,也可以按钮触发 效果如下,文本框会出现外链地址