asp.net文件上传带进度条实现案例（多种风格）

针对“asp.net文件上传带进度条实现案例（多种风格）”这个话题，以下是一个完整的攻略。

1. 背景介绍

在很多web应用程序中，都需要用户上传文件的功能。而对于大文件或者网络不稳定的情况下，上传进度条的需求就非常迫切了。要满足这个需求，可以使用一些第三方的插件或者框架，比如jQuery-File-Upload或者FineUploader等。但这些插件或者框架可能会比较臃肿，使用起来也比较麻烦，而且不一定满足我们的特定需求。因此自己编写一个简洁、易用、可定制的文件上传插件，就变得很有必要了。而ASP.NET框架提供了非常好用的HttpFileUpload类和相关控件，可以让我们很轻松地实现带进度条的文件上传。

2. 步骤分解

2.1. HTML代码

要实现带进度条的文件上传功能，首先需要在HTML页面中添加文件上传控件和进度条控件。比如下面这段HTML代码，就添加了一个文件上传按钮和一个进度条：

<form id="uploadForm">
  <input type="file" id="uploadFile" />
  <button type="submit" id="uploadBtn">上传文件</button>
</form>
<div id="progBar"></div>

2.2. JavaScript代码

接下来需要为上传按钮添加事件处理程序，以便在用户点击按钮时触发文件上传操作。在文件上传过程中，还需要不断地更新进度条的状态，以便让用户看到当前上传的进度。以下是一份使用jQuery实现的JavaScript代码示例：

$(document).ready(function () {
  $('#uploadBtn').click(function (e) {
    e.preventDefault();
    var formData = new FormData($('#uploadForm')[0]);

    $.ajax({
      url: '/upload',
      type: 'POST',
      data: formData,
      cache: false,
      contentType: false,
      processData: false,
      xhr: function () {
        var xhr = $.ajaxSettings.xhr();
        xhr.upload.onprogress = function (e) {
          if (e.lengthComputable) {
            var progress = Math.round(e.loaded / e.total * 100);
            $('#progBar').html(progress + '%');
          }
        };
        return xhr;
      },
      success: function (data) {
        alert('上传成功！');
      },
      error: function () {
        alert('上传失败！');
      }
    });
  });
});

上述代码中，使用了jQuery.ajax()方法上传文件，并且通过xhr.upload.onprogress事件实时更新进度条的状态。

2.3. 服务器端代码

最后还需要在服务器端实现文件上传的逻辑。如果使用ASP.NET框架，可以使用HttpFileUpload类来实现文件上传功能。以下是一个简单的服务器端代码示例：

[HttpPost]
public ActionResult UploadFile()
{
    if (Request.Files.Count > 0)
    {
        HttpPostedFileBase file = Request.Files[0];
        string fileName = Path.GetFileName(file.FileName);
        string path = Path.Combine(Server.MapPath("~/App_Data"), fileName);

        file.SaveAs(path);
        return Json(new { success = true });
    }
    else
    {
        return Json(new { success = false });
    }
}

在上述代码中，HttpFileUpload类的SaveAs()方法用于将上传的文件保存到服务器磁盘中。在上传完成后，使用Json()方法返回上传结果，以便前端JavaScript代码能够得到上传结果。

3. 示例说明

以上是一个简单的带进度条的文件上传功能的完整实现。以下两个示例将进一步展示如何对这个实现进行优化。

3.1. 示例一：使用WebApi方式实现文件上传

以上代码中使用了一个简单的MVC Controller来实现文件上传功能。实际上我们也可以使用ASP.NET WebApi框架，将文件上传功能封装成一个RESTful的服务，易于管理和维护。以下是一个使用WebApi实现文件上传的示例：

public class UploadController : ApiController
{
    public async Task<HttpResponseMessage> Post()
    {
        HttpResponseMessage response = new HttpResponseMessage();
        var provider = new MultipartMemoryStreamProvider();

        await Request.Content.ReadAsMultipartAsync(provider);

        foreach (var file in provider.Contents)
        {
            var fileName = file.Headers.ContentDisposition.FileName.Trim('\"');
            var buffer = await file.ReadAsByteArrayAsync();
            File.WriteAllBytes(@"d:/" + fileName, buffer);
        }

        response.StatusCode = HttpStatusCode.OK;
        return response;
    }
}

上述代码中，将文件上传逻辑封装成了一个WebApi的服务，并且使用了异步方法来优化性能。

3.2. 示例二：美化进度条

另外一个示例是对进度条进行美化。在实际应用中，如果进度条的外观能够更加美观、简洁、有条理，用户就更容易满意了。以下是一个使用Bootstrap框架实现的进度条美化示例：

<div class="progress">
  <div id="progBar" class="progress-bar progress-bar-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100"></div>
</div>

$('#progBar').css('width', progress + '%').attr('aria-valuenow', progress);

在上述代码中，使用Bootstrap的progress组件来美化进度条的样式，并且使用jQuery代码动态更新进度条的外观。

4. 总结

带进度条的文件上传功能不仅可以提升用户体验，还可以让开发人员更好地掌握文件上传的进度和状态。在实际应用中，我们可以根据具体需求对上传功能进行定制化开发，比如使用异步方法、使用WebApi等等。