直接從瀏覽器上傳文件到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存儲？

回答

相關問題