直接从浏览器上传文件到Azure Blob存储？

是否可以创建一个html表单，以允许网络用户直接上传文件到azure blob存储而不使用另一台服务器作为中介？ S3和GAW blobstore都允许这个，但我无法找到任何支持azure blob存储。直接从浏览器上传文件到Azure Blob存储？

来源

2013-03-27 user1144313

您可以使用HTML5文件API，AJAX和MVC 3建立一个强大的文件上传控件安全可靠地上传大文件到Windows Azure Blob存储与规定的监控操作进度和操作取消。解决方案如下：

接受并处理用户上传文件的客户端JavaScript。
处理由JavaScript发送的文件块的服务器端代码。
调用JavaScript的客户端UI。

获取这里的示例代码：Reliable Uploads to Windows Azure Blob Storage via an HTML5 Control

来源

2013-03-27 22:32:55 AvkashChauhan

本文使用Web服务器作为中介，使用自定义JavaScript分块方法中继块天青。这可能是光滑的，但不适合这个问题。 – 2016-03-23 04:07:03

请看看这些博客文章直接从浏览器上传文件到Blob存储：

http://coderead.wordpress.com/2012/11/21/uploading-files-directly-to-blob-storage-from-the-browser/

http://gauravmantri.com/2013/02/16/uploading-large-files-in-windows-azure-blob-storage-using-shared-access-signature-html-and-javascript

的第二篇文章（由我撰写）使用HTML 5 File API，因此不适用于所有浏览器。

基本思想是为blob容器创建Shared Access Signature (SAS)。 SAS应具有Write权限。由于Windows Azure Blob存储尚不支持CORS（同时支持Amazon S3和Google），因此您需要将HTML页面托管在您希望用户上传文件的Blob存储中。然后你可以使用jQuery的Ajax功能。

来源

2013-03-28 02:46:44

更新：Azure现在[支持CORS]（http://msdn.microsoft.com/en-us/library/windowsazure/dn535601.aspx）。 – 2014-01-08 15:22:57

顺便说一句，您可能想要更新您的博客文章...如果您尝试手动设置请求的内容长度标题，浏览器将抛出错误。 – RonLugge 2015-11-07 06:39:36

并且解决了其他一些问题（使CORS很痛苦！），我发现显然你需要一个授权头文件不存在于你的示例中。 – RonLugge 2015-11-10 22:38:16

我已经写了blog后对如何做到这一点的例子中，code is at GitHub

它是基于Gaurav Mantris post和托管上的JavaScript Blob存储本身的工作原理。

来源

2013-10-16 09:37:28 Martin

现在的Windows Azure存储服务支持CORS，你可以做到这一点。你可以在这里看到公告：Windows Azure Storage Release - Introducing CORS, JSON, Minute Metrics, and More。

我有一个简单的例子，说明了这种情况在这里：http://www.contentmaster.com/azure/windows-azure-storage-cors/

的例子显示了如何上传和直接使用jQuery.ajax私人BLOB下载。这个例子还需要一个服务器组件生成共享访问签名：这避免了暴露在客户端代码的存储帐户关键。

来源

2013-12-12 12:07:30

有一个New Azure Storage JavaScript client library for browsers (Preview)。

（这个职位一切都来自于原来的文章上面）

JavaScript客户端库的Azure存储能够使用类似的Blob，表，队列和文件存储服务的许多Web开发方案，并与现代的浏览器兼容
新的JavaScript客户端库浏览器支持所有最新的REST API版本2016年5月31日提供的存储功能，因为它与使用Azure存储客户端库Node.js的

我们强烈建议使用SAS tokens对Azure存储进行身份验证，因为JavaScript客户端库将在浏览器中向用户公开身份验证令牌。强烈建议使用范围和时间有限的SAS令牌。在理想的Web应用程序中，预计后端应用程序将在用户登录时对其进行身份验证，然后向客户端提供SAS令牌以授权访问存储帐户。这消除了使用帐户密钥进行身份验证的需要。查看我们的Github存储库中的Azure Function sample，该存储库可以根据HTTP POST请求生成SAS令牌。

代码示例：

插入下面的脚本代码会在HTML代码。确保位于相同文件夹中的JavaScript文件。

<script src="azure-storage.common.js"></script/> 
<script src="azure-storage.blob.js"></script/>

让我们现在添加一些项目，以启动传输。在BODY标签内添加以下标签。请注意，按钮在单击时调用uploadBlobFromText方法。我们将在下一步中定义此方法。
```
<input type="text" id="text" name="text" value="Hello World!" /> 
<button id="upload-button" onclick="uploadBlobFromText()">Upload</button> 
```

到目前为止，我们已经包含了客户端库，并添加HTML代码向用户显示一个文本输入和一个按钮来启动传送。当用户点击上传按钮时，会调用uploadBlobFromText。现在让我们来定义：

<script> 
function uploadBlobFromText() { 
    // your account and SAS information 
    var sasKey ="...."; 
    var blobUri = "http://<accountname>.blob.core.windows.net"; 
    var blobService = AzureStorage.createBlobServiceWithSas(blobUri, sasKey).withFilter(new AzureStorage.ExponentialRetryPolicyFilter()); 
    var text = document.getElementById('text'); 
    var btn = document.getElementById("upload-button"); 
    blobService.createBlockBlobFromText('mycontainer', 'myblob', text.value, function(error, result, response){ 
     if (error) { 
      alert('Upload filed, open browser console for more detailed info.'); 
      console.log(error); 
     } else { 
      alert('Upload successfully!'); 
     } 
    }); 
} 
</script>

来源

2017-11-02 22:33:42 Thomas

直接从浏览器上传文件到Azure Blob存储？

回答

相关问题