下面是有关"ASP.NET批量多选文件上传解决方案"的完整攻略：

1. 问题描述

在一些业务场景下，我们需要一次性批量上传多个文件，但是默认情况下ASP.NET并不支持批量上传，需要使用特定的解决方案来实现此功能。

2. 解决方案

2.1 通过Html5的input元素type属性为file来实现多选文件上传。

2.2 使用第三方文件上传插件

在ASP.NET平台上，比较常用的上传插件有 Fine Uploader和Uploadify，这些插件可以方便地实现文件上传功能，同时也支持多文件上传。

3. 实现方法

3.1 使用Html5的多选文件上传

在ASP.NET平台上，可以使用Html5的多选文件上传来实现批量上传功能，具体步骤如下：

1）在页面中添加多选文件上传控件

<input id="fileInput" type="file" multiple>

2）在页面中添加上传按钮，用于触发文件上传事件

<button id="uploadButton">上传</button>

3）在JavaScript代码中添加文件上传事件的监听器

$(document).ready(function () {
    $('#uploadButton').click(function () {
        var files = $('#fileInput').get(0).files;
        if (files.length > 0) {
            var formData = new FormData();
            for (var i = 0; i < files.length; i++) {
                formData.append('file' + i, files[i]);
            }
            $.ajax({
                url: '/FileUploadHandler.ashx',
                type: 'POST',
                data: formData,
                processData: false,
                contentType: false,
                success: function (result) {
                    alert(result);
                },
                error: function () {
                    alert("上传失败！");
                }
            });
        }
    });
});

上述代码中，我们通过监听上传按钮的点击事件，来获取用户选择的多个文件。然后使用FormData对象来将这些文件打包成一个表单数据，然后使用ajax的方式将表单数据发送到服务器端。

3.2 使用Fine Uploader实现多文件上传

Fine Uploader是一款功能强大的文件上传插件，它支持多文件上传、断点续传、水印添加以及图片缩放功能等。使用Fine Uploader来实现多文件上传也非常简单，具体步骤如下：

1）在页面中引入Fine Uploader的JavaScript、Css文件。

<link href="lib/fine-uploader/fine-uploader-new.css" rel="stylesheet">
<script type="text/javascript" src="lib/fine-uploader/fine-uploader.js"></script>

2）在页面中添加上传控件

<div id="fine-uploader"></div>

3）在JavaScript代码中配置Fine Uploader

$(document).ready(function () {
    var uploader = new qq.FineUploader({
        element: $("#fine-uploader")[0],
        request: {
            endpoint: '/FileUploadHandler.ashx'
        },
        multiple: true,
        autoUpload: false,
        validation: {
            allowedExtensions: ['jpeg', 'jpg', 'gif', 'png'],
            sizeLimit: 10 * 1024 * 1024 // 10 MegaBytes
        },
        callbacks: {
            onComplete: function (id, fileName, responseJSON) {
                if (responseJSON.success) {
                    alert('上传成功！');
                } else {
                    alert('上传失败！');
                }
            }
        }
    });

    $('#uploadButton').click(function () {
        uploader.uploadStoredFiles();
    });
});

4. 示例说明

这里提供两个示例代码，一个是基于Html5多选文件上传的示例，另一个是基于Fine Uploader的示例：

4.1 基于Html5多选文件上传

<!DOCTYPE html>
<html>
<head>
    <title>Html5 Multi Files Upload</title>
    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
</head>
<body>
    <div class="container">
        <h1>Html5 Multi Files Upload</h1>
        <hr>
        <input id="fileInput" type="file" multiple><br/><br/>
        <button id="uploadButton" class="btn btn-primary">上传</button>
    </div>

    <script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
    <script>
        $(document).ready(function () {
            $('#uploadButton').click(function () {
                var files = $('#fileInput').get(0).files;
                if (files.length > 0) {
                    var formData = new FormData();
                    for (var i = 0; i < files.length; i++) {
                        formData.append('file' + i, files[i]);
                    }
                    $.ajax({
                        url: '/FileUploadHandler.ashx',
                        type: 'POST',
                        data: formData,
                        processData: false,
                        contentType: false,
                        success: function (result) {
                            alert(result);
                        },
                        error: function () {
                            alert("上传失败！");
                        }
                    });
                }
            });
        });
    </script>
</body>
</html>

4.2 基于Fine Uploader的多文件上传

<!DOCTYPE html>
<html>
<head>
    <title>Fine Uploader Demo</title>
    <link href="lib/fine-uploader/fine-uploader-new.css" rel="stylesheet">
</head>
<body>
    <div id="fine-uploader"></div>
    <button id="uploadButton">上传</button>

    <script src="lib/fine-uploader/fine-uploader.js"></script>
    <script>
        $(document).ready(function () {
            var uploader = new qq.FineUploader({
                element: $("#fine-uploader")[0],
                request: {
                    endpoint: '/FileUploadHandler.ashx'
                },
                multiple: true,
                autoUpload:false,
                validation: {
                    allowedExtensions: ['jpeg', 'jpg', 'gif', 'png'],
                    sizeLimit: 10 * 1024 * 1024 // 10 MegaBytes
                },
                callbacks: {
                    onComplete: function (id, fileName, responseJSON) {
                        if(responseJSON.success){
                            alert('上传成功！');
                        }else{
                            alert('上传失败！');
                        }
                    }
                }
            });

            $('#uploadButton').click(function () {
                uploader.uploadStoredFiles();
            });
        });
    </script>
</body>
</html>

到这里就结束啦！希望这篇攻略能够帮助到你！

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：asp.net批量多选文件上传解决方案 - Python技术站

asp.net批量多选文件上传解决方案