Javascript 上传文件到Azure存储
对一些前端工程师来讲，使用javascript上传文件到Azure存储中可能是需要掌握的技能，希望这篇博客能给到帮助。
在开始前我们需要了解以下几点：
共享访问签名（Shared Access Signature(SAS）
共享访问签名
共享访问签名，是用于提供对Windows Azure Storage中的Container，Blob，Table以及Queue在特定时间范围内进行有限权限访问的URL。通常情况下，我们访问Azure存储都是以账户名和密码的方式来实现的，通过这种方式也给使用者包括增删改在内的最大的访问权限，但是在实际情况中，我们可能希望用户只有读的权限，同时我们也不希望将账户名和密码泄露出去，共享访问签名很好的解决了这类问题。我们在使用Javascript上传时就是通过共享访问签名的URL来进行的。
Azure 存储服务的跨域资源共享 (CORS) 支持
大概在2014年3月份的时候Azure已经支持CORS，经过测试目前中国版和国际版都已经支持，我们在使用Javascript上传的时候是将资源以PUT的方式上传到类似于http://***.blob.core.chinacloudapi.cn这样域名的地方，这就涉及到CORS的问题，在默认情况下Azure存储是禁用CORS的，所以我们需要使用版本 2013-08-15 或更高版本设置适当的服务属性，并向服务属性中添加 CORS 规则，如果我们没有启用CORS规则，我们可能会得到403错误，使用Fiddler工具会得到更详细的错误信息：”CORS not enabled or no matching rule found for this request”。
通过上面的描述，我们在开始编程前，我们需要SAS URL，还需要为我们的blob配置CORS规则，这些我们可以通过Azure SDK来实现，关于这部分我就不介绍了，详细请阅读：#SAS:http://www.windowsazure.cn/zh-cn/documentation/articles/storage-dotnet-shared-access-signature-part-2/
如果我们不太了解C#，我们可以借助Azure Storage Explorer来进行配置，下面我介绍下简单的配置:
1） 得到SAS URL
打开Azure Storage Explorer点击“Security”，选择SAS失效的时间，并选择赋予相应的权限，如上图高亮标注的部分。
2） 配置CORS规则
打开Azure Storage Explorer鼠标停留在”Blob Containers”，这时会出现CORS设置按钮，点击新增CORS规则，并如上图设置，关于具体的设置信息，请阅读：https://msdn.microsoft.com/zh-cn/library/azure/dn535601.aspx?f=255&MSPPError=-2147217396，图中的设置是我测试的字段，可作为参考。
下面是具体的代码
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>File Uploader</title>
<script src="Scripts/jquery-1.10.2.min.js"></script>
<script>
var maxBlockSize = 256 * 1024;//Each file will be split in 256 KB.
var numberOfBlocks = 1;
var selectedFile = null;
var currentFilePointer = 0;
var totalBytesRemaining = 0;
var blockIds = new Array();
var blockIdPrefix = "block-";
var submitUri = null;
var bytesUploaded = 0;
$(document).ready(function () {
$("#output").hide();
$("#file").bind('change', handleFileSelect);
if (window.File && window.FileReader && window.FileList && window.Blob) {
// Great success! All the File APIs are supported.
} else {
alert('The File APIs are not fully supported in this browser.');
}
});
//Read the file and find out how many blocks we would need to split it.
function handleFileSelect(e) {
maxBlockSize = 256 * 1024;
currentFilePointer = 0;
totalBytesRemaining = 0;
var files = e.target.files;
selectedFile = files[0];
$("#output").show();
$("#fileName").text(selectedFile.name);
$("#fileSize").text(selectedFile.size);
$("#fileType").text(selectedFile.type);
var fileSize = selectedFile.size;
if (fileSize < maxBlockSize) {
maxBlockSize = fileSize;
console.log("max block size = " + maxBlockSize);
}
totalBytesRemaining = fileSize;
if (fileSize % maxBlockSize == 0) {
numberOfBlocks = fileSize / maxBlockSize;
} else {
numberOfBlocks = parseInt(fileSize / maxBlockSize, 10) + 1;
}
console.log("total blocks = " + numberOfBlocks);
var baseUrl = $("#sasUrl").val();
var indexOfQueryStart = baseUrl.indexOf("?");
submitUri = baseUrl.substring(0, indexOfQueryStart) + '/' + selectedFile.name + baseUrl.substring(indexOfQueryStart);
console.log(submitUri);
}
var reader = new FileReader();
reader.onloadend = function (evt) {
if (evt.target.readyState == FileReader.DONE) { // DONE == 2
var uri = submitUri + '&comp=block&blockid=' + blockIds[blockIds.length - 1];
var requestData = new Uint8Array(evt.target.result);
$.ajax({
url: uri,
type: "PUT",
data: requestData,
processData: false,
beforeSend: function (xhr) {
xhr.setRequestHeader('x-ms-blob-type', 'BlockBlob');
xhr.setRequestHeader('Content-Length', requestData.length);
},
success: function (data, status) {
console.log(data);
console.log(status);
bytesUploaded += requestData.length;
var percentComplete = ((parseFloat(bytesUploaded) / parseFloat(selectedFile.size)) * 100).toFixed(2);
$("#fileUploadProgress").text(percentComplete + " %");
uploadFileInBlocks();
},
error: function (xhr, desc, err) {
console.log(desc);
console.log(err);
}
});
}
};
function uploadFileInBlocks() {
if (totalBytesRemaining > 0) {
console.log("current file pointer = " + currentFilePointer + " bytes read = " + maxBlockSize);
var fileContent = selectedFile.slice(currentFilePointer, currentFilePointer + maxBlockSize);
var blockId = blockIdPrefix + pad(blockIds.length, 6);
console.log("block id = " + blockId);
blockIds.push(btoa(blockId));
reader.readAsArrayBuffer(fileContent);
currentFilePointer += maxBlockSize;
totalBytesRemaining -= maxBlockSize;
if (totalBytesRemaining < maxBlockSize) {
maxBlockSize = totalBytesRemaining;
}
} else {
commitBlockList();
}
}
function commitBlockList() {
var uri = submitUri + '&comp=blocklist';
console.log(uri);
var requestBody = '<?xml version="1.0" encoding="utf-8"?><BlockList>';
for (var i = 0; i < blockIds.length; i++) {
requestBody += '<Latest>' + blockIds[i] + '</Latest>';
}
requestBody += '</BlockList>';
console.log(requestBody);
$.ajax({
url: uri,
type: "PUT",
data: requestBody,
beforeSend: function (xhr) {
xhr.setRequestHeader('x-ms-blob-content-type', selectedFile.type);
xhr.setRequestHeader('Content-Length', requestBody.length);
},
success: function (data, status) {
console.log(data);
console.log(status);
},
error: function (xhr, desc, err) {
console.log(desc);
console.log(err);
}
});
}
function pad(number, length) {
var str = '' + number;
while (str.length < length) {
str = '0' + str;
}
return str;
}
</script>
</head>
<body>
<form>
<div style="margin-left: 20px;">
<h1>File Uploader</h1>
<p>
<strong>SAS URI</strong>:
<br />
<span class="input-control text">
<input type="text" id="sasUrl" style="width: 50%"
value="" />
</span>
</p>
<p>
<strong>File To Upload</strong>:
<br />
<span class="input-control text">
<input type="file" id="file" name="file" style="width: 50%" />
</span>
</p>
<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" onclick="uploadFileInBlocks()" />
</p>
<p>
<strong>Progress</strong>: <span id="fileUploadProgress">0.00 %</span>
</p>
</div>
</div>
<div>
</div>
</form>
</body>
</html>
代码主要是将文件切成小块，并使用Put blob操作上传相应的小块，最后使用Put blob list将上传的各个小块组成资源文件。
Javascript 上传文件到Azure存储的更多相关文章
- django 用户上传文件media的存储访问配置1
1. 首先新建文件夹media 后 在项目setting中具体配置: MEDIA_URL = '/media/' MEDIA_ROOT = os.path.join(BASE_DIR, 'media ...
- javascript 上传文件相关 （5） Blob 对象
这一系列文章都讲述的是关于使用 JavaScript 操作文件相关的知识,其中最重要的是 File 对象,而实际上 file 对象只是 blob 对象的一个更具体的版本,blob 存储着大量的二进制数 ...
- 微信小程序云开发-云存储-上传文件（图片/视频）到云存储 精简代码
说明 图片/视频这类文件是从客户端会话选择文件. 一.wxml文件添加if切换显示 <!--上传文件到云存储--> <button bindtap="chooseImg&q ...
- 利用jquery.form实现异步上传文件
实现原理 目前需要在一个页面实现多个地方调用上传控件上传文件,并且必须是异步上传.思考半天,想到通过创建动态表单包裹上传文件域,利用jquery.form实现异步提交表单,从而达到异步上传的目的,在上 ...
- RN 上传文件到以及上传文件到七牛云（初步）
本文将介绍: 如何使用原生 Javascript 上传文件 如何使用七牛云 SDK 上传文件到七牛云 在 App 中文件上传是一个非常重要的需求,但是翻遍 React Naitve 的官方文档没有发现 ...
- 使用XWAF框架（2）——上传文件
XWAF提供了上传文件的HttpFileUploader工具类,具备强大的多文件上传.文件类型过滤.文件大小限制.存储目录设置.文件名称更改等功能,简化了Web应用开发的编程工作. 它能同时解析表单参 ...
- Servlet 表单及上传文件
// 文件路径 D:\ApacheServer\web_java\HelloWorld\src\com\test\TestServletForm.java package com.test; impo ...
- app端上传文件至服务器后台，web端上传文件存储到服务器
1.android前端发送服务器请求 在spring-mvc.xml 将过滤屏蔽(如果不屏蔽 ,文件流为空) <!-- <bean id="multipartResolver&q ...
- c#上传文件并将word pdf转化成txt存储并将内容写入数据库
c#上传文件并将word pdf转化成txt存储并将内容写入数据库 using System; using System.Data; using System.Configuration; using ...
随机推荐
- 如何编写Word文档 多级编号
每次都忘 选择这个带标题的 这样可以根据标题来指定分级
- 缓存数据库redis
什么是Redis? Redis是一个TCP服务器,支持请求/响应协议. 在Redis中,请求通过以下步骤完成: 客户端向服务器发送查询,并从套接字读取,通常以阻塞的方式,用于服务器响应. 服务器处理命 ...
- 如何使用ThinkPHP5 ，自动生成目录？
具体步骤: A.在build.php中按照实际需求修改定义模块的内容: B.修改Public/index.php,在代码中加入: // 读取自动生成定义文件 $build = include '/.. ...
- C#获取访问者ip和获取本机ip地址
获取访问者ip: string userIP; // HttpRequest Request = HttpContext.Current.Request; HttpRequest Request = ...
- array_splice()函数 ,删除数组中的某个值
array_splice() 这个函数是真的皮,有好多种方法,但是最后还是在PHP官方的文档找到了合理的解释的用法 花了大概半个小时 $arr = array('a','b','c','d'); ar ...
- cocos2d-x 在vs2010下的环境配置
cocos2d-x编译完成之后生成了一堆动态库,在window下分别为.dll , .lib ,其中*lib是在编译的时候需要链接的,*.dll是在运行的时候依赖的.所以当我们创建一个cocos2d- ...
- Visual Studio + C# + Xamarin = iOS/Android/Windows Apps
Visual Studio 跨平台開發實戰 (1) -- Hello Xamarin! 前言 應用程式發展的腳步,從來沒有停過.從早期的 Windows 應用程式, 到網路時代的 web 應用程式,再 ...
- 453D Little Pony and Elements of Harmony
传送门 分析 我们可以将所有的b[i^j]直接对应到b[f(i^j)]上 于是显然可以fwt 我们对b进行t次fwt之后直接将答案与e0卷起来即可 注意由于模数不确定,我们可以将模数扩大$2^m$然后 ...
- CF547D Mike and Fish
欧拉回路,巧妙的解法. 发现每一个点$(x, y)$实际上是把横坐标和$x$和纵坐标$y$连一条线,然后代进去跑欧拉回路,这样里一条边对应了一个点,我们只要按照欧拉回路间隔染色即可. 注意到原图可能并 ...
- Spring.Web.Mvc 注入（控制器属性注入）
1.web.config配置 <?xml version="1.0" encoding="utf-8"?><!-- 有关如何配置 ASP.NE ...