标签：
很多用户反应不会自己搭建javascript的工程，因为涉及到请求服务端的token，在我的博客中包含了（javascript前端+后端java）的工程demao。
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="index.aspx.cs" Inherits="javascript.index" %>
<!DOCTYPE html>
<%--<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>--%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="en">
<head>
<meta charset="UTF-8">
<title>七牛云存储 - JavaScript SDK</title>
<link href="favicon.ico" rel="shortcut icon">
<link rel="stylesheet" href="js/bootstrap.css">
<link rel="stylesheet" href="js/main.css">
<link rel="stylesheet" href="js/highlight.css">
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/plupload.full.min.js"></script>
<script type="text/javascript" src="js/zh_CN.js"></script>
<script type="text/javascript" src="js/ui.js"></script>
<script type="text/javascript" src="js/qiniu.js"></script>
<script type="text/javascript" src="js/highlight.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</head>
<body>
<div class="container">
<div class="text-left col-md-12 wrapper">
<h1 class="text-left col-md-12 ">
七牛云存储 - JavaScript SDK
<a class="btn btn-default view_code" id="show_code">
查看初始化代码
</a>
<a class="btn btn-default view_github" href="https://github.com/qiniupd/qiniu-js-sdk" target="_blank">
<img src="http://qtestbucket.qiniudn.com/GitHub-Mark-32px.png">
View Source on Github
</a>
</h1>
<input type="hidden" id="domain" value="http://qiniu-plupload.qiniudn.com/">
<input type="hidden" id="uptoken_url" value="/uptoken">
<ul class="tip col-md-12 text-mute">
<li>
<small>
JavaScript SDK 基于 Plupload 开发，可以通过 Html5 或 Flash 等模式上传文件至七牛云存储。
</small>
</li>
<li>
<small>临时上传的空间不定时清空，请勿保存重要文件。</small>
</li>
<li>
<small>Html5模式大于4M文件采用分块上传。</small>
</li>
<li>
<small>上传图片可查看处理效果。</small>
</li>
<li>
<small>本示例限制最大上传文件100M。</small>
</li>
</ul>
</div>
<div class="body">
<div class="col-md-12">
<div id="container">
<a class="btn btn-default btn-lg " id="pickfiles" href="#" >
<i class="glyphicon glyphicon-plus"></i>
<sapn>选择文件</sapn>
</a>
</div>
</div>
<div style="display:none" id="success" class="col-md-12">
<div class="alert-success">
队列全部文件处理完毕
</div>
</div>
<div class="col-md-12 ">
<table class="table table-striped table-hover text-left" style="margin-top:40px;display:none">
<thead>
<tr>
<th class="col-md-4">Filename</th>
<th class="col-md-2">Size</th>
<th class="col-md-6">Detail</th>
</tr>
</thead>
<tbody id="fsUploadProgress">
</tbody>
</table>
</div>
</div>
<div class="modal fade body" id="myModal-code" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">查看初始化代码</h4>
</div>
<div class="modal-body">
<pre><code>
//引入Plupload 、qiniu.js后
var uploader = Qiniu.uploader({
runtimes: ‘html5,flash,html4‘, //上传模式,依次退化
browse_button: ‘pickfiles‘, //上传选择的点选按钮，**必需**
uptoken_url: ‘/token‘, //Ajax请求upToken的Url，**强烈建议设置**（服务端提供）
// uptoken : ‘<Your upload token>‘, //若未指定uptoken_url,则必须指定 uptoken ,uptoken由其他程序生成
// unique_names: true, // 默认 false，key为文件名。若开启该选项，SDK为自动生成上传成功后的key（文件名）。
// save_key: true, // 默认 false。若在服务端生成uptoken的上传策略中指定了 `sava_key`，则开启，SDK会忽略对key的处理
domain: ‘http://qiniu-plupload.qiniudn.com/‘, //bucket 域名，下载资源时用到，**必需**
container: ‘container‘, //上传区域DOM ID，默认是browser_button的父元素，
max_file_size: ‘100mb‘, //最大文件体积限制
flash_swf_url: ‘js/plupload/Moxie.swf‘, //引入flash,相对路径
max_retries: 3, //上传失败最大重试次数
dragdrop: true, //开启可拖曳上传
drop_element: ‘container‘, //拖曳上传区域元素的ID，拖曳文件或文件夹后可触发上传
chunk_size: ‘4mb‘, //分块上传时，每片的体积
auto_start: true, //选择文件后自动上传，若关闭需要自己绑定事件触发上传
init: {
‘FilesAdded‘: function(up, files) {
plupload.each(files, function(file) {
// 文件添加进队列后,处理相关的事情
});
},
‘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 = parseJSON(info);
// var sourceLink = domain + res.key; 获取上传成功后的文件的Url
},
‘Error‘: function(up, err, errTip) {
//上传出错时,处理相关的事情
},
‘UploadComplete‘: function() {
//队列文件处理完毕后,处理相关的事情
},
‘Key‘: function(up, file) {
// 若想在前端对每个文件的key进行个性化处理，可以配置该函数
// 该配置必须要在 unique_names: false , save_key: false 时才生效
var key = "";
// do something with key here
return key
}
}
});
// domain 为七牛空间（bucket)对应的域名，选择某个空间后，可通过"空间设置->基本设置->域名设置"查看获取
// uploader 为一个plupload对象，继承了所有plupload的方法，参考http://plupload.com/docs
</code></pre>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">关闭</button>
</div>
</div>
</div>
</div>
<div class="modal fade body" id="myModal-img" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="H1">图片效果查看</h4>
</div>
<div class="modal-body">
<div class="modal-body-wrapper text-center">
<a href="" target="_blank" >
<img src="" alt="" data-key="" data-h="">
</a>
</div>
<div class="modal-body-footer">
<div class="watermark">
<span>水印控制：</span>
<a href="#" data-watermark="NorthWest" class="btn btn-default">
左上角
</a>
<a href="#" data-watermark="SouthWest" class="btn btn-default">
左下角
</a>
<a href="#" data-watermark="NorthEast" class="btn btn-default">
右上角
</a>
<a href="#" data-watermark="SouthEast" class="btn btn-default disabled">
右下角
</a>
<a href="#" data-watermark="false" class="btn btn-default">
无水印
</a>
</div>
<div class="imageView2">
<span>缩略控制：</span>
<a href="#" data-imageview="large" class="btn btn-default disabled">
大缩略图
</a>
<a href="#" data-imageview="middle" class="btn btn-default">
中缩略图
</a>
<a href="#" data-imageview="small" class="btn btn-default">
小缩略图
</a>
</div>
<div class="imageMogr2">
<span>高级控制：</span>
<a href="#" data-imagemogr="left" class="btn btn-default no-disable-click" >
逆时针
</a>
<a href="#" data-imagemogr="right" class="btn btn-default no-disable-click">
顺时针
</a>
<a href="#" data-imagemogr="no-rotate" class="btn btn-default">
无旋转
</a>
</div>
<div class="text-warning">
备注：小图片水印效果不明显，建议使用大图片预览水印效果
</div>
</div>
</div>
<div class="modal-footer">
<span class="pull-left">本示例仅演示了简单的图片处理效果，了解更多请点击</span>
<a href="https://github.com/SunLn/qiniu-js-sdk" target="_blank" class="pull-left">本SDK文档</a>
<span class="pull-left">或</span>
<a href="http://developer.qiniu.com/docs/v6/api/reference/fop/image/" target="_blank" class="pull-left">七牛官方文档</a>
<button type="button" class="btn btn-primary" data-dismiss="modal">关闭</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
到此你的网站上传页面已经有了图形用户界面，但是缺少js文件。
点这里下载
现在你的网页就可以正常显示了
然后在里面按照如下代码书写：
using Newtonsoft.Json;
using Qiniu.RS;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using Qiniu.Conf;
namespace javascript.response
{
/// <summary>
/// response 的摘要说明
/// </summary>
public class token
{
public string uptoken = "";
}
public class response : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
//ACCESS_KEY，SECRET_KEY写你自己的。在七牛后台秘钥中查看
Config.ACCESS_KEY = "dL3iWMKzQMTap8Puxi5XcUgqzuKjCukc";
Config.SECRET_KEY = "fOW181hnBdkCOdM5Tpm7anPv0dwxDC";
string bucket = "liuhanlin-work";
var policy = new PutPolicy(bucket, 3600);
string upToken = policy.Token();
token token1=new token();
token1.uptoken = upToken;
Console.WriteLine(JsonConvert.SerializeObject(token1));
upToken = JsonConvert.SerializeObject(token1);
context.Response.ContentType = "text/plain";
context.Response.Write(upToken);
}
public bool IsReusable
{
get
{
return false;
}
}
}
}
将这个url设置为你刚才一般处理程序的地址。我的是将它放在response文件夹中。
Copyright (c) 2012 qiniu.com
七牛C#语言搭建javascript上传--包含后端请求token（前端javascript+后端c#）
标签：
原文地址：http://blog.csdn.net/guoer9973/article/details/44302797
