bootstrap inputfile 使用-上傳，回顯

近期用bootstrap 做前端的上傳，功能涉及到上傳時就是召網上的教程隨便弄一搜一大把，但是做到修改頁面時候不知道頁面該如何回顯，折騰了一陣子才完成遂記錄下來希望能給看到的小伙伴有點啟發吧。

首先是上傳的功能

上傳要求支持圖片和各種其他種類的文件，效果基本 如下了，點擊上傳，依次就是調后台接口把文件送上，返回一個文件的路徑，可以直接請求的服務器地址。

 

 

 

html代碼如下：基本的框子吧。

<div class="file-loading">
     <input id="fileinput-demo-0"  name="file" type="file" multiple>
</div>

配套的js:

var taskFiles=[];
    $(document).ready(function () {
        //上傳文件
        $("#fileinput-demo-1").fileinput({
            language: 'zh', //設置語言
            uploadUrl:ctx + "api/common/upload", //上傳的地址
            // allowedFileExtensions: ['jpg', 'gif', 'png'],//接收的文件后綴
            // uploadExtraData:{"id": 1, "fileName":'123.mp3'},
            uploadAsync: true, //默認異步上傳
            showUpload:true, //是否顯示上傳按鈕
            showRemove :false, //顯示移除按鈕
            showPreview :true, //是否顯示預覽
            showCaption:false,//是否顯示標題
            browseClass:"btn btn-primary", //按鈕樣式    
            dropZoneEnabled: false,//是否顯示拖拽區域
            // minImageWidth: 50, //圖片的最小寬度
            // minImageHeight: 50,//圖片的最小高度
            // maxImageWidth: 1000,//圖片的最大寬度
            // maxImageHeight: 1000,//圖片的最大高度
            //maxFileSize:0,//單位為kb，如果為0表示不限制文件大小
            //minFileCount: 0,
            maxFileCount:10, //表示允許同時上傳的最大文件個數
            enctype:'multipart/form-data',
            validateInitialCount:true
            // previewSettings: {//圖片顯示
            //     image: {width: "80px", height: "60px"},
            // }
            // previewFileIcon: "<iclass='glyphicon glyphicon-king'></i>",
            // msgFilesTooMany: "選擇上傳的文件數量({n}) 超過允許的最大數值{m}！",
        }).on("fileuploaded", function (event, data, previewId, index){
　　　　　　　// 這里上傳會自動調用上面配置的上傳地址，聲場的previewId就是圖片的元素id,
            // $('#' + previewId).attr('fileid', data.response.fileName);
            var file={
                previewId:previewId,
                fileName:data.response.fileName
            };
            taskFiles.push(file);//將每一個上傳成功的文件放到初始的一個數組里，
            console.log(taskFiles);
        }).on('filesuccessremove', function (event, previewId, extra) {
            //在移除事件里取出所需數據，並執行相應的刪除指令，從數組內刪除，可以調服務器接口做服務端刪除。
            console.log(previewId)
            for(var i=0;i<taskFiles.length;i++){
                if(taskFiles[i].previewId==previewId){
                    taskFiles.splice(i,1);
                }
            }
            console.log(taskFiles);
        });

我們上傳三個文件，對用控制台打印出三個文件信息，

 

下面看一下修改頁面的回顯操作，html 增加了一個 隱藏的元素可以不考慮我的代碼里有這里不是必須的。

<div class="form-group">
            <label class="col-sm-3 control-label">任務文件：</label>
            <div class="col-sm-8">
                <div class="file-loading">
                    <input id="fileinput-demo-1"  name="file" type="file" multiple>

                </div>
            </div>
        </div>
        <input type="hidden" name="filePaths" id="carousel_imgs_hidden"/>

js如下

    var carouselImgs = [] ;

    var fileNames="xxx.jpg,xxx.mp4";
    // 獲取協會圖片介紹getInitFiles(taskInfo.taskFiles)
    var initialPreviews = (fileNames ? fileNames.split(","):[] );
    var initialPreview = [] ;
    var initialPreviewConfig = [] ;

    for (var i = 0; i < initialPreviews.length; i++) {
        var fileName = initialPreviews[i] ;
        if (fileName != null && fileName !=''){
            var delImg = new Object() ;
            delImg = generFilDel(fileName);
            initialPreview.push(fileName) ;
            initialPreviewConfig.push(delImg) ;
            console.log(initialPreviewConfig);
            carouselImgs.push(fileName) ;
        }
    }
    $("#carousel_imgs_hidden").val(carouselImgs) ;
    // 協會圖片介紹
    $("#fileinput-demo-1").fileinput({
        uploadUrl: "/api/common/upload",
        language: 'zh',
        // allowedFileExtensions: ['image', 'html', 'text', 'video', 'audio', 'flash', 'object','other'],
        //dropZoneEnabled:false,
        showClose:false,
        showCaption: false,
        maxFileCount:10,
        showRemove:false,
        uploadAsync: true,
        enctype: 'multipart/form-data',
        validateInitialCount:true,
        msgFilesTooMany: "選擇上傳的文件數量({n}) 超過允許的最大數值{m}！",
        fileActionSettings:{
            showRemove: true,
            showUpload: false,
            showDownload: true,
        },
        // previewSettings: {
        //     image: {width: "200px", height: "160px"},
        // },

        // allowedPreviewTypes: [];
        previewFileType: ['image', 'html', 'text', 'video', 'audio', 'flash'],
        allowedPreviewTypes: ['image','video', 'audio'],
        overwriteInitial: false,
        initialPreviewAsData: true,
        initialPreviewFileType: 'image', //'html', 'text', 'video', 'audio', 'flash', 'object'],
        initialPreviewShowDelete:true,
        initialPreview:initialPreview,
        initialPreviewConfig:initialPreviewConfig
    // }).on('filepredelete', function(event, key) {
    //     console.log('Key = ' + key);
    }).on("fileuploaded", function(event, data, previewId, index) {
        var fileName = data.response.fileName;
        $("#"+previewId).attr("fileName", fileName) ;
        var carouselImgs=$("#carousel_imgs_hidden").val().split(",");
        // var hiddenFilePaths=$("#carousel_imgs_hidden").val();
        // carouselImgs =hiddenFilePaths?[]:hiddenFilePaths.split(",");
        carouselImgs.push(fileName) ;
        $("#carousel_imgs_hidden").val(carouselImgs) ;
    }).on("filesuccessremove", function(event, previewId, extra) {
        console.log("刪除文件");
        var fileName = $("#"+previewId).attr("fileName");
        var carouselImgs=$("#carousel_imgs_hidden").val().split(",");
        // carouselImgs =hiddenFilePaths?[]:hiddenFilePaths.split(",");
        var newCarouselImgs = [] ;
        for (var i = 0; i < carouselImgs.length; i++) {
            if (carouselImgs[i] != fileName)
                newCarouselImgs.push(carouselImgs[i]);
        }
        carouselImgs = newCarouselImgs ;
        $("#carousel_imgs_hidden").val(carouselImgs) ;
    }).on('filepredelete', function(event, key, jqXHR, data) {
        console.log('Key = ' + key);
        removeHidden(key);
    });
    //$("#fileinput-demo-1").fileinput('_initFileActions');//這行代碼就是調用綁定刪除事件的
    function removeHidden(fileName){
        var hiddenFilePaths=$("#carousel_imgs_hidden").val().split(",");
        for (var i = 0; i < hiddenFilePaths.length; i++) {
            if (hiddenFilePaths[i] == fileName){
                hiddenFilePaths.splice(i,1);
                break;
            }
        }
        console.log(hiddenFilePaths);
        $("#carousel_imgs_hidden").val(hiddenFilePaths);
    }

function generFilDel(fileName){
   var o=new Object();
   o.caption = fileName ;
   o.url = "/api/common/del";
   o.key = fileName;

   if(fileName==null||fileName.indexOf(".")==-1){
      //return {"type":null,"fileType":null};
      o.type="image";
      o.filetype="image/"+fileTyp;
      return o;
   }


   var fileTyp=fileName.split(".")[1];

   if(["bmp", "gif", "jpg", "jpeg", "png"].join(",").indexOf(fileTyp) !=-1){
      o.type="image";
      o.filetype="image/"+fileTyp;
      return o;
   }
   if(["mp3"].join(",").indexOf(fileTyp) !=-1){
      o.type="audio";
      o.filetype="audio/"+fileTyp;
      return o;
   }
   if(["swf", "flv" , "mp4","wav", "wma", "wmv", "mid", "avi", "mpg",
       "rm", "rmvb"].join(",").indexOf(fileTyp) !=-1 ){
      o.type="video";
      o.filetype="video/"+fileTyp;
      return o;
   }
   return o;

}

var initialPreview = [] ;
var initialPreviewConfig = [] ; 這兩個屬性才是顯示的東西，

generFilDel 這個方法就是弄一下文件的類型否則渲染出來的格式是這樣的

 

 分好類型后可以優雅的展示上傳過的文件多媒體文件可以和諧的預覽