基于html5的服务器端图像及视频文件的浏览

最新推荐文章于 2025-06-20 11:16:38 发布

原创

最新推荐文章于 2025-06-20 11:16:38 发布 · 1.9k 阅读

2 ·

CC 4.0 BY-SA版权

本文介绍了如何使用HTML5技术实现服务器端用户上传的图像和视频文件的浏览。通过VB.NET遍历服务器目录获取文件信息，生成XML并绑定到GridView。接着，利用JavaScript和CSS实现图片和视频的预览功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

用户上传到服务器端的图像及视频文件可以通过Html5浏览。

第一步：读取用户上传的目录及文件。（基于Vb.net实现）

首先，遍历服务端目录，获得文件及文件夹相关信息，返回XML文件；

    Function GetFiles(wy_file_path As String, kind As String) As XmlDocument
        Dim i As Int32 = 0
        Dim folder As DirectoryInfo = New DirectoryInfo(wy_file_path)
        Dim tempBig_file_upload As Big_file_upload = New Big_file_upload
        Dim xmlDoc As XmlDocument = New XmlDocument
        '创建类型声明节点    
        Dim node As XmlNode = xmlDoc.CreateXmlDeclaration("1.0", "utf-8", "")
        xmlDoc.AppendChild(node)
        '创建根节点    
        Dim root As XmlNode = xmlDoc.CreateElement("fileinfo_root")
        xmlDoc.AppendChild(root)

        If kind = "all" Then
            '   // node.Value = folder.FullName;
            Dim chldFolders() As DirectoryInfo = folder.GetDirectories()
            Dim chldFolder As DirectoryInfo
            For Each chldFolder In chldFolders

                i += 1
                Dim file_list As XmlNode = xmlDoc.CreateElement("file_list")
                root.AppendChild(file_list)
                CreateNode(xmlDoc, file_list, "no", i.ToString())
                CreateNode(xmlDoc, file_list, "file_or_diretory", "directory")
                CreateNode(xmlDoc, file_list, "file_name", chldFolder.Name)
                CreateNode(xmlDoc, file_list, "file_full_name", chldFolder.FullName)
                CreateNode(xmlDoc, file_list, "file_length", "-")
                CreateNode(xmlDoc, file_list, "file_date", chldFolder.LastWriteTime.ToString())


            Next


            Dim chldFiles() As FileInfo = folder.GetFiles("*.*")
            Dim chlFile As FileInfo
            For Each chlFile In chldFiles
                If chlFile.Extension.ToLower = ".jpg" Or chlFile.Extension.ToLower = ".jpeg" Or chlFile.Extension.ToLower = ".png" Or chlFile.Extension.ToLower = ".gif" Or chlFile.Extension.ToLower = ".mp4" Then
                    i += 1
                    Dim file_list As XmlNode = xmlDoc.CreateElement("file_list")
                    root.AppendChild(file_list)
                    CreateNode(xmlDoc, file_list, "no", i.ToString())
                    CreateNode(xmlDoc, file_list, "file_or_diretory", "file")
                    CreateNode(xmlDoc, file_list, "file_name", chlFile.Name)

                    CreateNode(xmlDoc, file_list, "file_full_name", chlFile.FullName)
                    CreateNode(xmlDoc, file_list, "file_length", tempBig_file_upload.CountSize(chlFile.Length))
                    CreateNode(xmlDoc, file_list, "file_date", chlFile.LastWriteTime.ToString())

                End If
            Next
      ElseIf kind = "video" Then
            Get_Video_list(xmlDoc, folder, root, i)
        ElseIf kind = "image" Then
            Get_image_list(xmlDoc, folder, root, i)
        End If


        Return xmlDoc


    End Function
    Function Get_image_list(xmlDoc As XmlDocument, folder As DirectoryInfo, root As XmlNode, i As Integer) As Boolean
        Dim chldFiles() As FileInfo = folder.GetFiles("*.*")
        Dim chlFile As FileInfo
        For Each chlFile In chldFiles
            If chlFile.Extension.ToLower = ".jpg" Or chlFile.Extension.ToLower = ".jpeg" Or chlFile.Extension.ToLower = ".png" Or chlFile.Extension.ToLower = ".gif" Then
                i += 1
                Dim file_list As XmlNode = xmlDoc.CreateElement("file_list")
                root.AppendChild(file_list)
                CreateNode(xmlDoc, file_list, "no", i.ToString())
                CreateNode(xmlDoc, file_list, "file_or_diretory", "file")
                CreateNode(xmlDoc, file_list, "file_name", chlFile.Name)


                CreateNode(xmlDoc, file_list, "file_full_name", chlFile.FullName)
                CreateNode(xmlDoc, file_list, "file_length", tempBig_file_upload.CountSize(chlFile.Length))
                CreateNode(xmlDoc, file_list, "file_date", chlFile.LastWriteTime.ToString())


            End If
        Next
        Dim chldFolders() As DirectoryInfo = folder.GetDirectories()
        Dim chldFolder As DirectoryInfo
        For Each chldFolder In chldFolders
            Get_image_list(xmlDoc, chldFolder, root, i)


        Next




    End Function
    Function Get_Video_list(xmlDoc As XmlDocument, folder As DirectoryInfo, root As XmlNode, i As Integer) As Boolean
        Dim chldFiles() As FileInfo = folder.GetFiles("*.mp4")
        Dim chlFile As FileInfo
        For Each chlFile In chldFiles
            i += 1
            Dim file_list As XmlNode = xmlDoc.CreateElement("file_list")
            root.AppendChild(file_list)
            CreateNode(xmlDoc, file_list, "no", i.ToString())
            CreateNode(xmlDoc, file_list, "file_or_diretory", "file")
            CreateNode(xmlDoc, file_list, "file_name", chlFile.Name)


            CreateNode(xmlDoc, file_list, "file_full_name", chlFile.FullName)
            CreateNode(xmlDoc, file_list, "file_length", tempBig_file_upload.CountSize(chlFile.Length))
            CreateNode(xmlDoc, file_list, "file_date", chlFile.LastWriteTime.ToString())