带有进度条和拖放功能的批量文件上传

引言

这个 ASP.NET 应用程序允许您手动或通过拖放方式上传多个文件。它会在文件上传时显示每个文件的进度条。 上传完成后，您可以浏览和删除这些文件。

背景

此应用程序基于 Craig Buckler 提供的示例。

Using the Code

使用此应用程序

1. 下载 Upload2.zip 并将其解压缩到C:\inetpub\wwwroot\Upload。
2. 授予所有人（或 IIS 匿名用户）访问C:\inetpub\wwwroot\Upload\upload 文件夹的权限。

   

3. 将您的浏览器指向https:///Upload/Upload.aspx?folder=upload。
4. 您可以将 URL 从?folder=upload更改为您的文件夹，例如：folder=folder1，如果您想将页面指向folder1。

以下是Upload.js的代码

var oUploadedFiles = [];

function OnLoad() {

	if (_("tbServer"))_("btnDelete").style.display = "";
	
	_("file1").addEventListener("change", FileSelectHandler, false);

	var xhr = new XMLHttpRequest();
	if (xhr.upload) {
		
		var filedrag = _("divDropHere");
		if (filedrag){
			filedrag.addEventListener("dragover", FileDragHover, false);
			filedrag.addEventListener("dragleave", FileDragHover, false);
			filedrag.addEventListener("drop", FileSelectHandler, false);
			filedrag.style.display = "block";
		}

		_("btnUpload").style.display = "none";
	}
}

function FileDragHover(e) {
	e.stopPropagation();
	e.preventDefault();
	e.target.className = (e.type=="dragover")?"hover":"";
}

function UploadFile(file,i) {
	var xhr = new XMLHttpRequest();
	if (xhr.upload) {
		var progress = _("progressBar"+i).appendChild(document.createElement("div"));
		progress.className = "progressBar";
		progress.innerHTML = " ";

		// progress bar
		xhr.upload.addEventListener("progress", function(e) {
			var pc = parseInt(100 - (e.loaded / e.total * 100));
			progress.style.backgroundPosition = pc + "% 0";
		}, false);

		// file received/failed
		xhr.onreadystatechange = function(e) {
			if (xhr.readyState == 4) {
				progress.className = "progressBar " + 
                                     (xhr.status == 200 ? "progressSuccess" : "progressFailed");
				if (xhr.status == 200){
					oUploadedFiles[oUploadedFiles.length] = {name: file.name, size: file.size};
					_("btnDelete").style.display = ""
				}
			}
		};

		var oFormData = new FormData();
		oFormData.append("myfile"+i, file);
		xhr.open("POST", _("form1").action, true);
		xhr.send(oFormData);
	}
}

以下是Upload.aspx.vb的代码

	Dim sFolder As String = "upload"

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

		If Request.QueryString("folder") <> "" Then
			sFolder = Request.QueryString("folder")
		End If

		Dim sFolderPath As String = Server.MapPath(sFolder)
		If System.IO.Directory.Exists(sFolderPath) = False Then
			Response.Write("Folder does not exist: " & sFolderPath)
			Response.End()
		End If

		If Request.HttpMethod = "POST" Then

			If Request.Form("btnDelete") <> "" Then
				'Delete files
				If (Not Request.Form.GetValues("chkDelete") Is Nothing) Then
					For i As Integer = 0 To Request.Form.GetValues("chkDelete").Length - 1
						Dim sFileName As String = Request.Form.GetValues("chkDelete")(i)

						Try
							System.IO.File.Delete(sFolderPath & "\" & sFileName)
						Catch ex As Exception
							'Ignore error
						End Try
					Next
				End If

			Else
				'Upload Files
				For i As Integer = 0 To Request.Files.Count - 1
					Dim oFile As System.Web.HttpPostedFile = Request.Files(i)
					Dim sFileName As String = System.IO.Path.GetFileName(oFile.FileName)

					oFile.SaveAs(sFolderPath & "\" & sFileName)
				Next
			End If

		End If

    End Sub

历史

• 2014年9月14日：初始版本