标签：
项目要个好看点的上传控件，于是搜到了这个。
git的地址是 https://github.com/kartik-v/bootstrap-fileinput
我用的版本还是432，现在又升了= =
我用的功能不多，而且当时用的时候很别扭。
最初我是在 anguler的repeat中使用
这么写的
<ol class="list-inline"> <li ng-repeat="item in data"> <input id="teamimgupa{{item.$id}}" type="file" class="file"/> </li> </ol>
然后初始化：
$.each($("input[id^=‘teamimgupa‘]"), function (index, item) {
$(item).fileinput({
autoReplace: true,
dropZoneEnabled: false,
uploadUrl: ‘@Url.Action("FileUpLoad", "Team", new { userid = Model.team.userid })‘,
showRemove: false,
maxFileCount: 1,
showPreview: false
})
});
代码不全了，本来还有个指令监听ng-repeat是否完毕，完毕后再初始化。问题就来了，初始化后，上传功能没问题，但是css全破了，我弄了半天，后来放弃了这种写法。
最后使用拼html的方式完成的。
$.each($scope.data.priresult, function (i, o) { imgresulthtml += ‘<li><input id="teamimgup‘ + imgcount + ‘" name="teamimgup‘ + imgcount + ‘" type="file" class="file" /></li>‘; }); $("#addbtngroup").before(imgresulthtml);
然后再初始化：
$.each($("input[id^=‘teamimgup‘]"), function (index, item) {
$(‘#‘ + item.id).fileinput({
autoReplace: true,
dropZoneEnabled: false,
uploadUrl: ‘@Url.Action("FileUpLoad", "Team", new { userid = Model.team.TeamID})‘,
language: ‘zh‘,
showRemove: false,
maxFileCount: 1,
browseClass: ‘btn btn-primary btn-docup‘,
showPreview: false,
uploadClass: ‘btn btn-default btn-docup‘,
allowedFileTypes: ["image"],
browseLabel: "上传图片",
uploadExtraData: function () {
return {
"filename": ****
};
}
}).on("fileuploaded", function (event, data, previewId, index) {
var response = data.response;
if (data.jqXHR.status == 200) {
********
}
});
});
属性的意义也挺好理解，我把预览去掉了（项目不需要），其实当时这个插件最吸引我的地方就是预览很好看！！！真的很好看。
uploadExtraData可以用来添加参数，我就加了个filename，再加上uploadUrl里面的new { userid = Model.team.TeamID}，现在就是俩参数，
所以后台可以这么写
public string FileUpLoad(string userid, string filename = "")
{
Request.Files;
*****
}
后面的fileuploaded明显就是上传完后的处理了，主要的东西都在第二个参数里。
除了fileuploaded还有一些其他的方法，看官网就好
标签：
原文地址：http://www.cnblogs.com/suzu/p/5666889.html
