使用bootstrap-fileinput上傳

標籤：

項目要個好看點的上傳控制項，於是搜到了這個。

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還有一些其他的方法，看官網就好　

 

使用bootstrap-fileinput上傳