使用SAS和JavaScript前端上传Azure Bolb大文件
问题描述：
Azure Storage Rest API提供了对于大文件分块上传方法,分别使用Put Block和Put Block List实现相关功能
参考链接：
Code Sample
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>File Uploader</title>
<script src="http://code.jquery.com/jquery-1.4.1.js"></script>
<link rel="stylesheet" href="css/modern.css" />
<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);
//xhr.setRequestHeader('x-ms-blob-content-md5', "OcEHvHuHGvmhdZ5vBtxx0Q=="); //设置组合后的blob的md5值，并不会做校验
},
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>
注意事项
- MD5值计算方法
- 完整项目GitHub网址
- 该示例并未进行MD5值的校验操作，如果需要校验需要在请求头中添加Content-MD5参数，Put Block List并不提供对上传完成后完整blob的校验，只能通过x-ms-blob-content-md5设置blob的值，否则后台默认并不会自动生成MD5值
使用SAS和JavaScript前端上传Azure Bolb大文件的更多相关文章
- 20160113006 asp.net实现ftp上传代码(解决大文件上传问题)
using System;using System.Configuration;using System.Data;using System.Linq;using System.Web;using S ...
- 如何免费上传4G以上大文件至百度云网盘
百度云网盘的容量高达2048G,因而如今使用百度云网盘的用户也越来越多, 但是百度云中如果要上传超过4G的大文件,必须要升级VIP才行,但这需要收费.那么,超过4G以上的大文件我们该怎样上传到百度云呢 ...
- ASPCMS不能上传2M以上大文件修改！
\admin_aspcms\editor\upload.asp修改80行左右maxattachsize=xxxxxxxx'最大上传大小,默认是2M前提是IIS上传大小已修 其他有关IIS方面的修改: ...
- git上传超过100m大文件
1.git出错如下错误时 执行如下可解决错误: git rm --cache '大文件路径' git commit --amend -CHEAD git push 2.当必须上传大文件时.需借助git ...
- 精讲RestTemplate第6篇-文件上传下载与大文件流式下载
本文是精讲RestTemplate第6篇,前篇的blog访问地址如下: 精讲RestTemplate第1篇-在Spring或非Spring环境下如何使用 精讲RestTemplate第2篇-多种底层H ...
- 前端上传组件Plupload使用指南
我之前写过一篇文章<文件上传利器SWFUpload使用指南>,里面介绍了上传组件SWFUpload的使用方法,但现在随着html5技术的逐渐推广和普及,再去使用以flash为上传手段的SW ...
- web api 如何通过接收文件流的方式,接收客户端及前端上传的文件
服务端接收文件流代码: public async Task<HttpResponseMessage> ReceiveFileByStream() { var stream = HttpCo ...
- django-form.errors和前端上传文件
一.上传文件: 在相应的模型里面定义`FileField`或者是`ImageField`类型的字段,并且1.设置好`upload_to`参数来指定上传的路径. class User(models.Mo ...
- atitit.javascript js 上传文件的本地预览
atitit.javascript js 上传文件的本地预览 1. .URL.createObjectURL 1 1.1. 吊销所有使用 URL.createObjectURL 而创建的 URL,以 ...
随机推荐
- 关于Docker中的Images与Containers
Docker engine提供了启动Images和containers核心的技术的支持.当你运行docker run hello-world 命令时,实际上可分为三个部分: 告诉你操作系统你正在使用的 ...
- bzoj1012: [JSOI2008]最大数maxnumber [单调队列]
Description 现在请求你维护一个数列,要求提供以下两种操作:1. 查询操作.语法:Q L 功能:查询当前数列中末尾L个数中的最大的数,并输出这个数的值.限制:L不超过当前数列的长度.2. 插 ...
- HTML5的应用缓存
HTML5:提供一种应用缓存机制,使得基于web的应用程序可以离线运行.开发者可以使用 Application Cache (AppCache) 接口设定浏览器缓存的数据并使得数据离线有效. 在处 ...
- 关于前端的photoshop初探的学习笔记
写在前边 这还是高三的时候暑假的时候学习这个软件时记的笔记呢,今天又在电脑上找到了它,总觉得不应该让他尘封在我的硬盘上,于是挂了出来.温馨提示:比较乱,写给自己看的,看不下去,按ctrl+W 笔记内容 ...
- [node] node 版本更新
一. 命令 node -v sudo npm cache clean -f // 清除缓存 sudo npm install -g n // 安装Node 模块 sudo n stable // 升级 ...
- 一步一步学Vue（八）
本篇完成如下场景: 1.系统包含首页.客户信息查询.登录三个模块 2.默认进入系统首页,如果要进行用户查询,则需要进行登录授权 3.查询用户后点击列表项,则进入详情页面 基于上述场景需求描述,在客户端 ...
- ES6中的迭代器(Iterator)和生成器(Generator)
前面的话 用循环语句迭代数据时,必须要初始化一个变量来记录每一次迭代在数据集合中的位置,而在许多编程语言中,已经开始通过程序化的方式用迭代器对象返回迭代过程中集合的每一个元素 迭代器的使用可以极大地简 ...
- 练习半音阶口琴--->>修理推键所感
我想,自己现在已经是完全迷上口琴了,在最近练习的时候自己发现推键推到最后的时候,推不过去了,以为是摩擦的问题,于是刻了轨道来减少摩擦,但是效果并不是很明显,于是,自己开始起了买新口琴的心,想换个好一点 ...
- Eclipse常用快捷键大全
1.ctrl+shift+r:打开资源 这可能是所有快捷键组合中最省时间的了.这组快捷键可以让你打开你的工作区中任何一个文件,而你只需要按下文件名或mask名中的前几个字母
- 字符串--hdu--3783--ZOJ
/* Name: 字符串--hdu--3783--ZOJ Author: shen_渊 Date: 17/04/17 20:58 Description: 明天开始刷字符串的题,先来道水题 */ #i ...