Krajee 文件上传

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");
    });