Question

是否可以创建一个html表单，以允许Web用户直接将文件上传到azure blob商店，而无需使用其他服务器作为中介？ S3和GAW blobstore都允许这样做但我无法找到对azure blob存储的任何支持。

Answer 1

请查看这些博客文章，直接将文件从浏览器上传到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都支持），因此您需要在blob存储中托管HTML页面，以便用户上传文件。然后你可以使用jQuery的Ajax功能。

Answer 2

现在，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上载和下载。此示例仍需要服务器组件来生成共享访问签名：这样可以避免在客户端代码中公开存储帐户密钥。

Answer 3

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

（此帖中的所有内容均来自上述原始文章）

Azure存储的JavaScript客户端库支持许多使用Blob，表，队列和文件等存储服务的Web开发方案，并与现代浏览器兼容
新的浏览器JavaScript客户端库支持最新REST API版本2016-05-31中提供的所有存储功能，因为它是使用适用于Node.js的Azure存储客户端库使用Browserify构建的。

我们强烈建议使用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>

Answer 4

我写了一篇blog帖子，其中有一个如何执行此操作的示例，code is at GitHub

它基于Gaurav Mantris post，并通过在Blob存储本身上托管JavaScript来工作。

Answer 5

您可以使用HTML5文件API，AJAX和MVC 3构建强大的文件上传控件，以便安全可靠地将大文件上传到Windows Azure blob存储，同时提供监视操作进度和操作取消。解决方案的工作原理如下：

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

在此处获取示例代码：Reliable Uploads to Windows Azure Blob Storage via an HTML5 Control

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

5 个答案: