http://plugins.krajee.com/file-input/demo#ajax-uploads 插件官网
项目要个好看点的上传控件,于是搜到了这个。
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},现在就是俩参数,
所以后台可以这么写
1
2
3
4
5
|
public
string
FileUpLoad(
string
userid,
string
filename =
""
)
{
Request.Files;
*****
}
|
后面的fileuploaded明显就是上传完后的处理了,主要的东西都在第二个参数里。
除了fileuploaded还有一些其他的方法,看官网就好
$("#input-id").fileinput({
uploadUrl: "../resource/upload", // server upload action
language: 'zh',
showUpload: false,
showPreview: false,
browseClass: "btn btn-primary",
maxFileCount:1,
allowedFileExtensions: ["txt"],
uploadAsync: false,
uploadExtraData:function(){
return {
sourcetype:$("#sourcetype").val()
};
}
}).on("filebatchselected",function(event,data){
$("#input-id").fileinput("upload");
console.info(data,"data");
});