ajax 七牛云上传图片,图片上传到七牛云存储空间

html页面如下

图片

必要的js文件

其中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包

com.qiniu qiniu-java-sdk 7.2.11

然后根据qiniu.js中的请求写后台类

需要ACCESS_KEY和SECRET_KEY 都可从七牛获取

代码如下

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(); Mapmap = new HashMap(); map.put("upToken", upToken); System.out.println("token======================"+upToken); return new JsonResult(map);

}

}

再次打开对应页面

即可获得许可

选择图片后即可上传到七牛,也可以按钮触发

效果如下,文本框会出现外链地址