ASP.NET MVC中使用Jquery File Upload

jQuery File Upload是一款比较流行的文件上传的jQuery插件，在GitHub上有将近3万Star. 最近在一个ASP.NET MVC项目用到文件上传功能，所以把使用中的一些经验在这里记录一下。

这款插件的文档和Demo还是比较详细的，所以基本功能和API我这里就不讲了，主要说下如何可以快速的使用这款插件。

安装

使用之前需要加载如下的js文件

• jquey-1.8.3.min.js
• jquery-ui-widget.js
• jquery.iframe-transport.js
• jquery.fileupload.js
  可以在这里下载js文件

简单示例

在前端页面中添加Html代码

  <span class="btn btn-success fileinput-button">
        <i class="glyphicon glyphicon-plus"></i>
        <span>Select files...</span>
        <!-- The file input field used as target for the file upload widget -->
        <input id="fileupload" type="file" name="files[]" multiple>
    </span>
    <br>
    <br>
    <!-- The global progress bar -->
    <div id="progress" class="progress">
        <div class="progress-bar progress-bar-success"></div>
    </div>

添加如下的Js代码:

 $('#fileupload').fileupload({
        url: “/UploadFile”,
        dataType: 'json',//注意这里如果返回数据不是Json,可以去掉该属性
        done: function (e, data) { //这是上传完成后的回调函数
            $.each(data.result.files, function (index, file) {
                $('<p/>').text(file.name).appendTo('#files');
            });
        },
        progressall: function (e, data) { //这里是用于进度条显示
            var progress = parseInt(data.loaded / data.total * 100, 10);
            $('#progress .progress-bar').css(
                'width',
                progress + '%'
            );
        }
    });

后端C#代码:
我这里是只处理单上传文件，你可以根据需要自行更改

  [HttpPost]
        public string UploadFile()
        {
            if (Request.Files.Count > 0)
            {
                var file = Request.Files[0];
                var fileName = Path.GetFileName(file.FileName);
                var folderPath = Path.Combine(Server.MapPath("~/Images/"), CommonHelper.GetUserName());
                file.SaveAs(path);
                return "上传成功";
            }
            return "";
        }

简单的使用就这么多,当然这个插件还有诸多的功能，有需要的可以再研究下。