验证中...
7.21 杭州源创会火热报名中,一起来看看移动开发如何紧跟浪潮?
语言: HTML
最后更新于 2017-07-27 18:33
UploadFileToAzure.cshtml
原始数据 复制代码
@{
ViewBag.Title = "CORS Demo";
Layout = "_Layout";
//http://fex.baidu.com/webuploader/
}
<h2>CORS Upload file into Azure</h2>
<!--Begin 使用百度WebUploader来上传-->
<div id="uploader" class="wu-example">
<!--用来存放文件信息-->
<div id="thelist" class="uploader-list"></div>
<div class="btns">
<div id="picker">选择文件</div>
<button id="btnUploadViaWebUploader" class="btn btn-default">开始上传</button>
</div>
</div>
<!--End 使用百度WebUploader来上传-->
<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="<fill in the SAS URL here>" />
</span>
</p>
<p>
<strong>Site Id</strong>:
<br />
<span class="input-control text">
<input type="text" id="siteId" style="width: 50%" />
</span>
</p>
<div id="output">
<p>
<input type="button" id="btnGetSasUrl" value="Get SAS Url" />
</p>
<p>
<input type="button" id="btnGetSiteId" value="Get Site Id" />
</p>
</div>
</div>
<div>
</div>
</form>
<script type="text/javascript">
var apiUrlWebsiteApi = '@Url.Action("Index", "WebsiteApi")';
var apiUrlWebsitePhotoApi = '@Url.Action("Index", "WebsitePhotoApi")';
var storageAccessInfo = null;
var currentFile = null;
var siteId = null;
// 优化retina, 在retina下这个值是2
var ratio = window.devicePixelRatio || 1;
// 缩略图大小
var thumbnailWidth = 100 * ratio;
var thumbnailHeight = 100 * ratio;
$(document).ready(function () {
//load storageAccessInfo from local storage
var storageAccessInfoStorageItem = window.localStorage.getItem("storageAccessInfo");
if (storageAccessInfoStorageItem != null) {
storageAccessInfo = JSON.parse(storageAccessInfoStorageItem);
$("#sasUrl").val(storageAccessInfo.Url + storageAccessInfo.Token);
}
//load site id from local storage
var siteIdItem = window.localStorage.getItem("siteId");
if (storageAccessInfoStorageItem != null) {
$("#siteId").val(siteIdItem);
siteId = siteIdItem;
}
$("#btnGetSasUrl").click(function (e) {
$.getJSON(apiUrlWebsitePhotoApi + '/StorageAccessInfo/' + siteId, function (data) {
var json = JSON.stringify(data);
storageAccessInfo = data;
$("#sasUrl").val(storageAccessInfo.Url + storageAccessInfo.Token);
//save storageAccessInfo into local storage
window.localStorage.setItem("storageAccessInfo", json);
});
});
$("#btnGetSiteId").click(function (e) {
$.getJSON(apiUrlWebsiteApi, function (data) {
alert(data.Id);
$("#siteId").val(data.Id);
window.localStorage.setItem("siteId", data.Id);
siteId = data.Id;
});
});
var uploader = WebUploader.create({
// swf文件路径
swf: 'http://cdn.staticfile.org/webuploader/0.1.5/Uploader.swf',
// 文件接收服务端。
//server: 'http://webuploader.duapp.com/server/fileupload.php',
// 选择文件的按钮。可选。
// 内部根据当前运行是创建,可能是input元素,也可能是flash.
pick: '#picker',
// 不压缩image, 默认如果是jpeg,文件上传前会压缩一把再上传!
resize: false,
method: 'PUT',
accept: {
title: 'Images',
extensions: 'gif,jpg,jpeg,bmp,png',
mimeTypes: 'image/*'
}
});
// 当有文件被添加进队列的时候
uploader.on('fileQueued', function (file) {
var $list = $('#thelist');
var $li = $(
'<div id="' + file.id + '" class="file-item thumbnail">' +
'<img>' +
'<div class="info">' + file.name + '</div>' +
'</div>'
),
$img = $li.find('img');
$list.append($li);
// 创建缩略图
uploader.makeThumb(file, function (error, src) {
if (error) {
$img.replaceWith('<span>不能预览</span>');
return;
}
$img.attr('src', src);
}, thumbnailWidth, thumbnailHeight);
});
// 文件上传过程中创建进度条实时显示。
uploader.on('uploadProgress', function (file, percentage) {
var $li = $('#' + file.id),
$percent = $li.find('.progress .progress-bar');
// 避免重复创建
if (!$percent.length) {
$percent = $('<div class="progress progress-striped active">' +
'<div class="progress-bar" role="progressbar" style="width: 0%">' +
'</div>' +
'</div>').appendTo($li).find('.progress-bar');
}
$li.find('p.state').text('上传中');
$percent.css('width', percentage * 100 + '%');
});
var dtoDict = [];
uploader.on('uploadSuccess', function (file) {
//create photo info by posting to apiUrlWebsitePhotoApi
var dto = dtoDict[file.id];
$.ajax(apiUrlWebsitePhotoApi + '/' + siteId, {
data: JSON.stringify(dto),
contentType: 'application/json',
type: 'POST',
error: function (jqXHR) {
alert(jqXHR.responseText);
},
success: function (data) {
$('#' + file.id).find('p.state').text('已上传: ' + data.Id);
}
});
});
uploader.on('uploadError', function (file) {
$('#' + file.id).find('p.state').text('上传出错');
});
uploader.on('uploadComplete', function (file) {
$('#' + file.id).find('.progress').fadeOut();
});
uploader.on("uploadStart", function (file) {
var photoId = Math.uuid().toString().toLowerCase();
var filePath = 'pictures/' + (new Date()).format("yyyy-MM-dd") + '/' + photoId + '_' + file.name;
var dto = {
Id: photoId,
GroupId: currentPhotoGroup.Id,
FileName: file.name,
FileUrl: storageAccessInfo.Url + '/' + filePath
};
dtoDict[file.id] = dto;
currentFile = file;
var submitUri = storageAccessInfo.Url + '/' + filePath + storageAccessInfo.Token;
uploader.option("server", submitUri);
});
uploader.on("uploadBeforeSend", function (object, data, headers) {
headers['x-ms-blob-type'] = 'BlockBlob';
headers['x-ms-blob-content-type'] = currentFile.type;
headers['x-ms-meta-uploadvia'] = 'CORS Demo';
headers['Content-Length'] = currentFile.length;
});
$("#btnUploadViaWebUploader").click(function (e) {
uploader.upload();
});
});
</script>

评论列表( 0 )

你可以在登录后,发表评论

11_float_left_people 11_float_left_close