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 "";
}
简单的使用就这么多,当然这个插件还有诸多的功能，有需要的可以再研究下。
