没有页面刷新的 Azure 上传 Blob

Question

我正在关注官方 Azure Blob 上传文档，并成功实现了 Blob 上传功能。但是，页面在上传后会刷新，我需要以一种无需刷新页面即可上传图像的方式进行设置。基本上没有回传。

这是我目前所拥有的：

       if (profile_pic_input.HasFile)
       {
                var image = Request.Files["profile_pic_input"];

                CloudStorageAccount storageAccount = CloudStorageAccount.Parse(ConfigurationManager.AppSettings["StorageConnectionString"]);
                CloudBlobClient blobStorage = storageAccount.CreateCloudBlobClient();
                CloudBlobContainer container = blobStorage.GetContainerReference("photos");
                if (container.CreateIfNotExists())
                {
                    // configure container for public access
                    var permissions = container.GetPermissions();
                    permissions.PublicAccess = BlobContainerPublicAccessType.Container;
                    container.SetPermissions(permissions);
                }


                String tempName = GeneratePictureName();
                string uniqueBlobName = string.Format("photos/image_{0}{1}", tempName, Path.GetExtension(image.FileName));
                CloudBlockBlob blob = container.GetBlockBlobReference(uniqueBlobName);



                blob.Properties.ContentType = image.ContentType;
                blob.UploadFromStream(image.InputStream);
       }

Answer 1

为避免回发，您需要使用AJAX。大多数常见的 JavaScript 框架，如 jQuery 都支持这一点。

现在开始使用 AJAX 将文件上传到 blob 存储，基本上有两种方法可以做到：

1. 从用户浏览器直接上传到 Blob 存储：如果您的用户使用支持 HTML5 的现代浏览器，那么他们可以直接将文件从本地计算机上传到 Blob 存储。请参阅此链接了解更多详情：https://msdn.microsoft.com/en-us/library/azure/hh824678.aspx。本质上，您要做的是创建一个至少具有Write 权限的Shared Access Signature，并允许从您的Web 应用程序到您的存储帐户的跨域请求(CORS)。这样，文件就会直接传输到您的存储帐户中。我还写了一篇关于您可能会觉得有用的博客文章：http://gauravmantri.com/2013/12/01/windows-azure-storage-and-cors-lets-have-some-fun/。

2. 将文件从用户浏览器上传到 Web 服务器，然后将文件传输到 Blob 存储中。如果您搜索 AJAX 和文件上传，我相信您会找到很多资源，这些资源会告诉您它是如何工作的。

我的建议是使用选项 #1，因为它更快并且不会使您的网络服务器过载。