关于上传文件到Azure Storage没有什么可讲的，不论我们使用哪种平台、语言，上传流程都如下图所示：

从上图我们可以了解到从客户端上传文件到Storage，是需要先将文件上传到应用服务上，然后再通过应用服务器上的后端代码将文件上传到Storage，在这里应用服务器就是起到一个代理的作用。

当然，这是最常规的做法，但是确有一个致命的弱点，那就是我们上传文件到Storage中，是要占用应用服务器的计算、网络、IO等资源的，这对于一些对性能要求很高的应用场景是很难接受的。

那么，我们是否有解决方案？答案是肯定的，我们可以跳过应用服务器从客户端将文件直传到Storage中，那么我们如何来构建这套解决方案呢？这就是我们下面要讲的。

我们先来看下直传文件到Storage的流程图：

这里特别有几点需要注意的地方：

1、  不能使用存储账号和存储密钥来验证身份进行文件上传，因为这会在客户端暴露存储账号和存储密钥等敏感信息。

2、  Storage默认是不能跨域访问的，所以我们需要将应用服务器所在域加入到Storage的跨域规则中。

3、  通过上图，我们可以看到客户端一共发送两次http请求，第一次从应用服务器获取Shared Access Signature（具有写权限），再带着获取到的SAS将文件从客户端上传到Storage。

大致流程和思路已经讲清楚了，那么下面我们就来看看用代码是如何实现的。

Index.html

<!DOCTYPE html>

<html>

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title></title>

    <meta charset="utf-8" />

    <title>直传文件到Storage</title>

    <script src="~/Scripts/jquery-1.10.2.js"></script>

    <script src="~/Scripts/uploadfile.js"></script>

</head>

<body>

    <input type="file" id="file" name="file" />

    <div id="output">

        <strong>File properties:</strong>

        <br />

        <p>

            Name: <span id="fileName"></span>

        </p>

        <p>

            File size: <span id="fileSize"></span>bytes.

        </p>

        <p>

            File type: <span id="fileType"></span>

        </p>

        <p>

            <input type="button" value="Upload File" id="uploadFile" />

        </p>

    </div>

</body>

</html>

updatefile.js

(function ($) {

    var reader = null,

        requestUri = null,

        selectedFile = null,

        blobName = null;

    function sendAjax(url, dataToSend, beforeSendFunction, successFunction) {

        $.ajax({

            url: url,

            type: "PUT",

            data: dataToSend,

            processData: false,

            beforeSend: beforeSendFunction,

            tryCount: 0,

            success: successFunction,

        });

    }

    function readerOnLoadEnd(evt) {

        if (evt.target.readyState === FileReader.DONE) {

            var uri = requestUri,

                requestData = new Uint8Array(evt.target.result);

            sendAjax(uri, requestData,

                function (xhr) {

                    xhr.setRequestHeader("x-ms-blob-type", "BlockBlob");

                    xhr.setRequestHeader("x-ms-blob-content-type", getContentType(blobName));

                }, function (data, status) {

                    alert("upload success.");

                });

        }

    };

    function handleFileSelect(e) {

        selectedFile = e.target.files[0];

        blobName = selectedFile.name;

        var fileSize = selectedFile.size;

        $('#output').show();

        $('#fileName').text(blobName);

        $('#fileSize').text(fileSize);

        $('#fileType').text(selectedFile.type);

        $.get('{获取Blob SAS的接口地址}', { 'blobName': blobName }, function (data) {

            console.log(data);

            requestUri = data;

        });

    }

    function startUpload() {

        $("#uploadFile").prop('disabled', true);

        $("#file").prop('disabled', true);

        var slice = selectedFile.slice(0, selectedFile.size);

        reader.readAsArrayBuffer(slice);

    }

    function getContentType(blobName) {

        var ext = blobName.substr(blobName.lastIndexOf('.'));

        var contentType = 'application/octet-stream';

        switch (ext) {

            case ".txt":

                contentType = "text/plain";

                break;

            case ".png":

                contentType = "image/png";

                break;

            case ".zip":

                contentType = "application/zip";

                break;

            case ".pptx":

                contentType = "application/vnd.ms-powerpoint";

                break;

            case ".docx":

                contentType = "application/msword";

                break;

            case ".pdf":

                contentType = "application/pdf";

                break;

            case ".jpg":

            case ".jpeg":

                contentType = "image/jpeg";

                break;

            case ".html":

                contentType = "text/html";

                break;

            case ".js":

                contentType = "application/x-javascript";

                break;

            case ".css":

                contentType = "text/css";

                break;

            case ".gif":

                contentType = "image/gif";

                break;

            case ".ico":

                contentType = "image/x-icon";

                break;

            case ".mp4":

                contentType = "video/mpeg4";

                break;

            case ".mp3":

                contentType = "audio/mp3";

                break;

            default:

                break;

        }

        return contentType;

    }

    $(function () {

        $('#output').hide();

        if (window.File && window.FileReader && window.FileList && window.Blob) {

            reader = new FileReader();

            reader.onloadend = readerOnLoadEnd;

        } else {

            alert('The File APIs are not fully supported in this browser.');

            $('#file').prop('disabled', true);

            return;

        }

        $('#file').bind('change', handleFileSelect);

        //上传文件

        $('#uploadFile').bind('click', startUpload);

    });

}(jQuery))

后端提供的Shared Access Signature接口代码

private string _StorageConnectionString = ConfigurationManager.AppSettings["StorageConnectionString"];

private string _AccountName = ConfigurationManager.AppSettings["AccountName"];

private string _AccountKey = ConfigurationManager.AppSettings["AccountKey"];

private string _ContainerName = ConfigurationManager.AppSettings["ContainerName"];

[HttpGet]

public string GetRequestStorageUri(string blobName)

{

    if (string.IsNullOrEmpty(blobName))

    {

          throw new ArgumentNullException();

     }

    if (string.IsNullOrEmpty(_ContainerName)) {

          throw new NullReferenceException("container is null or empty");

     }

CloudBlockBlob blockBlob = GetCloudBlockBlob(_ContainerName, blobName);

    string sas = GetBlobSharedAccessSignature(blockBlob);

    string requestUri = string.Format("https://{0}.blob.core.chinacloudapi.cn/{1}/{2}{3}", _AccountName, _ContainerName, blobName, sas);

    return requestUri;

}

private CloudBlockBlob GetCloudBlockBlob(string containerName,string blobName)

{

    if (string.IsNullOrEmpty(containerName) || string.IsNullOrEmpty(blobName))

    {

        throw new ArgumentNullException();

     }

     if (string.IsNullOrEmpty(_StorageConnectionString))

     {

         throw new NullReferenceException("storage connection string is null or empty");

       }

        CloudStorageAccount account = CloudStorageAccount.Parse(_StorageConnectionString);

        CloudBlobClient blobClient = account.CreateCloudBlobClient();

        ServiceProperties serviceProperties = blobClient.GetServiceProperties();

        serviceProperties.Cors.CorsRules.Clear();

        serviceProperties.Cors.CorsRules.Add(new CorsRule

        {

            AllowedOrigins = new List<string> { "{应用服务器所在域}" },

            AllowedMethods = CorsHttpMethods.Get| CorsHttpMethods.Put| CorsHttpMethods.Post| CorsHttpMethods.Delete,

            AllowedHeaders = new List<string> { "x-ms-*", "content-type", "accept" },

            MaxAgeInSeconds =  *  *

        });

        blobClient.SetServiceProperties(serviceProperties);

        CloudBlobContainer container = blobClient.GetContainerReference(containerName);

        container.CreateIfNotExists();

        CloudBlockBlob blockBlob = container.GetBlockBlobReference(blobName);

        return blockBlob;

}

private string GetBlobSharedAccessSignature(CloudBlob blob) {

    if (blob == null)

    {

        throw new ArgumentNullException("blob is null");

     }

     return blob.GetSharedAccessSignature(new SharedAccessBlobPolicy {

         Permissions = SharedAccessBlobPermissions.Add| SharedAccessBlobPermissions.Create| SharedAccessBlobPermissions.Delete| SharedAccessBlobPermissions.List| SharedAccessBlobPermissions.Read| SharedAccessBlobPermissions.Write,

         SharedAccessStartTime = DateTime.UtcNow,

         SharedAccessExpiryTime = DateTime.UtcNow.AddMinutes()

     });

}

从客户端浏览器直传文件到Storage的更多相关文章

  1. 直传文件到Azure Storage的Blob服务中

    (此文章同时发表在本人微信公众号“dotNET每日精华文章”,欢迎右边二维码来关注.) 题记:为了庆祝获得微信公众号赞赏功能,忙里抽闲分享一下最近工作的一点心得:如何直接从浏览器中上传文件到Azure ...

  2. HTML5+flash打造兼容各浏览器的文件上传方案

    上一篇文章介绍了HTML5版的文件上传插件,相比flash,采用HTML5的新技术无疑可以提升程序的加载速度.但是在目前的情况看来,HTML5的特性支持度不高,插件的可用性范围确实比较窄.例如,我在插 ...

  3. asp.net 客户端上传文件全路径获取方法

    asp.net  获取客户端上传文件全路径方法: eg:F:\test\1.doc 基于浏览器安全问题,浏览器将屏蔽获取客户端文件全路径的方法,只能获取到文件的文件名,如果需要获取全路径则需要另想其他 ...

  4. asp.net 浏览器下载文件的四种方式

    // 方法一:TransmitFile实现下载 protected void Button1_Click(object sender, EventArgs e) { Response.ContentT ...

  5. 页面加载异常 清除浏览器静态文件 js css 缓存 js动态加载js css文件,可以配置文件后辍，防止浏览器缓存

    js清除浏览器缓存的几种方法 - 兔老霸夏 - 博客园 https://www.cnblogs.com/Mr-Rocker/p/6031096.html js清除浏览器缓存的几种方法   一.CSS和 ...

  6. Axis 生成客户端client stub文件

    [转自] http://blog.csdn.net/qiao000_000/article/details/5568442 开发前,有个同事先给我们不熟悉Web Service的程序员进行了一些培训, ...

  7. 利用Beef劫持客户端浏览器

    利用Beef劫持客户端浏览器   环境: 1．Kali(使用beef生成恶意代码,IP:192.168.114.140) 2．一台web服务器(留言板存在XSS跨站脚本漏洞,IP:192.168.11 ...

  8. 使用Beef劫持客户端浏览器并进一步使用Beef+msf拿客户端shell

    环境: 1．Kali(使用beef生成恶意代码,IP:192.168.114.140) 2．一台web服务器(留言板存在XSS跨站脚本漏洞,IP:192.168.114.204) 3. 客户端(用于访 ...

  9. 利用form.submit提交表单导出文件到客户端浏览器, 提示下载!

    本来是想利用ajax提交json数据到服务端, 让服务端生成一个excel文件并提示客户端浏览器下载的. 但是搞了很久发现ajax方式是无法触发浏览器弹出文件下载的. 网上很多的方案都是说利用form ...

随机推荐

  1. 关于Asp.Net中的编程实现下载

    经常在论坛看见有人求Asp.Net中编程实现下载的代码,有些还希望能断点续传什么的.其实问题的关键在于权限.B/S和C/S不仅仅是外观上的区别而已. 下载,顾名思义是客户端要下,所以载.你硬塞給人家那 ...

  2. 解决tomcat下面部署多个项目log4j的日志输出会集中输出到一个项目中的问题

    在一次项目上线后,发现了一个奇怪的问题,经过对源码的阅读调试终于解决,具体经过是这样的: 问题描述:tomcat7下面部署多个项目,log4j的日志输出会集中输出到一个项目中,就算配置了日志文件的绝对 ...

  3. HTML5 移动开发（CSS3设计移动页面样式）

    1.如何创建CSS样式表 2.CSS3的卓越特性 3.基于设备属性改变样式的媒体查询 4.如何使用属性改变元标签创建更美观移动页面   层叠样式表是移动WEB开发中的一个重要组成部分,本次分享将学到如 ...

  4. 第8月第12天 python json.dumps danmu

    1.json.dumps return JsonResponse({ 'status': WechatMessage.POST_METHOD_REQUIRED[1], 'status_code': W ...

  5. Python 入门基础5 --元组、字典、集合

    今日目录: 一.元组 二.字典 三.集合 四.后期添加内容 一.元组 1.定义 t1 = () # 参数为for可以循环的对象(可迭代对象) 思考: 如何定义一个只有一个值的元组? ("li ...

  6. cefsharp保存文件为pdf

    var success = await browserViewModel.WebBrowser.PrintToPdfAsync(dialog.FileName, new PdfPrintSetting ...

  7. 015_sublime插件管理及所有非常有用插件

    一. <1>按照这个进行Package Control的安装 https://packagecontrol.io/installation import urllib.request,os ...

  8. thymeleaf ： EL1050E The arguments (...) for the constructor call are missing

    <a href="list.html" th:href="${#strings.replace(new.href,'{page}',1)}" >MO ...

  9. PHP中的__clone()

    1 <?php 2 class Account { 3 public $balance; 4 5 public function __construct($balance) { 6 $this- ...

  10. Cover Points

    CF#511 div2 B 现场掉分赛(翻车)...qwq 题目大意: 给定n个点的左边,你需要求出一个腰长最短的等腰直角三角形(顶点为坐标轴原点),是的所有点都在这个等腰直角三角形的内部或者边上. ...