七牛C#语言搭建javascript上传--包含后端请求token（前端javascript+后端c#）

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">&times;</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">&times;</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写你自己的。在七牛后台秘钥中查看
            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

时间： 2024-11-08 16:08:56

七牛C#语言搭建javascript上传--包含后端请求token（前端javascript+后端c#）的相关文章

laravel结合七牛实现base64的图片上传

确保传到后台的是纯base64字符串而不是以data开头的 //base64图片上传 public function uploadCompressImg(Request $request) { $base64 = preg_replace("/\s/",'+',$request->input('img')); $img = base64_decode($base64); $disk = \Storage::disk('qiniu'); //使用七牛云上传 $img_name =

【技术教程】教你如何用废旧电脑搭建服务器上传网站

[技术教程]教你如何用废旧电脑搭建服务器上传网站 一.教程所需要的工具 电脑一台(需要未分配的硬盘容量,我分出80G来用) U盘(centos7的启动盘,5g足够) 网线(接在路由器上,在局域网连接访问) 二.具体操作 制作启动盘: 硬盘有未分配的容量 安装linux系统(既然是当服务器,那就最小安装) 具体操作请百度,当初我刚开始安装也耗费了好多时间,其中要注意的是,系统默认启动盘是windows,而不是硬盘,当初我没注意,安装四五遍才发现问题,所以安装的时候要注意 配置网卡ip 安装宝塔(本

利用socket模拟http的混合表单上传（在一个请求中提交表单并上传多个文件）

在很多企业级应用中,我们都没法直接通过开发语言sdk包封装的http工具来模拟http复合表单(multipart/form-data),特别是在跨语言跨平台的编程过程中,其实实现方案并不复杂,只要你了解了http协议中复合表单的报文结构就很简单了: httpheader ------时间戳------ 表单参数1 ------时间戳------ 表单参数2 ------时间戳------ 文件1的描述+二进制信息 ------时间戳------ 文件2的描述+二进制信息 下面我们进一步以一段c

PHP使用七牛云存储之图片的上传、下载、303重定向教程，CI框架实例

网上关于七牛云存储的教程除了官网上的API文档,其他的资料太少了.研究了下API之后,现在已经能实现图片的上传和下载及上传之后的重定向. 首先本篇文章实现的功能如下: 1.利用表单上传功能,用户可以点击选择文件按钮,选择本地的一个文件,同时设定上传的图片的名称,点击上传按钮可以上传并存储到七牛云存储. 2.在点击上传时会检测文件的后缀名,限制为jpg和png格式存储. 3.上传成功后跳转到自己设定的一个URL,并传回文件信息,如文件名.而不是显示七牛白花花的json显示页面. 好啦,那我们开始吧

使用joomla通过CSV文件上传数据存入数据库并使用JavaScript验证码是否符合规则

1,实现效果截图 2,A.php上传CSV文件表单 2-1:html结构使用jqeury.form.min.js表单框架异步提交 1 <div class="uploadFile border_bg"> 2 <form action="" method="post" id="formToUpdate"> 3 <div class="form-group"> 4 <l

(七)利用apache组件进行文件上传下载

一.文件上传 文件上传,即服务器端得到并处理用户上传的文件,这个文件存放在request里,也就是需要对request进行处理. 1.1 编写html文件 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> </head> <body> <form action=&q

Centos 下搭建FTP上传下载服务器

首先判断你服务器上是否安装了vsftpd 安装vsftpd #yum -y install vsftpd 安装完成之后就要重启vsftpd服务 到vsftpd的主配置文件里面 把这个改为NO 默认是YES (改为NO 就是禁止匿名用户登录,不需要注释) 不可以让ftp用户跳出自己的家目录,否则太危险了,需要做限制 默认是注释掉的,把#号去掉 然后重启vsftpd 创建ftp用户 (yuanfei这个用户智能连接ftp无法登录系统,默认家目录是在var/www/html 文件夹下面) 给yuanf

学习MVC之租房网站（七）-房源管理和配图上传

在上一篇<学习MVC之租房网站(六)-用户登录和权限控制>完成了后台用户登录和权限控制功能的开发,接下来要完成的是房源的管理,用户在后台新增.编辑房源信息,供前台用户操作. 一 房源管理 1 房源列表的显示和删除比较常规,但事后也有一些需要注意的地方 a) 关于分页,因为很多地方都会用到,于是封装好以便统一使用. 为了保证输出的html文本能被正确渲染,使用了@Html.Raw()方法,分页信息使用ViewBag从Controller传递过来,虽然ViewBag是动态类型,但用来传递分页信息还

JavaScript 上传文件

1.上传base64图片 #upload.html <input type="file"> #js代码 $(function(){ //创建FileReader对象 var reader = new FileReader(); //绑定onload事件 reader.onload = function(e){//当reader执行readAsDataURL完毕,读取数据成功后,就会触发load事件 console.log(e.target.result);//target的