将文件从html上传到azure
Upload files from html to azure
我目前有一个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云服务的一部分,我不知道如何将blob存储中的页面集成到我的云服务中。当我想将我的包发布到azure时,这将如何工作?
我试图解决这个问题的另一种方法是将我的文件从html上传到azure本地存储,然后调用web服务将文件从本地存储转移到blob存储(就像我为asp解决方案所做的那样)。然而,我不知道如何在js中获取文件并将其传输到azure本地存储(我对js很陌生)。
因此,如果这真的不止一个问题,请道歉,即:如何将blob存储中的页面集成到云服务中?或者如何使用js和html将文件传输到azure本地存储?或者有其他方法可以完全做到这一点吗?
如果有人能帮我解决这些问题,我将不胜感激。
如果您关心的是如何在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.
我现在找到了一个能解决这个问题的解决方案。我的上传现在工作如下:
-
我将文件作为DataURL读取到FileReader 中
-
我对返回的字符串进行切片,并将每个切片发送到服务器存储在会话变量中
-
一旦整个文件被发送出去,我就会调用另一个网络服务将切片重新粘合在一起,并将结果转换为字节数组
-
字节数组然后作为文件存储在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
- 可以't让我的if语句处理js中的html表单输入
- 如何设置html元素填充的动画
- 使用JS如何动态更改显示的html文件中的文本背景颜色
- 如何将HTML id分配给元素,以及如何将JavaScript应用于元素
- 如何编写HTML输入的JS内联
- Dojo不解析自定义小部件的模板html中的小部件声明性
- 使用javascript将动态表从一个html页面打印到另一个html页
- 通过javascript重定向html传递php变量
- 如何使Javascript动态html表及其上的事件
- 在chrome.tabs.onCreated之后加载HTML页面
- 如何在vs2002中调试html页面
- 如何使用javascript或html下载PDF格式的填写表单
- 视频HTML没有'无法在Internet Explorer 11上工作
- 通过Azure存储以HTML形式获取JSON文件
- 更新Windows Azure移动服务中的查询javascript/html
- 将文件从html上传到azure
- 将查询参数从HTML/JS应用程序传递到Azure Server脚本
- 如何使用html和java脚本在windows azure移动服务中存储文件(简历)
- Azure容器枚举结果作为HTML
- 从WebView中的动态HTML内容连接到Azure移动服务