使用进度条和拖放功能将多个文件上传到数据库

引言

这个 ASP.NET 应用程序允许您通过拖放方式将多个文件上传到 SQL Server 数据库。它会在文件上传时显示每个文件的进度条。上传完成后，您可以浏览、排序和删除这些文件。

背景

这是我对先前文章的续写，具有进度条和拖放功能的多个文件上传。

Using the Code

要使用此应用程序

1. 下载 Upload.zip 并将其解压缩到 C:\inetpub\wwwroot\Upload。
2. 打开 SQL Server Management Studio 并创建名为“Upload”的数据库。确保 SQL Server 使用 SQL 身份验证模式。

   

3. 在记事本中，打开“C:\inetpub\wwwroot\Upload\Web.config”并更新连接到数据库所需的用户名和密码

   

4. 将浏览器指向 https:///Upload/Upload.aspx。

   以下是 Upload.js 的代码

   var oUploadedFiles = [];
   
   function OnLoad() {
   
       if (_("tbServer"))_("btnDelete").style.display = "";
   
       if (_("file1").addEventListener) _("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 FileSelectHandler(e) {
       FileDragHover(e);
   
       var oFiles = e.target.files || e.dataTransfer.files;
       if (oFiles.length==0) return;
   
       var sHtml = "<table id='tbClient' class='StatusTable' 
       border=1 cellspacing=0 cellpadding=3><tr>"
           + "<th><a href='#FileName'>File name</a></th>"
           + "<th><a href='#FileSize'>Size</a></th>"
           + "<th><a href='#DateCreated'>Date Modified</a></th>"
           + "<th><label><input type=checkbox name=chkDeleteAll 
             onclick='DeleteAll(this)'>Delete</label></th></tr>";
       for (var i=0; i<oFiles.length; i++){
           sHtml += GetRowHtml(oFiles[i].name, oFiles[i].size, i + "", "");
       }
       
       for (var i=0; i<oUploadedFiles.length; i++){
           sHtml += GetRowHtml(oUploadedFiles[i].name, oUploadedFiles[i].size, "", 
                    oUploadedFiles[i].fileId);
       }
       
       var sServerHtml = "";
       if (_("tbServer")){
           _("trHeader").style.display = "none";
           _("tbServer").style.display = "none";
           sServerHtml = _("tbServer").innerHTML;
       }
       
       _("divStatus").innerHTML = sHtml + sServerHtml + "</table>";
       
       for (var i=0; i<oFiles.length; i++){
           UploadFile(oFiles[i],i);
       }
   }
   
   function GetRowHtml(sName, iSize, i, iFileId) {
       var sHref = "";
       if (iFileId != "") sHref = " href='Download.aspx?id=" + iFileId + "' ";
   
       var s = "<tr><td><a id=fileLink" + i + " target='_blank'" + 
       sHref + ">" + sName + "</a></td>"
                 + "<td>" + (iSize/1024).formatNumber(0,',','.') + " KB</td>"
           
           if (i==""){
               s += "<td><div class='progressBar progressSuccess'>&nbsp;</div></td>";
           }else{
               s += "<td id=progressBar"+i+"></td>";
           }
   
       return s + "<td><input type=checkbox name=chkDelete value=\"" + 
       sName + "\"></td></tr>";
   }
   
   function UploadFile(file,i) {
       var xhr = new XMLHttpRequest();
       if (xhr.upload) {
           var progress = _("progressBar"+i).appendChild(document.createElement("div"));
           progress.className = "progressBar";
           progress.innerHTML = "&nbsp;";
   
           // 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) {
   
                       if (xhr.responseText == "") {
                           oUploadedFiles.push({ fileId: 0, name: file.name, size: file.size });
                           alert("ccc");
                       } else {
                           eval(xhr.responseText);
                           var iFileId = oUploadedFiles[oUploadedFiles.length - 1].fileId;
                           _("fileLink" + i).href = "Download.aspx?id=" + iFileId;
                       }
   
                       _("btnDelete").style.display = ""
                   } else {
                       _("divError").innerHTML = xhr.responseText;
                   }
               }
           };
   
           var oFormData = new FormData();
           oFormData.append("myfile"+i, file);
           xhr.open("POST", _("form1").action, true);
           xhr.send(oFormData);
       }
   }
   
   function DeleteAll(o){
       var oBoxes = document.getElementsByTagName("input");
       for (var i=1; i<oBoxes.length; i++){
           oBoxes[i].checked = o.checked;
       }
   }
   
   function _(id) {
       return document.getElementById(id);
   }
   
   Number.prototype.formatNumber = function(decPlaces, thouSeparator, decSeparator) {
       var n = this,
           decPlaces = isNaN(decPlaces = Math.abs(decPlaces)) ? 2 : decPlaces,
           decSeparator = decSeparator == undefined ? "." : decSeparator,
           thouSeparator = thouSeparator == undefined ? "," : thouSeparator,
           sign = n < 0 ? "-" : "",
           i = parseInt(n = Math.abs(+n || 0).toFixed(decPlaces)) + "",
           j = (j = i.length) > 3 ? j % 3 : 0;
       return sign + (j ? i.substr(0, j) + thouSeparator : "") + 
              i.substr(j).replace(/(\d{3})(?=\d)/g, "$1" + thouSeparator) + 
              (decPlaces ? decSeparator + Math.abs(n - i).toFixed(decPlaces).slice(2) : "");
   };

   以下是 Upload.aspx.vb 的代码

       Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
   
           If Request.HttpMethod = "POST" Then
   
               Dim cn As New System.Data.SqlClient.SqlConnection(GetConnectionString())
               cn.Open()
   
               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 sFileId As String = Request.Form.GetValues("chkDelete")(i)
   
                           Try
                               Dim cm As New SqlCommand("delete AppFile where FileId = @FileId", cn)
                               cm.Parameters.Add("@FileId", Data.SqlDbType.Int).Value = sFileId
                               cm.ExecuteNonQuery()
                           Catch ex As Exception
                               'Ignore error
                           End Try
                       Next
                   End If
   
               Else
                   Dim sJson As String = ""
   
                   '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)
   
                       If sFileName <> "" Then
                           Dim iFileSize As Integer = oFile.ContentLength
                           Dim oData(iFileSize) As Byte
                           Dim oStream As System.IO.Stream = oFile.InputStream
                           oStream.Read(oData, 0, iFileSize)
                           oStream.Close()
   
                           Dim sSql As String = "INSERT INTO AppFile _
                             (FileData, FileName, FileContentType, FileSize) " & _
                             " Values(@FileData, @FileName, @FileContentType, @FileSize); _
                             SELECT @@IDENTITY"
   
                           Dim cm As New SqlCommand(sSql, cn)
                           cm.Parameters.Add("@FileData", _
                                  Data.SqlDbType.Binary, iFileSize).Value = oData
                           cm.Parameters.Add("@FileName", Data.SqlDbType.NVarChar).Value = sFileName
                           cm.Parameters.Add("@FileContentType", Data.SqlDbType.NVarChar).Value = _
                                          oFile.ContentType
                           cm.Parameters.Add("@FileSize", Data.SqlDbType.Int).Value = iFileSize
                           Dim sFileId As String = cm.ExecuteScalar()
   
                           sJson += "oUploadedFiles.push({fileId: " & sFileId & ", _
                                  name: """ & sFileName & """, size: " & iFileSize & "});"
                       End If
                   Next
   
                   If Request.Form("btnUpload") = "" Then
                       Response.Write(sJson)
                       Response.End()
                   End If
               End If
   
               cn.Close()
           End If
   
           SetupDatabase()
       End Sub
   
       Private Sub SetupDatabase()
           Dim cn As New System.Data.SqlClient.SqlConnection(GetConnectionString())
           cn.Open()
   
           Dim cm As New SqlCommand("select count(*) from INFORMATION_SCHEMA.TABLES _
                         where TABLE_NAME = 'AppFile'", cn)
           If cm.ExecuteScalar() = "1" Then
               'Table already exists
               cn.Close()
               Exit Sub
           End If
   
           Dim sSql As String = System.Configuration.ConfigurationManager.AppSettings("TableCreate")
           cm = New SqlCommand(sSql, cn)
           cm.ExecuteNonQuery()
           cn.Close()
       End Sub
   
       Public Sub ShowFiles()
   
           Dim sSql As String = "SELECT FileId, FileName, FileSize, DateCreated from AppFile"
   
           Dim sSort As String = Request.QueryString("sort") & ""
           If sSort = "FileName" OrElse sSort = "FileSize" OrElse sSort = "DateCreated" Then
               sSql += " ORDER BY " & sSort
           End If
   
           Dim cn As New SqlConnection(GetConnectionString())
           cn.Open()
           Dim ad As SqlDataAdapter = New SqlDataAdapter(sSql, cn)
           Dim ds As Data.DataSet = New Data.DataSet
           ad.Fill(ds)
           cn.Close()
           Dim oTable As Data.DataTable = ds.Tables(0)
   
           If oTable.Rows.Count = 0 Then
               Exit Sub
           End If
   
           Response.Write("<table id='tbServer' _
                  class='StatusTable' border=1 cellspacing=0 cellpadding=3>")
           Response.Write("<tr id=trHeader>")
           Response.Write("<th><a href='#FileName'>File name</a></th>")
           Response.Write("<th><a href='#FileSize'>Size</a></th>")
           Response.Write("<th><a href='#DateCreated'>Date Modified</a></th>")
           Response.Write("<th><label><input type=checkbox name=chkDeleteAll _
                     onclick='DeleteAll(this)'>Delete</label></th></tr>")
   
           For i As Integer = 0 To oTable.Rows.Count - 1
               Dim sFileId As String = oTable.Rows(i)("FileId")
               Dim sFileName As String = oTable.Rows(i)("FileName")
               Dim iFileSize As Integer = oTable.Rows(i)("FileSize")
               Dim dDateCreated As DateTime = oTable.Rows(i)("DateCreated")
   
               Dim sSize As String = FormatNumber((iFileSize / 1024), 0)
               If sSize = "0" AndAlso iFileSize > 0 Then sSize = "1"
   
               Response.Write("<tr>")
               Response.Write("<td><a href=""Download.aspx?id=" & sFileId & _
                            """ target='_blank'>" & sFileName + "</a></td>")
               Response.Write("<td>" & sSize & " KB</td>")
               Response.Write("<td>" & dDateCreated.ToShortDateString() & _
                            " " & dDateCreated.ToShortTimeString() & "</td>")
               Response.Write("<td><input type=checkbox name=chkDelete _
               value=""" & sFileId & """>")
               Response.Write("</tr>")
           Next
   
           Response.Write("</table>")
       End Sub
   
       Private Function GetConnectionString() As String
           Return System.Configuration.ConfigurationManager.AppSettings("ConnectionString")
       End Function 

历史

• 2016 年 10 月 11 日：初始版本