七牛C#语言搭建javascript上传--包含后端请求token（前端javascript+后端c#）
2024-06-17 02:37:27
Qiniu 七牛问题解答
很多用户反应不会自己搭建javascript的工程，因为涉及到请求服务端的token，在我的博客中包含了（javascript前端+后端java）的工程demao。
问题解决方案
点击这里写在完整的工程
1，首先你要打开你的vs，建一个asp.net的web项目。然后在你的网站建一个asp的web页面，拷贝以下代码进去：
<%@ 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 herereturn 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文件。
2，拷贝js文件夹到你的工程项目中
点这里下载
现在你的网页就可以正常显示了
3，然后我们开始写后端的请求token的服务。
3.1，安装nuget，如果你已经有了就不需要安装了。
点这里查看安装方式
3.2，用nuget安装七牛sdk。右键工程选择nuget管理包。
3,3，用nuget安装json插件。
3.4，创建一个一般处理程序的页面。
然后在里面按照如下代码书写：
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写你自己的。在七牛后台秘钥中查看，bucket写你自己的在七牛新建的空间名，最好空间设置为公开，否则需要下载凭证才能访问上传的图片。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;}}}
}3.5，在你的js文件夹中的man.js中做如下修改：
将这个url设置为你刚才一般处理程序的地址。我的是将它放在response文件夹中。
3.6,设置你自己的域名（域名要去七牛后台去查找七牛默认提供你的域名，不要自己乱造，如果不知道域名是什么，可以去百度百科看下）
3.7在这里可以设置你上传时候带的前缀，默认我写的是带的，你如果想去掉就将如下箭头方向的两行代码删除，这个内容是在js的man.js中的。
结果演示
许可证
Copyright (c) 2012 qiniu.com
七牛C#语言搭建javascript上传--包含后端请求token（前端javascript+后端c#）相关推荐
- Linux七牛云批量上传api,使用七牛qshell 本地文件 批量上传到七牛云 已解决
在之前项目中有使用郭这个命令, 因此找问题 直接定位在 qshell 这个方法, 这次项目中要的需要把对应的本地图片和七牛云同步,其实为了解决微信小程序访问图片的快的原因,七牛的图片是走的CDN节点. ...
- php七牛分片上传_利用七牛的php SDK分片上传时如何处理Notify？
我的代码如下,有填写相应的Rio_PutExtra,但是进度貌似没有输出来?请问是哪里写的不对么?- function upload($bucket, $key, $file, $type=" ...
- python post上传大文件分片上传_基于七牛 用python实现分片上传 创建文件报错701...
创建文件时出错: 701 Unknown {"error":"block 0: yonginvalid context"} 抓包结果: POST /mkfile ...
- 七牛 savekey php,七牛云1：客户端直接上传文件
最近因为项目要用到七牛云,所以花了点时间整理了一下学习心得. 使用七牛云,第一步当然就是上传文件了,常见的云存储上传文件流程一般有3种: 用户==>业务服务器(你自己的服务器)==>云存储 ...
- 自学Python第二十二天- Django框架(三) AJAX、文件上传、POST 请求类型之间的转换、多APP开发、iframe、验证码、分页器、类视图、中间件、信号、日志、缓存、celery异步
Django官方文档 django 使用 AJAX django 项目中也可以使用 ajax 技术 前端 前端和其他 web 框架一样,需要注意的是,django 接收 POST 请求时,需要 csr ...
- 1小时搞定cropper.js制作头像/图片上传、裁剪、并发送至后端
1小时搞定cropper.js制作头像/图片上传.裁剪.并发送至后端 先给大家看一下最终效果. 大多数功能都是由Cropper.js封装好的,调整并制作了: 上传图片 对图片的裁剪以及调整(旋转.缩放 ...
- vue上传文件get请求，携带参数文件和其他参数
上传文件get请求,同时携带选择form表单的其他内容 例一: 接口需要传文件以及其他内容的参数,这里需要formdata封装再提交数据 <template><FormItem la ...
- php七牛分片上传_ThinkPHP实现JavaScript上传大视频到七牛云实例
1.通过Composer安装七牛云PHP SDK,官方文档 2.后端核心代码如下: use Qiniu\Auth as Auth; use Qiniu\Config; use Qiniu\Storag ...
- Nuget服务的搭建-打包-上传-删除
为了便于公共库的内部复用,我们可以架设自己的nuget服务.首先创建一个Asp.net的空项目NugetServer,其次使用nuget安装nuget.server包,如下图 添加了nuget.ser ...
- 使用七牛云和PicGo搭建图床
目录 七牛云创建存储空间和使用自己域名CDN加速 配置使用PicGO工具来上传本地Windows下的图片到七牛云存储空间 打开PicGo工具,七牛图床 我这里为大家提供最新版本的PicGo的安装包: ...
最新文章
- mysql必知必会_《MySQL必知必会》学习小结
- 【干货】产品经理解决问题七步法则
- 大商超的2020：转型、收紧、试新
- python柱状图分析代码
- cannot import caffe
- MSN on 2/16/2009
- Lucene.Net:关于索引的一些补充说明和总结
- 2020年计算机一级B押题,2021年全国计算机一级选择题真题押题.doc
- 下载的长数据怎么分开R语言_TCGA数据库单基因gsea作业之COAD-READ
- python cv release_cv2.videoCapture.release（）是什么意思？
- 一种基于红黑树和timerfd的用户态定时器
- 企业实践｜分布式系统可观测性之应用业务指标监控
- 4.10招商银行笔试编程题
- 苹果手机还原后无法激活
- U大师U盘启动盘克隆制作工具
- PADS（7）——在PADS Layout一次性添加泪滴
- 红皮书再总结——实例四
- STM32，点亮RGB灯，指南者，新手
- Metasploit学习笔记（七）——Meterpreter后渗透之传统MS08-067漏洞利用（没成功）
- SpringBoot开发网页即时聊天室/IM通信/WebSocket/即时通讯