bootstrap-fileinput组件上传

环境至少需要:

fileinput.min.js

fileinput.min.css

选用：

zh.js

demo:

   $("#uploadFile").fileinput({

showUpload:
true,
//是否显示上传按钮

showCaption:
true,
//是否显示标题,
    showCancel:false,
       showPreview: true,      
//是否预览
       allowedPreviewTypes:false,
       maxFilesNum :5,
       elErrorContainer: '#kartik-file-errors',
       uploadUrl: '/gqQuotation/imageUpload',  //上传的地址
       previewFileIconSettings: {                           //预览时,图标显示的样式
       
'docx': '<i class="fa fa-file-word-o text-primary"></i>', 
       
'xlsx': '<i class="fa fa-file-excel-o text-success"></i>', 
       
'pptx': '<i class="fa fa-file-powerpoint-o text-danger"></i>', 
       
'pdf': '<i class="fa fa-file-pdf-o text-danger"></i>', 
       
'zip': '<i class="fa fa-file-archive-o text-muted"></i>', 
       
'sql': '<i class="fa fa-file-word-o text-primary"></i>', 
       
}, 

       uploadExtraData:function (previewId, index) {    
       
//注意这里，传参是json格式,后台直接使用对象属性接收，比如employeeCode，我在RatingQuery 里面直接定义了employeeCode属性，然后最重要的也是
       
//最容易忽略的，传递多个参数时，不要忘记里面大括号{}后面的分号，这里可以直接return {a:b}; 或者{a:b}都可以，但必须要有大括号包裹
       
                       var data = {
       
                        quotationNo : $("#quotationNo").val()
       
                           
       
                       };
       
                       return data;
       },
       layoutTemplates :{
           // actionDelete:'', //去除上传预览的缩略图中的删除图标
           actionUpload:'',//去除上传预览缩略图中的上传图片；
           actionZoom:''   //去除上传预览缩略图中的查看详情预览的缩略图标。
       }
   });

   $("#uploadFile").on("fileloaded", function(event, file,previewId,index,reader) {  //加载文件是触发
    var sizeMB=file.size/1000000;

            if(sizeMB>20){

            dialog.confirm({

            content:"文件名： '"+file.name +"'  大小超过20MB， 是否繼續上傳？" ,

            onCanceleBefore:function(){

            $("#"+previewId).find(".kv-file-remove").click();

            }

            })

            }
   });

官网地址：http://plugins.krajee.com/file-input