七牛云存储____七牛js直接上传图片

<%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%>">My JSP 'index.jsp' starting page

但行好事,莫问前程

7141人浏览 · 2017-02-15 16:11:52

但行好事,莫问前程 · 2017-02-15 16:11:52 发布

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">

<title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">

</head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="robots" content="noindex, nofollow">
<meta name="googlebot" content="noindex, nofollow">


<script type="text/javascript" src="jsJustUpload/jquery-1.9.1.js"></script>
<script type="text/javascript" src="jsJustUpload/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css"	href="jsJustUpload/jquery-ui.css">

<title>七牛云存储 | 上传凭证</title>


<script type="text/javascript">
	//改函数要求浏览器必须要支持html5
	function jsJustUpload(f, token, key) {
		var Qiniu_UploadUrl = "http://up.qiniu.com";
		var xhr = new XMLHttpRequest();
		xhr.open('POST', Qiniu_UploadUrl, true);
		var formData= new FormData();
		if (key !== null && key !== undefined){
			formData.append('key', key);
		}
		formData.append('token', token);
		formData.append('file', f);
		xhr.onreadystatechange = function(response) {
			if (xhr.readyState == 4 && xhr.status == 200&& xhr.responseText != "") {
				var blkRet = JSON.parse(xhr.responseText);
				$("#dialog").html("复制连接直接访问_:http://oleco2u3s.bkt.clouddn.com/" + blkRet.key).dialog();
			} else if (xhr.status != 200 && xhr.responseText) {
				concole.log("服务传输异常!!");
			}
		};
		xhr.send(formData);
	}
	function test() {
		var f = $("#file")[0].files[0];
		var token =$("#token").val();
		var key = $("#key").val();
		jsJustUpload(f, token, key);
	}
</script>

</head>

<body>
	<form action="">
		<ul>
			<li>
			token:<input id="token" name="token" class="ipt" value="1o90vmY9OmRcueIeIeFBID6q2uy8peFiFBxpnM78:rdalpapK8yThJayH3FakQwqQbp8=:eyJzY29wZSI6InRlc3QiLCJkZWFkbGluZSI6MTYwNTA2NDI3MX0=">
			</li>
			<li>
				key:<input id="key" name="key"	class="ipt" value="<%=new Date().getTime()+".jpg"%>">
			</li>
			<li>
				照片:<input id="file" name="file"	class="ipt" type="file">
			</li>
			<li>
				<input id="btn_upload" type="button" value="提交" οnclick="test();">
			</li>
		</ul>
	</form>
	<div id="dialog" title="上传成功"></div>
</body>
</html>

//源码包地址

http://oleco2u3s.bkt.clouddn.com/jsupload.rar

//运行结果