首页 文章

将文件从html上传到azure

提问于
浏览 次
0

我目前有一个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存储中时，此技术才有效 . 我的页面是azure Cloud 服务的一部分，我不知道如何将blob存储中保存的页面集成到我的 Cloud 服务中 . 当我想将我的包发布到azure时，它将如何工作？

我试图解决这个问题的另一种方法是将我的文件从html上传到azure本地存储，然后调用Web服务将文件从本地存储转移到blob存储（就像我为asp解决方案所做的那样） . 但是，我无法弄清楚如何在js中获取文件并将其传输到azure本地存储（我对js很新） .

所以，如果这不仅仅是一个问题，请道歉：如何将blob存储中保存的页面集成到 Cloud 服务中？或者如何使用js和html将文件传输到azure本地存储？或者还有另一种完全做到这一点的方法吗？

如果有人能帮助我解决这些问题，我将非常感激 .

javascript html file-upload azure azure-storage-blobs

2 回答

  • 0

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

    我现在找到了适用于此问题的解决方案 . 我上传的内容如下：

    • 我将文件作为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
    回复于

相关问题