AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

C#结合JavaScript实现多文件上传

2024-03-25 47
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： C#结合JavaScript实现多文件上传

需求

在许多应用场景里，多文件上传是一项比较实用的功能。实际应用中，多文件上传可以考虑如下需求：

1、对上传文件的类型、大小有一个基本的控制。

2、上传文件时有一个进度显示，包括当前文件和整体进度。

3、上传后，在服务端后续事件进行一些处理。

引入

首先请在WEB应用程序根目录下创建COMMON目录，并引入 JavaScript 程序包，该程序包已经打包，下载地址为：https://download.csdn.net/download/michaelline/88615565。

下载成功后解压到COMMON目录即可，请引入如下图中的 JS 文件：

另外，我们还需要在 app_data目录下创建 ajaxUploadFiles 子目录，以备上传创建文件使用。

关键代码

操作界面

界面上放置标准的 input file 控件，并将其服务器化，即 runat="server"。点击选择文件，选中所有目标文件后，自动实现文件上传功能。

示例界面如下：

示例UI代码如下：

<input  class="file" type="file" id="ajaxMfile" runat="server" 
                                    onbeginupload="ajax_uploadFiles_beginUpload" onprogressupload="ajax_uploadFiles_progressUpload" onendupload="ajax_uploadFiles_endUpload" 
                                    multiple="multiple" allowtype="pptx|docx|mp3|txt|std" allowsize="500m|100m" fileindex="0" name="fileupload"
                                    serverbuttonid="ajaxEndBtn" serverfilelistid="ajaxReturnFileName"
                                    progresspanelid="ajaxMfileProgressPanel"
                                    onchange="ajax_uploadFiles(this);return false" />
                            <asp:TextBox runat="server" Width="100%" ID="ajaxReturnFileName" style="display:none" ></asp:TextBox>
                                        <br />
                            <asp:button ID="ajaxEndBtn" text="后台处理" runat="server" style="display:none" onclick="ajaxEndBtn_Click"  />
                                        <br />
                                        <br />
                                        <table style="display:none; color:White" id="ajaxMfileProgressPanel">
                                            <tr>
                                                <td >
                                                    当前文件:</td>
                                                <td style="position:relative; padding:0px">
                                                    <asp:Label Font-Size="9pt" style="z-index:1;position:absolute;left:0px;top:-9px;" Width="300px" runat="server" ID="ajax_uploadFiles_curfilename"/>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td style="position:relative; padding:0px;width:120px">
                                                    当前文件进度<asp:Label style="z-index:1;position:absolute;left:85px;top:-9px;" runat="server" Font-Size="9pt" ID="ajax_uploadFiles_upprogress"></asp:Label>
                                                </td>
                                                <td style="position:relative; padding:10px">
                                                    <img id="ajax_uploadFiles_curprogress" style="z-index:1;position:absolute;left:0px;top:4px;width:0px;height:12px" alt="" src="/common/Jquery/images/win7progress.jpg" />
                                                    <div id="ajax_uploadFiles_curbg" style="z-index:0;position:absolute;left:0px;top:4px;width:300px;height:12px;background-color:Gray"></div>
                                                </td>
 
                                            </tr>
                                            <tr>
                                                <td style="position:relative; padding:0px">
                                                    上传总量进度<asp:Label style="z-index:1;position:absolute;left:85px;top:-9px;" runat="server" Font-Size="9pt" ID="ajax_uploadFiles_cprogress"></asp:Label></td>
                                                <td style="position:relative; padding:10px">
                                                    <img id="ajax_uploadFiles_totalprogress" style="z-index:1;position:absolute;left:0px;top:4px;width:0px;height:12px" alt="" src="/common/Jquery/images/win7progress2.jpg" />
                                                    <div id="ajax_uploadFiles_totalbg" style="z-index:0; position:absolute;left:0px;top:4px;width:300px;height:12px;background-color:Gray"></div>
                                                </td>
                                            </tr>
                                            
                                        </table>
                                        <table style="color:White; width:100%">
                                           <tr>
                                                <td style="position:relative">
                                                    <asp:Label runat="server" Font-Size="11pt" ID="ajax_uploadFiles_serverProcessTip"></asp:Label>
                                                </td>
                                            </tr>
                                        </table>

input file 控件的一些设置如下：

（1）onbeginupload="ajax_uploadFiles_beginUpload"   js方法，开始上传前事件，默认值

（2）onprogressupload="ajax_uploadFiles_progressUpload"   js方法，上传中事件，默认值

（3）onendupload="ajax_uploadFiles_endUpload"    js方法，选择完文件上传事件，默认值

（4）multiple="multiple"         控件属性，允许多文件选中上传

（5）allowtype="pptx|docx|mp3|txt|std"    自定义属性，允许上传的文件类型，以 | 分隔

（6）allowsize="500m|100m"    自定义属性，允许上传的文件最大尺寸，可以以 | 分隔，并一一对应，如果不对应，则根据 allowtype 的设置从左至右进行匹配

       如举例中的设置则表示为，pptx 允许最大 500M , docx 最大 100M，后面未设置则均为100M

（7） serverbuttonid="ajaxEndBtn"   自定义属性，执行的服务器按钮ID，默认值

（8）serverfilelistid="ajaxReturnFileName"  自定义属性，服务器端返回的文件ID列表，默认值

（9）οnchange="ajax_uploadFiles(this);return false"  自定义属性，js方法，选择文件后自动执行上传功能，默认值

根据示例代码的设置，以上部分除了 allowtype和 allowsize 均可以不用改变设置。

上传中的效果如下图：

 

JavaScript包程序

本包程序实现了前面设置的界面元素方法、事件、属性的实现及对文件上传的客户端控制，示例代码如下：

 //批量上传文件的内置默认辅助方法，表示每上传一个文件之前发生的事件，
         //事件的fileObj参数代表 file对象（上传控件），由主方法自动传入，开发者可以重新指定自定义方法
         function ajax_uploadFiles_beginUpload(fileObj) {
            var fIndex = parseInt(fileObj.getAttribute("fileindex"), 10);
            if (fIndex == 0) {
                document.getElementById('ajax_uploadFiles_serverProcessTip').innerHTML = '';
                document.getElementById("ajax_uploadFiles_upprogress").innerHTML = "";
                document.getElementById("ajax_uploadFiles_cprogress").innerHTML = "";
                document.getElementById("ajax_uploadFiles_totalprogress").style.width = "0px";
                document.getElementById(fileObj.getAttribute("serverfilelistid")).value = "";
            }
            document.getElementById("ajax_uploadFiles_curfilename").innerHTML = fileObj.files[fIndex].name;
        }
        //批量上传文件的内置默认辅助方法，表示当前正在上传文件时发生的事件（主要用于显示上传进度），
        //事件的fileObj参数代表 file对象（上传控件）， loaded：已经上传的文件总字节, total：正在上传的文件总字数,
        // percent:不超过100的整数，表示为百分比。这些参数由主方法自动传入，开发者可以重新指定自定义方法
        function ajax_uploadFiles_progressUpload(fileObj, loaded, total, percent) {
            document.getElementById("ajax_uploadFiles_upprogress").innerHTML = ("" + percent + "%");
            var curb = parseInt(document.getElementById("ajax_uploadFiles_curbg").style.width, 10);
            document.getElementById("ajax_uploadFiles_curprogress").style.width = Math.floor(curb * loaded / total) + "px";
        }
        //批量上传文件的内置默认辅助方法，表示当前文件上传完成时发生的事件（主要用于处理文件上传后的跟踪处理，并且返回服务器上保存的文件列到一个文本框中，以｜分隔），
        //事件的fileObj参数代表 file对象（上传控件）， type：上传状态返回，包括success成功，error失败, 
        //data：文件的数据，暂时未使用, desfile：要保存在服务器上的文件名
        // 这些参数由主方法自动传入，开发者可以重新指定自定义方法
        function ajax_uploadFiles_endUpload(fileObj, type, data, desfile) {
            var fIndex = parseInt(fileObj.getAttribute("fileindex"), 10);
            var filecount = fileObj.files.length;
            document.getElementById(fileObj.getAttribute("serverfilelistid")).value += desfile + "|";
            var totalb = parseInt(document.getElementById("ajax_uploadFiles_totalbg").style.width, 10);
            document.getElementById("ajax_uploadFiles_totalprogress").style.width = Math.floor(totalb * (fIndex + 1) / filecount) + "px";
            document.getElementById("ajax_uploadFiles_cprogress").innerHTML = ("" + Math.floor(100 * (fIndex + 1) / filecount) + "%");
            if (fIndex < filecount - 1) {
                fIndex++;
                fileObj.setAttribute("fileindex", fIndex);
                ajax_uploadFiles(fileObj);
                return;
            }
            fileObj.setAttribute("fileindex", 0);
 
            if (type == "success") {
                            document.getElementById('ajaxMfile').style.display='none';
                document.getElementById('ajax_uploadFiles_serverProcessTip').innerHTML = '上传完成！正在进行后台处理...';
                document.getElementById(fileObj.getAttribute("serverbuttonid")).click();
            } else if (type == "error") {
                alert("error");
            }
        }
        //生成一个guid
        function newguid() {
            function S4() {
                return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
            }
            return (S4() + S4() + "-" + S4() + "-" + S4() + "-" + S4() + "-" + S4() + S4() + S4());
        }
        //批量上传文件的主方法，fileObj参数代表 file对象（上传控件）
        function ajax_uploadFiles(fileObj) {
            var formData = new FormData();
            var fIndex = parseInt(fileObj.getAttribute("fileindex"), 10);
            var filecount = fileObj.files.length;
            if (filecount == 0) {
                alert('请先浏览选择文件...');
                return;
            }
            var uploadSessionId = newguid();
            var upfile = fileObj.files[fIndex].name;
            var dotpos = upfile.lastIndexOf('.');
            var desfile = "";
            var exname = "";
            if (dotpos > 0) {
                exname = upfile.substring(dotpos + 1, upfile.length);
                desfile = uploadSessionId + upfile.substring(0, dotpos) + '.' + exname;
            } else {
                desfile = uploadSessionId + upfile;
            }
            //        alert(Math.round(upsize / 1024));
            if (fIndex == 0) {
                var allowtype = fileObj.getAttribute("allowtype");
                var allowsize = fileObj.getAttribute("allowsize");
                var at = allowtype.split('|');
                var as = allowsize.split('|');
                for (var j = 0; j < filecount; j++) {
                    var validfile = fileObj.files[j].name;
                    var upsize = fileObj.files[j].size;
                    var validdotpos = validfile.lastIndexOf('.');
                    var validexname = "";
                    if (validdotpos > 0) {
                        validexname = validfile.substring(validdotpos + 1, validfile.length);
                    }
                    var i = 0;
                    if (allowtype != "") {
                        var find = false;
                        for (i = 0; i < at.length; i++) {
                            if (at[i].toLowerCase() == validexname.toLowerCase()) {
                                find = true;
                                break;
                            }
                        }
                        if (find == false) {
                            alert("文件" + validfile + "上传的类型不符合要求！仅允许上传扩展名为：" + allowtype.split("|").join("、") + "的文件。");
                            fileObj.style.display = '';
                            document.getElementById(fileObj.getAttribute("progresspanelid")).style.display = 'none';
                            var t = fileObj;
                            t.outerHTML = t.outerHTML;
                            return;
                        }
                    }
                    if (allowsize != "") {
                        if (at.length <= as.length) {
                        } else {
                            i = 0;
                        }
                        as[i] = as[i].toLowerCase();
                        var csize = parseInt(as[i]);
                        var tsize = upsize;
                        if (as[i].lastIndexOf('k') != -1) {
                            csize = csize * 1024;
                            tsize = Math.round(upsize / 1024) + "KB";
                        } else if (as[i].lastIndexOf('m') != -1) {
                            csize = csize * 1024 * 1024;
                            tsize = Math.round(upsize / 1024 / 1024) + "MB";
                        } else if (as[i].lastIndexOf('g') != -1) {
                            csize = csize * 1024 * 1024 * 1024;
                            tsize = Math.round(upsize / 1024 / 1024 / 1024) + "GB";
                        } else if (as[i].lastIndexOf('t') != -1) {
                            csize = csize * 1024 * 1024 * 1024 * 1024;
                            tsize = Math.round(upsize / 1024 / 1024 / 1024 / 1024) + "TB";
                        }
                        if (upsize > csize) {
                            alert("上传文件" + validfile + "的大小近" + tsize + ",系统规定大小不能超过" + as[i].toUpperCase() + ",请重新选择。");
                            fileObj.style.display = '';
                            document.getElementById(fileObj.getAttribute("progresspanelid")).style.display = 'none';
                            var t = fileObj;
                            t.outerHTML = t.outerHTML;
                            return;
 
                        }
                    }
                } //j
            } // findex
            //        document.getElementById(callObjId).disabled = 'disabled';
 
            //        if (beginFuncName != null) {
            //            beginFuncName(fIndex, filecount,upfile);
            //        }
            fileObj.style.display = 'none';
            document.getElementById(fileObj.getAttribute("progresspanelid")).style.display = '';
            var findfunc = fileObj.getAttribute("onbeginupload");
            if (eval(findfunc)) {
                var execfunc = eval(findfunc);
                //            alert(findfunc);
                execfunc(fileObj);
            }
 
            formData.append("file", fileObj.files[fIndex]); //append()里面的第一个参数file对应permission/upload里面的参数file
            var processUploadUrl = window.location.protocol + "//" + window.location.host + "//common//uploadfile.ashx?guid=" + uploadSessionId;
            $.ajax({
                type: "post",
                async: true,  //这里要设置异步上传，才能成功调用myXhr.upload.addEventListener('progress',function(e){}),progress的回掉函数
                Accept: 'text/html;charset=UTF-8',
                data: formData,
                contentType: "multipart/form-data",
                url: processUploadUrl,
                processData: false, // 告诉jQuery不要去处理发送的数据
                contentType: false, // 告诉jQuery不要去设置Content-Type请求头
                xhr: function () {
                    myXhr = $.ajaxSettings.xhr();
                    if (myXhr.upload) { // check if upload property exists
                        myXhr.upload.addEventListener('progress', function (e) {
                            var loaded = e.loaded;                  //已经上传大小情况 
                            var total = e.total;                      //附件总大小 
                            var percent = Math.floor(100 * loaded / total);     //已经上传的百分比  
                            //                        if (progressFuncName != null) {
                            //                            progressFuncName(loaded, total, percent);
                            //                        }
                            var findfunc = fileObj.getAttribute("onprogressupload");
                            if (eval(findfunc)) {
                                var execfunc = eval(findfunc);
                                //            alert(findfunc);
                                execfunc(fileObj, loaded, total, percent);
                            }
                            //                            $("#processBar").css("width", percent);
                        }, false); // for handling the progress of the upload
                    }
                    return myXhr;
                },
                success: function (data) {
                    if (fIndex == fileObj.files.length - 1) {
                        fileObj.style.display = '';
                        document.getElementById(fileObj.getAttribute("progresspanelid")).style.display = 'none';
                        var t = fileObj;
                        t.outerHTML = t.outerHTML;
                    }
                    //                if (endFuncName != null) {
                    //                    endFuncName("success", data, desfile, fIndex,filecount);
                    //                }
                    var findfunc = fileObj.getAttribute("onendupload");
                    if (eval(findfunc)) {
                        var execfunc = eval(findfunc);
                        //            alert(findfunc);
                        execfunc(fileObj, "success", data, desfile);
                    }
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    alert(errorThrown);
                    if (endFuncName != null) {
                        endFuncName(fileObj, "error", null, '');
                    }
                }
            });
        }

服务端 ashx 程序

ashx,一般处理程序（HttpHandler）是·NET众多web组件的一种。一个 httpHandler 接受并处理一个http请求，类似 Java 中的 servlet 。

本程序实现服务器端上传文件的接收和另存操作,在这里我们存为uploadfile.ashx，代码如下：

<%@ WebHandler Language="C#" Class="Handler" %>
 
using System;
using System.Web;
using System.IO;
 
public class Handler : IHttpHandler {
    
    public void ProcessRequest (HttpContext context) {
        if (context.Request.Files.Count > 0)
        {
            //HttpContext.Current.Request.FilePath;
            string strPath = System.Web.HttpContext.Current.Server.MapPath("~/app_data/ajaxUploadFiles/");
            string strName = context.Request.Files[0].FileName;
            string ext=Path.GetExtension(strName);
            string filename =HttpContext.Current.Request.QueryString["guid"].ToString()+Path.GetFileNameWithoutExtension(strName);
            if(ext!=""){
                filename = filename  + ext;
            }
            context.Request.Files[0].SaveAs(System.IO.Path.Combine(strPath, filename));
        }
    }
 
    public bool IsReusable {
        get {
            return false;
        }
    }
 
}

服务端上传后处理程序

在多个文件上传到服务器后，我们需要对文件进行后期处理，在前端我们设置了ID为 “ajaxEndBtn”的服务器按钮，进行模拟调用其 click 事件。

服务器端按钮处理事件示例代码如下：

   void ajaxEndBtn_Click(object sender, EventArgs e)
    {
        //得到保存后的文件名列表
        string[] upfiles = ajaxReturnFileName.Text.Split('|');
        //给予用户基本的提示
        ajax_uploadFiles_serverProcessTip.Text = "本次上传分析：共计上传" + (upfiles.Length - 1).ToString() + "个文件。";
        //遍历上传文件列表，进行后期处理
        foreach (string filename in upfiles)
        {
            if (filename.Trim() == "") continue;
            string upfilename = Request.PhysicalApplicationPath + "app_data\\ajaxUploadFiles\\" + filename;
            string exname = System.IO.Path.GetExtension(upfilename);
 
            //执行业务处理程序
 
 
        }

 

小结

以上提供的代码仅供参考，默认的设置仅可能提供最基础的实现，比如 ashx 程序还需要进行安全控制；进度图片和UI可以重新设计；实际的业务可以根据需求对控件的属性、事件进行重写。

以上就是自己的一些分享，时间仓促，不妥之处还请大家批评指正！

文章标签：
JavaScript
前端开发
C#
Java
安全
关键词：
C# javascript
JavaScript多文件
JavaScript多文件上传
C#多文件上传
初九之潜龙勿用
目录
相关文章
源码宝
|
6月前
|
开发框架 前端开发 JavaScript
C# 6.0+JavaScript云LIS系统源码 　云LIS实验室信息管理新型解决方案
云LIS是为区域医疗提供临床实验室信息服务的计算机应用程序，可协助区域内所有临床实验室相互协调并完成日常检验工作，对区域内的检验数据进行集中管理和共享，通过对质量控制的管理，最终实现区域内检验结果互认。其目标是以医疗服务机构为主体，以医疗资源和检验信息共享为目标，集成共性技术及医疗服务关键技术，建立区域协同检验，最大化利用有限的医疗卫生资源。
源码宝
166 1
初九之潜龙勿用
|
6月前
|
开发框架 前端开发 JavaScript
C# 结合JavaScript实现手写板签名并上传到服务器
C# 结合JavaScript实现手写板签名并上传到服务器
初九之潜龙勿用
100 1
源码宝
|
6月前
|
存储 开发框架 前端开发
C#开发的全套成熟的LIS系统源码JavaScript+SQLserver 2012区域云LIS系统源码
医院云LIS系统是一套成熟的实验室信息管理系统，目前已在多家三级级医院应用，并不断更新。云LIS系统是为病人为中心、以业务处理为基础、以提高检验科室管理水平和工作效率为目标，将医学检验、科室管理和财务统计等检验科室/实验室所有工作进行整合，全面改善检验科室/实验室的工作现状。
源码宝
56 0
源码世界
|
6月前
|
开发框架 前端开发 JavaScript
采用C#.Net +JavaScript 开发的云LIS系统源码 二级医院应用案例有演示
技术架构：Asp.NET CORE 3.1 MVC + SQLserver + Redis等 开发语言：C# 6.0、JavaScript 前端框架：JQuery、EasyUI、Bootstrap 后端框架：MVC、SQLSugar等 数 据 库：SQLserver 2012
源码世界
61 0
高端源码库
|
开发框架 前端开发 JavaScript
医院检验信息系统LIS源码，开发语言：C# 6.0、JavaScript
云LIS系统是一种医疗实验室信息管理系统，提供全面的实验室信息管理解决方案。它的主要功能包括样本管理、检测流程管理、报告管理、质量控制、数据分析和仪器管理等。技术架构：Asp.NET CORE 3.1 MVC + SQLserver + Redis等 开发语言：C# 6.0、JavaScript 前端框架：JQuery、EasyUI、Bootstrap 后端框架：MVC、SQLSugar等 数 据 库：SQLserver 2012
高端源码库
129 0
向善的灯
|
存储 JavaScript 前端开发
【JavaScript框架封装】使用原生js封装的类似于JQuery的框架及核心源码分享（多文件版本）
版权声明：本文为博主原创文章，未经博主允许不得转载。更多学习资料请访问我爱科技论坛:www.52tech.tech https://blog.csdn.net/m0_37981569/article/details/81156261 ...
向善的灯
1742 0
嗯哼9925
|
JavaScript 前端开发 算法
c#和javascript分别轻松实现计算24点
嗯哼9925
1565 0
嗯哼9925
|
JavaScript 前端开发 C#
c#和javascript轻松实现计算24点改进版
嗯哼9925
1460 0
嗯哼9925
|
JavaScript 前端开发 C#
总结c#和javascript中常见的相关的"空"
嗯哼9925
1207 0
橘子红了呐
|
前端开发 JavaScript 内存技术
基于uploadify.js实现多文件上传和上传进度条的显示
橘子红了呐
822 0

热门文章

最新文章

  • 1
    C#中读取二维数组每位的长度
  • 2
    如何使用 AllowPartiallyTrustedCallers 属性来调用具有一个强名称从 Web 页通过使用 Visual C#.NET、 Visual C# 2005年或更高版本的程序集
  • 3
    简单干净的C#方法设计案例：SFCUI.AjaxLoadPage()之二
  • 4
    Silverlight C# 游戏开发：自定义鼠标（一）
  • 5
    C#中的结构与类
  • 6
    乐在其中设计模式(C#) - 解释器模式(Interpreter Pattern)
  • 7
    C#并行编程-PLINQ:声明式数据并行
  • 8
    编写高质量代码改善C#程序的157个建议[4-9]
  • 9
    C# 基础知识系列- 14 IO篇 文件的操作
  • 10
    C#学习笔记——抽象类和抽象方法
  • 1
    事件触发、事件捕获与事件冒泡（js的问题）
    34
  • 2
    理解DOM树的加载过程（js的问题）
    27
  • 3
    为实例方法创建错误的引用（js的问题）
    31
  • 4
    高阶函数（js的问题）
    26
  • 5
    在浏览器中存储数组和对象（js的问题）
    64
  • 6
    为 setTimeout 或 setInterval 提供一个字符串作为第一个参数（js的问题）
    32
  • 7
    为实例方法创建错误的引用(js的问题)
    25
  • 8
    JS使用循环求100内奇数之和
    47
  • 9
    JS require 与 import 的区别
    164
  • 10
    JavaScript 中如何检测一个变量是一个 String 类型？
    60

    • 相关课程

    更多
  • JavaScript入门与实战
  • JavaScript 自学手册文档教程
  • jQuery开发教程
  • HTML5 新特性教程

    • 相关电子书

    更多
  • JavaScript异步编程
  • Delivering Javascript to World
  • 编程语言如何演化-以JS的private为例

    • 相关实验场景

    更多
  • Html5和Webpack2：Webpack5打包JS和样式表
  • HTML及前端框架
    • 下一篇
    阿里云无影云电脑免费试用，最长可试用3个月