0

我目前有一个使用 asp 控件将文件上传到 azure 的 asp 页面。该控件运行服务器端代码,该代码将文件读入 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 存储中的页面集成到我的云服务中。当我想将我的包发布到天蓝色时,这将如何工作?

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

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

如果有人可以帮助我解决这些问题中的任何一个,我将不胜感激。

4

2 回答 2

1

如果您关心的是如何托管 HTML 页面以在 blob 存储中上传并在云服务内运行的网页中引用该页面,您可以简单地将其包含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

于 2013-07-30T12:34:54.000 回答
0

我现在找到了一个适用于这个问题的解决方案。我的上传现在工作如下:

  • 我将文件作为 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/

如何仅使用 javascript 将图像转换为字节数组以将图像存储在 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
于 2013-08-05T18:42:06.037 回答