asp.net javascript 文件無刷新上傳實例代碼第1/2頁

2024-07-10 12:38:46

字體：大中小

來源：轉載

供稿：網友

在新增數據項的時候，用ajax實現無刷新提交，但上傳文件的時候，由于數據類型原因，不能將頁面的<asp:FileUpload>中以字符串值的方式傳到js里調用。我一共找到了兩個方法予以解決，實現無刷新上傳。
第一種方法：利用js的ADODB.Stream，將文件先轉換成流，再通過js上傳到服務器，這樣有個好處就是可以上傳超大文件，并且由于是數據流，可以支持斷點續傳、方便顯示上傳進度等人性化功能。唯一的缺點是要客戶端瀏覽器需要設置安全級別，或者安裝相關ActiveX控件（這個控件自己做的，加載到頁面中）。
相關代碼：
文件有：1個前臺頁面：upload.html、 1個js控制：upload.js、 1個后臺處理頁面：Accept.aspx(Accept.aspx.cs)
代碼文件如下：
upload.html
代碼如下:
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>無標題頁</title>
<script src="upload.js" src="upload.js" language="jscript" type="text/jscript"></script>
</head>
<body>
<form id="form1" runat="server">
<div style="width:100%">
<input type="file" id="hidFilePath" />
<input type="button" id="ok" onclick="BeginUpLoadFile('0', true)" title="上傳" value="UpLoad"/>
</div>
<div id="lblLeavingsTime">TIME</div>
<div id="returnInfo">Info</div>
</form>
</body>
</html>

upload.js
代碼如下:
var g_XMLHttp = null;
var g_Stream = new ActiveXObject('ADODB.Stream');
var g_SendCount = 0;
var g_TotalCount = 0;
var g_FileSize = 0;
var g_UpFileType = 0 ;
var g_BlockSize = 1024 * 100; //每段分為100K
var fileExtName = "" ; //文件后綴名
var g_PauseFlag = false;
var g_BeginTime = null;
var g_guageFlag = false ;
var Nfilename = "" ;
function Init()
{
InitTitleEvent();
BeginUpLoadFile();
}
function MoveGuage()
{
var t_Time = new Date();
var t_OddTime = Math.ceil((t_Time.getTime() - g_BeginTime.getTime()) / g_SendCount * (g_TotalCount - g_SendCount) / 1000);
var t_OddTimeString = '';
if(t_OddTime >= 3600)
{
t_OddTimeString = Math.floor(t_OddTime / 3600) + '時';
t_OddTime %= 3600;
}
if(t_OddTime >= 60)
{
t_OddTimeString += Math.floor(t_OddTime / 60) + '分';
t_OddTime %= 60;
}
document.all.lblLeavingsTime.innerText = t_OddTimeString + t_OddTime + '秒';
}
//第1個參數表示上傳的類型，為命名新文件提供參考
//第2個參數表示要不要顯示狀態條
function BeginUpLoadFile(upFileType, guageFlag)
{
if(g_Stream == null)
{alert("您的機器不支持ADODB.Stream."); }
else
{
g_guageFlag = guageFlag ;
g_UpFileType = upFileType;
g_Stream.Type = 1;
g_Stream.Open();
var pth = document.getElementById("hidFilePath").value ;
g_Stream.LoadFromFile(pth);