jQuery File Upload是一款比較流行的文件上傳的jQuery插件逗爹，在GitHub上有將近3萬Star. 最近在一個ASP.NET MVC項目用到文件上傳功能亡嫌，所以把使用中的一些經(jīng)驗(yàn)在這里記錄一下。
這款插件的文檔和Demo還是比較詳細(xì)的掘而，所以基本功能和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',//注意這里如果返回數(shù)據(jù)不是Json,可以去掉該屬性
done: function (e, data) { //這是上傳完成后的回調(diào)函數(shù)
$.each(data.result.files, function (index, file) {
$('<p/>').text(file.name).appendTo('#files');
});
},
progressall: function (e, data) { //這里是用于進(jìn)度條顯示
var progress = parseInt(data.loaded / data.total * 100, 10);
$('#progress .progress-bar').css(
'width',
progress + '%'
);
}
});
后端C#代碼:
我這里是只處理單上傳文件袍睡，你可以根據(jù)需要自行更改
[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 "";
}
簡單的使用就這么多,當(dāng)然這個插件還有諸多的功能知染，有需要的可以再研究下。
