2013-07-30 90 views
0

我目前有一个使用asp控件将文件上传到azure的asp页面。该控件运行服务器端代码,该代码将文件读取到azure本地存储中,然后将文件从本地存储传输到blob存储。这工作正常。不过,我想用一个html控件替换asp控件,从长远来看,我可以将页面作为html页面离线运行(我意识到我将不得不再次调整文件上传以使其脱机工作,但是,作为第一步我想删除任何服务器端控件)。将文件从html上传到azure

我发现博客文章:

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存储如在这些职位,但跑进答案由拉夫概述了一个问题之前发布的问题('将图像文件上传到js的azure blob存储')。也就是说,这种技术只适用于我的页面也保存在blob存储中的情况。我的页面是蔚蓝云服务的一部分,我不确定如何将blob存储中的页面集成到我的云服务中。当我想将我的软件包发布到Azure时,这将如何工作?

我试图解决这个问题的另一种方法是将我的文件从html上传到azure本地存储,然后调用Web服务将文件从本地存储传输到blob存储(与我为asp解决方案所做的一样)。但是,我无法弄清楚如何在js中获取文件并将其转移到天蓝色的本地存储中(我对js来说很新颖)。

因此,如果这确实不只是一个问题,例如: 如何将blob存储中保存的页面集成到云服务中? 或如何使用js和html将文件传输到Azure本地存储? 或者还有另外一种方式来完成这个吗?

如果任何人都可以帮助我解决这些问题,我会非常感激。

回答

0

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

  • 我读的文件作为DataURL成的FileReader

  • 我切片返回的字符串并发送每片高达它存储在服务器 会话变量

  • 一旦整个文件已发送了我所说的另一个Web服务, 胶水切片一起回来并打开结果到字节数组

  • 字节数组,然后存储在本地存储在蔚蓝

  • 最后将文件从本地存储传输的文件到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 
+0

http://www.html5rocks.com/en/tutorials/file/dndfiles/也很有用 –

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网址提及。由于您将动态创建这些SAS网址,您需要将此网址作为查询字符串传递给您的HTML,然后在加载HTML页面时读取/解析查询字符串。你可能会发现这个博客文章有用:http://jquery-howto.blogspot.in/2009/09/get-url-parameters-values-with-jquery.html

+0

好的,谢谢。如果全部解决了,我会尝试解决并将其标记为已回答。 –

+0

我现在试过这个,并有以下问题:1.我试图将sas url作为查询字符串传递,但是当加载主页时它试图将此评估为iframe中html页面的查询字符串,这给了错误。 2.我需要在上传文件的同时更新我的​​数据库。要做到这一点,我需要访问页面上的其他控件的值,我不能解决如何从iframe中做到这一点。 3.我想从iframe中访问Web服务,但不知道如何执行此操作。对不起,不断回到你身边;我通常可以自己解决问题。 –

+0

关于你的意见: 1.你可以分享代码吗?也请告诉我们你得到的错误。 2.如果你需要执行一些数据库更新和东西,我认为HTML页面路由不适合你。我建议你使用常规的asp.net上传器在Web服务器上上传文件(就像我们在前几天做的那样,一旦文件上传完毕,你就把这个文件写到BLOB存储器上)。试试这些:https://github.com/WindowsAzure-TrainingKit/HOL-ExploringStorage-VS2012或http://code.msdn.microsoft.com/windowsazure/Windows-Azure-AddressBook-026fcbbb。这应该给你足够的想法。 –