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>', 
        }, 

maxFileSize : 1000, //上传文件最大的尺寸

maxFilesNum : 1, //上传最大的文件数量

       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