【问题标题】:Upload files from html to azure将文件从 html 上传到 azure
【发布时间】:2013-07-30 08:36:42
【问题描述】:

我目前有一个 asp 页面,它使用 asp 控件将文件上传到 azure。该控件运行服务器端代码,该代码将文件读入 Azure 本地存储,然后将文件从本地存储传输到 Blob 存储。这工作正常。但是,我想用 html 控件替换 asp 控件,以便从长远来看,我可以将页面作为 html 页面脱机运行(我意识到我必须再次调整文件上传才能使其脱机工作,但是作为第一步,我想删除所有服务器端控件)。

我找到了博文:

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/

我尝试将我的文件直接上传到 blob 存储,如这些帖子中所示,但遇到了 Gaurav 在回答我之前发布的问题时概述的问题(“从 js 将图像文件上传到 azure blob 存储”)。也就是说,这种技术只有在我的页面也保存在 blob 存储中时才有效。我的页面是天蓝色云服务的一部分,我不确定如何将保存在 blob 存储中的页面集成到我的云服务中。当我想将我的包发布到 azure 时,这将如何工作?

我尝试解决此问题的另一种方法是将我的文件从 html 上传到 azure 本地存储,然后调用 Web 服务将文件从本地存储传输到 blob 存储(就像我为 asp 解决方案所做的那样) .但是,我不知道如何在 js 中获取文件并将其传输到 azure 本地存储(我对 js 很陌生)。

所以,如果这真的不止一个问题,我深表歉意,即: 如何将保存在 blob 存储中的页面集成到云服务中? 或者如何使用 js 和 html 将文件传输到 azure 本地存储? 或者是否有另一种方法可以完全做到这一点?

如果有人能帮助我解决这些问题,我将不胜感激。

【问题讨论】:

    标签: javascript html file-upload azure azure-blob-storage


    【解决方案1】:

    如果您关心的是如何在 blob 存储中托管用于上传的 HTML 页面并将其引用到在云服务中运行的网页中,您可以简单地将其包含在网页中的 iframe 中。所以它会是这样的:

    <HTML>
    <HEAD>
    </HEAD>
    <BODY>
    .... some html for your web page ...
    <iframe src="https://yourstorageaccount.blob.core.windows.net/yourcontainer/youruploadhtml.html">
    </iframe>
    .... some more html for your web page ...
    </BODY>
    </HTML>
    

    现在您在上一篇文章中提到您正在网页的服务器端生成 SAS URL。由于您将动态创建这些 SAS URL,因此您需要将此 SAS URL 作为查询字符串传递给您的 HTML,然后在 HTML 页面加载时读取/解析该查询字符串。您可能会发现这篇博文对此很有用:http://jquery-howto.blogspot.in/2009/09/get-url-parameters-values-with-jquery.html

    【讨论】:

    • 好的,谢谢。如果一切顺利,我会尝试并标记为已回答。
    • 我现在已经尝试过了,但遇到了以下问题: 1. 我尝试将 sas url 作为查询字符串传递,但是当主页加载时它试图将其评估为查询字符串iframe 中的 html 页面,这给出了错误。 2. 我需要在上传文件的同时更新我的​​数据库。为此,我需要访问页面上其他控件的值,但我不知道如何从 iframe 中执行此操作。 3. 我想从 iframe 中访问 Web 服务,但不知道该怎么做。很抱歉一直回复您;我通常可以自己解决问题。
    • 关于你的cmets: 1.你能分享一下代码吗?另请告诉我们您遇到的错误。 2. 如果您需要执行一些数据库更新和其他操作,我认为 HTML 页面路由不适合您。我建议您使用常规的 asp.net 上传器将文件上传到 Web 服务器上(就像我们以前所做的那样,一旦上传了文件,您就将该文件写入 blob 存储)。试试这些:github.com/WindowsAzure-TrainingKit/HOL-ExploringStorage-VS2012code.msdn.microsoft.com/windowsazure/…。这应该给你足够的想法。
    【解决方案2】:

    我现在找到了解决这个问题的方法。我的上传现在工作如下:

    • 我将文件作为 DataURL 读入 FileReader

    • 我将返回的字符串切片并将每个切片发送到服务器 它存储在会话变量中的位置

    • 发送整个文件后,我调用另一个 Web 服务 将切片重新粘合在一起并将结果转换为字节数组

    • 然后将字节数组作为文件存储在 azure 的本地存储中

    • 最后,文件从本地存储转移到 blob 存储

    这可能不是最好的方法,但它似乎可以工作(在支持 html5 的浏览器中)。如果有人有改进的建议,请告诉我。我不得不玩弄 maxSliceSize 才能让它工作,我能得到的最大尺寸是 256 * 32。

    感谢:

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

    How to convert image to byte array using javascript only to store image on sql server?

    http://www.west-wind.com/weblog/posts/2009/Sep/15/Making-jQuery-calls-to-WCFASMX-with-a-ServiceProxy-Client

    代码如下(我已经删掉了一些只与我的项目相关的代码,所以希望剩下的内容有意义):

    var reader;
    var filename;
    var sContainer;
    var maxSliceSize = 256 * 32;
    var selectedFile = null;
    var sliceIds = new Array();
    var upFile;
    
    function handleFileUpload(cnt, sType) {
        var files = cnt.files; // FileList object
        selectedFile = files[0];
    
        //----------------------------CHECKS---------------------------
        //Check whether there is a file to upload
        if (files.length === 0) { return; }
    
        // Check for the various File API support.
        if (window.File && window.FileReader && window.FileList && window.Blob) {
            // Great success! All the File APIs are supported.
        } else {
            alert('The File APIs are not fully supported in this browser.');
            return;
        }
    
        //test whether this is an image file
        rFilter = /^(?:image\/bmp|image\/cis\-cod|image\/gif|image\/ief|image\/jpeg|image\/jpeg|image\/jpeg|image\/pipeg|image\/png|image\/svg\+xml|image\/tiff|image\/x\-cmu\-raster|image\/x\-cmx|image\/x\-icon|image\/x\-portable\-anymap|image\/x\-portable\-bitmap|image\/x\-portable\-graymap|image\/x\-portable\-pixmap|image\/x\-rgb|image\/x\-xbitmap|image\/x\-xpixmap|image\/x\-xwindowdump)$/i;
        if (!rFilter.test(selectedFile.type)) { alert("You must select a valid image file!"); return; }
    
        //----------------------------UPLOAD---------------------------
        //Create a name for the blob
        filename = selectedFile.name.toLowerCase();
        sContainer = "images"
    
        //Upload the file
        reader = new FileReader();
    
        reader.onloadend = function (evt) {
            if (evt.target.readyState == FileReader.DONE) { // DONE == 2
                //Initialise variables
                maxSliceSize = 256 * 32;
                upFile = evt.target.result
                sliceIds = new Array();
    
                uploadFileInSlices();
            }
        }
    
        reader.readAsDataURL(selectedFile);
    }
    
    function pad(number, length) {
        var str = '' + number;
        while (str.length < length) {
            str = '0' + str;
        }
        return str;
    }
    
    function uploadFileInSlices() {
        if (upFile != "") {
            var sliceId = pad(sliceIds.length, 6);
            console.log("slice id = " + sliceId);
            sliceIds.push(sliceId);
            //Send the first slice off to the server and remove it from the file string
            var upSlice = upFile.substring(0, maxSliceSize);
            upFile = upFile.substring(maxSliceSize);
    
            var params = {
                filename: filename,
                sliceID: sliceId,
                upSlice: upSlice
            };
            proxy.invoke("UploadImageSlice", params, uploadFileInSlices, onProxyFailure, true);
        } else {
            commitSliceList();
        }
    }
    
    function commitSliceList() {
        var jsonData = []; //declare object
        for (var i = 0; i < sliceIds.length; i++) {
            jsonData.push({ SliceName: sliceIds[i] });
        }
        console.log(jsonData);
        var params = {
            filename: filename,
            sliceList: jsonData,
            upFileType: selectedFile.type,
            sContainer: sContainer
        };
        proxy.invoke("UploadImage", params, onSuccess, onProxyFailure, true);
    }
    

    Web 服务(这些不完整,但应该提供基本概念):

    <OperationContract()>
    Public Function UploadImageSlice(ByVal blobFileName As String, ByVal sliceID As String, ByVal upSlice As String, iInspection As Integer) As Boolean
    
        HttpContext.Current.Session(blobFileName & sliceID) = upSlice
    
        Return true
    
    End Function
    
    <OperationContract()>
    Public Function UploadImage(ByVal blobFileName As String,ByVal sliceList As List(Of SliceList), upFileType As String, ByVal sContainer As String) As Boolean
    
        'Find the root path for local storage
        Dim sRoot As String = ""
        Dim myReportsStorage As LocalResource = RoleEnvironment.GetLocalResource("myReports")
        sRoot = myReportsStorage.RootPath
    
        'Check whether the file already exists in local storage
        If My.Computer.FileSystem.FileExists(sRoot & blobFileName) Then
            My.Computer.FileSystem.DeleteFile(sRoot & blobFileName)
        End If
    
        ‘GlueUploadSlices pulls strings out of session variables and sticks them together
        Dim upFile As String = GlueUploadSlices(blobFileName, sliceList)
        Dim upFileByte As [Byte]() = New [Byte](upFile.Length - 1) {}
        'FixBase64ForImage extracts the appropriate string from upFile
        upFileByte = Convert.FromBase64String(FixBase64ForImage(upFile))
    
        Using fs As FileStream = File.OpenWrite(sRoot & blobFileName)
            fs.Write(upFileByte, 0, upFileByte.Length)
            fs.Close()
        End Using
    
        'Save file to local storage
        StoreBlob(sContainer, sRoot, blobFileName)
    
        Return true
    
    End Function
    

    【讨论】:

      猜你喜欢
      • 2015-08-27
      • 2017-01-04
      • 1970-01-01
      • 2021-05-14
      • 2017-03-14
      • 2021-06-07
      • 2020-10-29
      • 2021-03-07
      • 1970-01-01
      相关资源
      最近更新 更多