在ASP中實現文件上傳進度條,通常需要結合HTML、JavaScript和后端代碼來完成。以下是一個基本的實現步驟:
<form>
標簽創建一個表單,并設置enctype="multipart/form-data"
以支持文件上傳。同時,添加一個用于顯示進度條的<div>
元素。<form action="upload.asp" method="post" enctype="multipart/form-data">
選擇文件: <input type="file" name="fileToUpload">
<br><br>
<input type="submit" value="上傳文件" name="submit">
</form>
<div id="progressDiv" style="width: 100%; background-color: #ddd;"></div>
XMLHttpRequest
對象來實現這一點。document.getElementById('submit').addEventListener('click', function() {
var fileInput = document.querySelector('input[type="file"]');
var file = fileInput.files[0];
var formData = new FormData();
formData.append('fileToUpload', file);
var xhr = new XMLHttpRequest();
xhr.upload.addEventListener('progress', function(event) {
if (event.lengthComputable) {
var percentComplete = (event.loaded / event.total) * 100;
document.getElementById('progressDiv').style.width = percentComplete + '%';
}
});
xhr.open('POST', 'upload.asp', true);
xhr.send(formData);
});
注意:上述JavaScript代碼中的upload.asp
應替換為你的實際ASP文件上傳處理腳本。
<%@ Language=VBScript %>
<%
Dim fileToUpload, filePath, fileName, fileSize
fileToUpload = Request.Files("fileToUpload")
If fileToUpload Is Nothing Then
Response.Write("沒有選擇文件")
Exit Sub
End If
filePath = Server.MapPath("uploads\")
fileName = fileToUpload.FileName
fileSize = fileToUpload.FileSize
' 檢查文件大小(可選)
' If fileSize > 10485760 Then ' 10MB
' Response.Write("文件太大")
' Exit Sub
' End If
' 保存文件到服務器
Dim inputStream, outputStream
Set inputStream = fileToUpload.OpenBinary
Set outputStream = Server.CreateObject("ADODB.Stream")
outputStream.Open
outputStream.Write inputStream.ReadAll()
outputStream.SaveToFile filePath & fileName, 2 ' 2表示覆蓋現有文件
outputStream.Close
inputStream.Close
Response.Write("文件上傳成功: " & fileName)
%>
注意:上述ASP代碼中的uploads\
目錄應替換為你希望保存文件的實際目錄。同時,確保該目錄具有適當的寫權限。
現在,當用戶選擇一個文件并點擊“上傳文件”按鈕時,JavaScript將負責顯示上傳進度條,而ASP后端代碼則負責處理文件上傳并將其保存到服務器上。