WebUpload
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="/static/js/webuploader/webuploader.css">
<link href="http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div id="picker">选择文件</div> <button id="startBtn">开始上传</button>
<ul id="fileList"></ul>
<script src="/static/js/jquery-1.11.3.min.js"></script>
<script src="/static/js/webuploader/webuploader.min.js"></script>
<script type="text/template" id="bar">
<div class="progress">
<div class="progress-bar" id="{{id}}" style="width: 0%;">
<span class="sr-only"></span>
</div>
</div>
</script>
<script>
$(function(){
var uploder = WebUploader.create({
swf:"/static/js/webuploader/Uploader.swf",
server:"/upload",
pick:"#picker",
fileVal:"file",
auto:true
});
//选择文件放入上传队列,调用一次
uploder.on("fileQueued",function(file){
var html = "<li id='"+file.id+"'>"+file.name+"</li>";
$("#fileList").append($(html));
});
//文件上传进度,上传过程中调用多次
uploder.on("uploadProgress",function(file,percentage){
var num = parseInt(percentage * 100);
var $bar = $("#"+file.id).find("#bar_"+file.id);
if(!$bar[0]) {
var template = $("#bar").html();
template = template.replace("{{id}}","bar_"+file.id);
$("#"+file.id).append($(template));
} else {
$bar.css("width",num+"%");
}
});
//文件上传成功
uploder.on("uploadSuccess",function(file,data){
$("#"+file.id).css("color","green");
console.log(data.state);
});
//文件上传失败
uploder.on("uploadError",function(file){
$("#"+file.id).css("color","darkred");
});
//文件上传成功或失败均调用
uploder.on("uploadComplete",function(file){
$("#"+file.id).find("#bar_"+file.id).parent().remove();
});
$("#startBtn").click(function(){
uploder.upload();
});
});
</script>
</body>
</html>
servlet
package com.kaishengit.web;
@WebServlet("/qiniu")
public class QiniuServlet extends BaseServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
String ak = "G3jWeQ4OOxUwAQJumftrS_jcAej9uBQLn1-oCoHD";
String sk = "fmiPh7SZ_UvRWRsntAihdOS67Pin9jeeNYR3aRBv";
String bucketName = "demo22";
Auth auth = Auth.create(ak,sk);
//计算上传文件的Token
StringMap map = new StringMap();
map.put("returnUrl","http://localhost:8080/qiniucallback");
String token = auth.uploadToken(bucketName,null,3600,map);
req.setAttribute("token",token);
req.getRequestDispatcher("qiniu.jsp").forward(req,resp);
}
}
WebUploader 和 七牛云 整合
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<link href="http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="/static/js/webuploader/webuploader.css">
</head>
<body>
<div id="picker">选择文件</div>
<div id="result"></div>
<script src="/static/js/jquery-1.11.3.min.js"></script>
<script src="/static/js/webuploader/webuploader.min.js"></script>
<script>
$(function(){
var upload = WebUploader.create({
swf:"/static/js/webuploader/Uploader.swf",
server:"http://up-z1.qiniu.com/",
fileVal:"file",
formData:{"token":"${token}","x:uid":"${id}"},
pick:"#picker",
auto:true
});
upload.on("uploadSuccess",function(file,data){
var img = $("#result").find("img");
if(img[0]) {
img.remove();
}
var url = "http://ohwnpkfcx.bkt.clouddn.com/" + data.key + "?imageView2/1/w/150/h/150";
$("<img>").attr("src",url).addClass("img-circle").appendTo($("#result"));
alert(data["x:uid"]);
//session {hash:"",key:"",x:id:123}
// $.post("/updateavatar",{"id":data[x:id],"key":data.key}).done().error();
});
upload.on("uploadError",function(file){
alert("上传错误");
});
});
</script>
</body>
</html>
servlet
package com.kaishengit.web;
@WebServlet("/qiniu2")
public class QiniuServlet2 extends BaseServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
String ak = "inOypU6O-rKyxyN22Z7Cq1uHMdc4YmhjE1GfJh7L";
String sk = "l342cQNqBu2GSVUmhz_2by7yBPKJ7foeDH_0tN5r";
String bucketName = "demo22";
Auth auth = Auth.create(ak,sk);
//获取Session中的对象
/* HttpSession session = req.getSession();
User user = (User) session.getAttribute("user");
int id = user.getId();*/
String token = auth.uploadToken(bucketName);
req.setAttribute("id",11223);
req.setAttribute("token",token);
req.getRequestDispatcher("uploer_qiniu.jsp").forward(req,resp);
}
}
文本编辑器
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<link href="http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="/static/js/simditor/styles/simditor.css">
</head>
<body>
<div class="container">
<form action="/send" method="post">
<textarea id="editor" name="message" autofocus></textarea>
<button class="btn btn-primary">发布</button>
</form>
</div>
<script src="/static/js/jquery-1.11.3.min.js"></script>
<script src="/static/js/simditor/scripts/module.min.js"></script>
<script src="/static/js/simditor/scripts/hotkeys.min.js"></script>
<script src="/static/js/simditor/scripts/uploader.min.js"></script>
<script src="/static/js/simditor/scripts/simditor.min.js"></script>
<script>
$(function(){
var edit = new Simditor({
textarea:$("#editor"),
placeholder:"balabala",
toolbar:true,
upload:{
url:"http://up-z1.qiniu.com/",
fileKey:"file",
params:{"token":"${token}"}
}
});
});
</script>
</body>
</html>
servlet
package com.kaishengit.web;
@WebServlet("/wysiwyg")
public class WysiwygServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
String ak = "inOypU6O-rKyxyN22Z7Cq1uHMdc4YmhjE1GfJh7L";
String sk = "l342cQNqBu2GSVUmhz_2by7yBPKJ7foeDH_0tN5r";
String bucketName = "demo22";
Auth auth = Auth.create(ak,sk);
String returnBody = "{\"success\":true,\"file_path\":\"http://ohwnpkfcx.bkt.clouddn.com/${key}\"}";
StringMap map = new StringMap();
map.put("returnBody",returnBody);
String token = auth.uploadToken(bucketName,null,3600,map);
req.setAttribute("token",token);
req.getRequestDispatcher("wysiwyg.jsp").forward(req,resp);
}
}
网友评论