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 这个方法就是弄一下文件的类型否则渲染出来的格式是这样的

 

 分好类型后可以优雅的展示上传过的文件多媒体文件可以和谐的预览