C#实现文件上传以及多文件上传功能

下面是详细讲解“C#实现文件上传以及多文件上传功能”的完整攻略，包含以下内容：

前端页面设计，包括上传按钮、进度条等控件的布局与设置；
后端控制器的编写，包括接受文件上传的代码逻辑、对上传文件进行处理的方法等；
多文件上传功能的实现方法，在实现单文件上传功能的基础上进行扩展。

前端页面设计

前端页面作为文件上传功能的入口，需要设计上传按钮、进度条等控件，并将这些控件与后端控制器进行关联。

单文件上传页面示例

以下是一个简单的单文件上传页面示例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>文件上传</title>
    <script type="text/javascript" src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
    <h2>单文件上传</h2>
    <form method="post" enctype="multipart/form-data">
        <input type="file" name="fileInput"/>
        <input type="button" value="上传" onclick="uploadFile()"/>
        <div style="width: 200px;height: 20px;border: 1px solid gray;margin: 5px 0px;">
            <div id="progressBar" style="height: 100%;background-color: #09f;"></div>
        </div>
    </form>
    <script type="text/javascript">
        function uploadFile() {
            var formData = new FormData();
            formData.append("file", $("[name='fileInput']")[0].files[0]);
            $.ajax({
                url: "/Upload/UploadFile",
                type: "post",
                data: formData,
                processData: false,
                contentType: false,
                xhr: function () {
                    var xhr = $.ajaxSettings.xhr();
                    if (xhr.upload) {
                        xhr.upload.addEventListener("progress", function (event) {
                            var percent = event.loaded / event.total;
                            var progressBar = $("#progressBar");
                            progressBar.width(percent * progressBar.parent().width());
                        }, false);
                    }
                    return xhr;
                },
                success: function (data) {
                    alert(data);
                }
            });
        }
    </script>
</body>
</html>

多文件上传页面示例

以下是一个简单的多文件上传页面示例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>文件上传</title>
    <script type="text/javascript" src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
    <h2>多文件上传</h2>
    <form method="post" enctype="multipart/form-data">
        <input type="file" name="fileInput" multiple="multiple"/>
        <input type="button" value="上传" onclick="uploadFile()"/>
        <div style="width: 200px;height: 20px;border: 1px solid gray;margin: 5px 0px;">
            <div id="progressBar" style="height: 100%;background-color: #09f;"></div>
        </div>
    </form>
    <script type="text/javascript">
        function uploadFile() {
            var formData = new FormData();
            var fileInputs = $("[name='fileInput']")[0].files;
            for (var i = 0; i < fileInputs.length; i++) {
                formData.append("files[]", fileInputs[i]);
            }
            $.ajax({
                url: "/Upload/UploadFiles",
                type: "post",
                data: formData,
                processData: false,
                contentType: false,
                xhr: function () {
                    var xhr = $.ajaxSettings.xhr();
                    if (xhr.upload) {
                        xhr.upload.addEventListener("progress", function (event) {
                            var percent = event.loaded / event.total;
                            var progressBar = $("#progressBar");
                            progressBar.width(percent * progressBar.parent().width());
                        }, false);
                    }
                    return xhr;
                },
                success: function (data) {
                    alert(data);
                }
            });
        }
    </script>
</body>
</html>

后端控制器的编写

在前端页面设计完成之后，需要编写后端控制器来接受前端传递过来的文件。

单文件上传后端控制器示例

以下是一个简单的单文件上传后端控制器示例：

public ActionResult UploadFile(HttpPostedFileBase file)
{
    if (file != null)
    {
        string filePath = Server.MapPath("~/Upload/");
        if (!Directory.Exists(filePath))
        {
            Directory.CreateDirectory(filePath);
        }
        file.SaveAs(filePath + file.FileName);
        return Content("文件上传成功！");
    }
    return Content("文件上传失败！");
}

多文件上传后端控制器示例

以下是一个简单的多文件上传后端控制器示例：

public ActionResult UploadFiles(HttpPostedFileBase[] files)
{
    if (files != null && files.Length > 0)
    {
        string filePath = Server.MapPath("~/Upload/");
        if (!Directory.Exists(filePath))
        {
            Directory.CreateDirectory(filePath);
        }
        foreach (var file in files)
        {
            file.SaveAs(filePath + file.FileName);
        }
        return Content("文件上传成功！");
    }
    return Content("文件上传失败！");
}

多文件上传功能的实现方法

多文件上传功能是在单文件上传功能的基础上进行扩展得来的，其主要区别在于前端页面传递多个文件以及后端控制器接受多个文件。

前端扩展

前端需要将单个文件上传按钮改为多个文件上传按钮，并对应修改js中的代码逻辑。

<input type="file" name="fileInput" multiple="multiple"/>

var fileInputs = $("[name='fileInput']")[0].files;
for (var i = 0; i < fileInputs.length; i++) {
    formData.append("files[]", fileInputs[i]);
}

后端扩展

后端需要将单个文件上传控制器改为多文件上传控制器，并且将接受单个文件的参数改为接受多个文件的数组。

public ActionResult UploadFiles(HttpPostedFileBase[] files)
{
    // ...
}

到这里，C#实现文件上传以及多文件上传功能的完整攻略就讲解完毕了。相信经过上述讲解，大家已经可以顺利完成自己项目中的文件上传功能了。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：C#实现文件上传以及多文件上传功能 - Python技术站