Bootstrap FileInput 上传 中文 API 整理

Bootstrap FileInput 上传  中文 API 整理

上传插件有很多 但是公司用的就是 Bootstrap FileInput

自己就看了看  会用就行

 自己都不知道每个值是干嘛用的就问大佬 

总结一下

一、引入文件 2 <link href="../css/bootstrap.min.css"rel="stylesheet"> 3 <link href="../css/fileinput.css" media="all"rel="stylesheet" type="text/css" /> 4 <scriptsrc="../js/jquery-2.0.3.min.js"></script> 5 <script src="../js/fileinput.js"type="text/javascript"></script> 6 <script src="../js/bootstrap.min.js"type="text/javascript"></script> 7 二、初始化设置： 8 $("#uploadfile").fileinput({ 9 language: 'zh', //设置语言10 uploadUrl:"http://127.0.0.1/testDemo/fileupload/upload.do", //上传的地址11allowedFileExtensions: ['jpg', 'gif', 'png'],//接收的文件后缀12//uploadExtraData:{"id": 1, "fileName":'123.mp3'},13 uploadAsync: true, //默认异步上传14 showUpload:true, //是否显示上传按钮15 showRemove :true, //显示移除按钮16 showPreview :true, //是否显示预览17 showCaption:false,//是否显示标题18 browseClass:"btn btn-primary", //按钮样式19dropZoneEnabled: false,//是否显示拖拽区域20//minImageWidth: 50, //图片的最小宽度21//minImageHeight: 50,//图片的最小高度22//maxImageWidth: 1000,//图片的最大宽度23//maxImageHeight: 1000,//图片的最大高度24 //maxFileSize:0,//单位为kb，如果为0表示不限制文件大小25//minFileCount: 0,26 maxFileCount:10, //表示允许同时上传的最大文件个数27 enctype:'multipart/form-data',28validateInitialCount:true,29 previewFileIcon: "<iclass='glyphicon glyphicon-king'></i>",30msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}！",31}).on("fileuploaded", function (event, data, previewId, index){32  33 });

属性名属性类型描述说明 默认值language String                        多语言设置，使用时需提前引入\locales文件夹下对应的语言文件，中文zh，引入语言文件必须放在fileinput.js之后 'en'showCaptionBoolean 是否显示被选文件的简介 trueshowBrowseBoolean 是否显示浏览按钮 trueshowPreviewBoolean 是否显示预览区域 trueshowRemoveBoolean 是否显示移除按钮 true,showUploadBoolean 是否显示上传按钮 true,showCancel Boolean 是否显示取消按钮 true,showClose: Boolean 是否显示关闭按钮 trueshowUploadedThumbs Boolean   truebrowseOnZoneClick Boolean   falseautoReplace Boolean 是否自动替换当前图片，设置为true时，再次选择文件， 会将当前的文件替换掉。 falsegenerateFileId Object   nullpreviewClass String 添加预览按钮的类属性 ‘’captionClass String   ‘’frameClass String   'krajee-default'mainClass String   'file-caption-main'mainTemplate Object   nullpurifyHtml Boolean   truefileSizeGetter Object   nullinitialCaption String   ''initialPreview Array/Object   []initialPreviewDelimiter String   '*$$*'initialPreviewAsData Boolean   falseinitialPreviewFileType String   'image'initialPreviewConfig Array/Object   []initialPreviewThumbTags Array/Object   []previewThumbTags Object   {}initialPreviewShowDelete Boolean   trueremoveFromPreviewOnError Boolean   falsedeleteUrl String 删除图片时的请求路径 ''deleteExtraData Object 删除图片时额外传入的参数 {}overwriteInitial Boolean   truepreviewZoomButtonIcons Object   {prev: '<i class="glyphicon glyphicon-triangle-left"></i>',  next: '<i class="glyphicon glyphicon-triangle-right"></i>',  toggleheader: '<i class="glyphicon glyphicon-resize-vertical"></i>',  fullscreen: '<i class="glyphicon glyphicon-fullscreen"></i>',  borderless: '<i class="glyphicon glyphicon-resize-full"></i>',  close: '<i class="glyphicon glyphicon-remove"></i>'},previewZoomButtonClasses Object   {  prev: 'btn btn-navigate',  next: 'btn btn-navigate',  toggleheader: 'btn btn-default btn-header-toggle',  fullscreen: 'btn btn-default',  borderless: 'btn btn-default',  close: 'btn btn-default'},preferIconicPreview Boolrean   falsepreferIconicZoomPreview Boolrean   falseallowedPreviewTypes undefined   undefinedallowedPreviewMimeTypes Object   nullallowedFileTypes Object 接收的文件后缀，如['jpg', 'gif', 'png'],不填将不限制上传文件后缀类型 nullallowedFileExtensions Object   nulldefaultPreviewContent Object   nullcustomLayoutTags Object   {}customPreviewTags Object   {}previewFileIcon String   '<i class="glyphicon glyphicon-file"></i>'previewFileIconClass String   'file-other-icon'previewFileIconSettings Object   {}previewFileExtSettings Object   {}buttonLabelClass String   'hidden-xs'browseIcon String   '<i class="glyphicon glyphicon-folder-open"></i> 'browseClass String   'btn btn-primary'removeIcon String   '<i class="glyphicon glyphicon-trash"></i>'removeClass String   'btn btn-default'cancelIcon String   '<i class="glyphicon glyphicon-ban-circle"></i>'cancelClass String   'btn btn-default'uploadIcon String   '<i class="glyphicon glyphicon-upload"></i>'uploadClass String   'btn btn-default'uploadUrl String 上传文件路径 nulluploadAsync boolean 是否为异步上传 trueuploadExtraData   上传文件时额外传递的参数设置 {}zoomModalHeight number   480minImageWidth String 图片的最小宽度 nullminImageHeight String 图片的最小高度 nullmaxImageWidth String 图片的最大宽度 nullmaxImageHeight String 图片的最大高度 nullresizeImage boolean   falseresizePreference String   'width'resizeQuality number   0.92resizeDefaultImageType String   'image/jpeg'minFileSize number 单位为kb，上传文件的最小大小值 0maxFileSize number 单位为kb，如果为0表示不限制文件大小 0resizeDefaultImageType number   25600(25MB)minFileCount number 表示同时最小上传的文件个数 0maxFileCount number 表示允许同时上传的最大文件个数 0validateInitialCount boolean   falsemsgValidationErrorClass String   'text-danger'msgValidationErrorIcon String   '<i class="glyphicon glyphicon-exclamation-sign"></i> 'msgErrorClass String   'file-error-message'progressThumbClass String   "progress-bar progress-bar-success progress-bar-striped active"rogressClass String   "progress-bar progress-bar-success progress-bar-striped active"progressCompleteClass String   "progress-bar progress-bar-success"progressErrorClass String   "progress-bar progress-bar-danger"progressUploadThreshold number   99previewFileType String 预览文件类型,内置['image', 'html', 'text', 'video', 'audio', 'flash', 'object',‘other‘]等格式 'image'elCaptionContainer String   nullelCaptionText String 设置标题栏提示信息 nullelPreviewContainer String   nullelPreviewImage String   nullelPreviewStatus String   nullelErrorContainer String   nullerrorCloseButton String   '<span class="close kv-error-close">×</span>'slugCallback String   nulldropZoneEnabled boolean 是否显示拖拽区域 truedropZoneTitleClass String 拖拽区域类属性设置 'file-drop-zone-title'fileActionSettings Object 设置预览图片的显示样式 {    showRemove: true,    showUpload: false,    showZoom: true,    showDrag: true,    removeIcon: '<i class="glyphicon glyphicon-trash text-danger"></i>',    removeClass: 'btn btn-xs btn-default',    removeTitle: 'Remove file',    uploadIcon: '<i class="glyphicon glyphicon-upload text-info"></i>',    uploadClass: 'btn btn-xs btn-default',    uploadTitle: 'Upload file',    zoomIcon: '<i class="glyphicon glyphicon-zoom-in"></i>',    zoomClass: 'btn btn-xs btn-default',    zoomTitle: 'View Details',    dragIcon: '<i class="glyphicon glyphicon-menu-hamburger"></i>',    dragClass: 'text-info',    dragTitle: 'Move / Rearrange',    dragSettings: {},    indicatorNew: '<i class="glyphicon glyphicon-hand-down text-waing"></i>',    indicatorSuccess: '<i class="glyphicon glyphicon-ok-sign text-success"></i>',    indicatorError: '<i class="glyphicon glyphicon-exclamation-sign text-danger"></i>',    indicatorLoading: '<i class="glyphicon glyphicon-hand-up text-muted"></i>',    indicatorNewTitle: 'Not uploaded yet',    indicatorSuccessTitle: 'Uploaded',    indicatorErrorTitle: 'Upload Error',    indicatorLoadingTitle: 'Uploading ...'}otherActionButtons String   ''textEncoding String 编码设置 'UTF-8'ajaxSettings Object   {}ajaxDeleteSettings Object   {}showAjaxErrorDetails boolean   true

 3.

属性名 默认值 中文fileSingle file 文件filePlural files 个文件browseLabel Browse &hellip 选择 …removeLabel Remove 移除removeTitle Clear selected files 清除选中文件cancelLabel Cancel 取消cancelTitle Abort ongoing upload 取消进行中的上传uploadLabel Upload 上传uploadTitle Upload selected files 上传选中文件msgNo No 没有msgNoFilesSelected No files selected “”msgCancelled Cancelled 取消msgZoomModalHeading Detailed Preview 详细预览msgSizeTooSmall File "{name}" (<b>{size} KB</b>) is too small and must be larger than <b>{minSize} KB</b>. File "{name}" (<b>{size} KB</b>) is too small and must be larger than <b>{minSize} KB</b>.msgSizeTooLarge File "{name}" (<b>{size} KB</b>) exceeds maximum allowed upload size of <b>{maxSize} KB</b>. 文件 "{name}" (<b>{size} KB</b>) 超过了允许大小 <b>{maxSize} KB</b>.msgFilesTooLess You must select at least <b>{n}</b> {files} to upload. 你必须选择最少 <b>{n}</b> {files} 来上传.msgFilesTooMany Number of files selected for upload <b>({n})</b> exceeds maximum allowed limit of <b>{m}</b>. 选择的上传文件个数 <b>({n})</b> 超出最大文件的限制个数 <b>{m}</b>.msgFileNotFound File "{name}" not found! 文件 "{name}" 未找到!msgFileSecured Security restrictions prevent reading the file "{name}". 安全限制，为了防止读取文件 "{name}".msgFileNotReadable File "{name}" is not readable. 文件 "{name}" 不可读.msgFilePreviewAborted File preview aborted for "{name}". 取消 "{name}" 的预览.msgFilePreviewError An error occurred while reading the file "{name}". 读取 "{name}" 时出现了一个错误.msgInvalidFileName Invalid or unsupported characters in file name "{name}". Invalid or unsupported characters in file name "{name}".msgInvalidFileType Invalid type for file "{name}". Only "{types}" files are supported. 不正确的类型 "{name}". 只支持 "{types}" 类型的文件.msgInvalidFileExtension Invalid extension for file "{name}". Only "{extensions}" files are supported. 不正确的文件扩展名 "{name}". 只支持 "{extensions}" 的文件扩展名.msgFileTypes {            'image': 'image',            'html': 'HTML',            'text': 'text',            'video': 'video',            'audio': 'audio',            'flash': 'flash',            'pdf': 'PDF',            'object': 'object'        }, {            'image': 'image',            'html': 'HTML',            'text': 'text',            'video': 'video',            'audio': 'audio',            'flash': 'flash',            'pdf': 'PDF',            'object': 'object'        },msgUploadAborted The file upload was aborted 该文件上传被中止msgUploadThreshold Processing... Processing...msgUploadBegin Initializing... Initializing...msgUploadEnd Done DonemsgUploadEmpty No valid data available for upload. No valid data available for upload.msgValidationError Validation Error 验证错误msgLoading Loading file {index} of {files} … 加载第 {index} 文件 共 {files} …msgProgress Loading file {index} of {files} - {name} - {percent}% completed. 加载第 {index} 文件 共 {files} - {name} - {percent}% 完成.msgSelected {n} {files} selected {n} {files} 选中msgFoldersNotAllowed Drag & drop files only! {n} folder(s) dropped were skipped. 只支持拖拽文件! 跳过 {n} 拖拽的文件夹.msgImageWidthSmall Width of image file "{name}" must be at least {size} px. 宽度的图像文件的"{name}"的必须是至少{size}像素.msgImageHeightSmall Height of image file "{name}" must be at least {size} px. 图像文件的"{name}"的高度必须至少为{size}像素.msgImageWidthLarge Width of image file "{name}" cannot exceed {size} px. 宽度的图像文件"{name}"不能超过{size}像素.msgImageHeightLarge Height of image file "{name}" cannot exceed {size} px. 图像文件"{name}"的高度不能超过{size}像素.msgImageResizeError Could not get the image dimensions to resize. 无法获取的图像尺寸调整。msgImageResizeException Error while resizing the image.<pre>{errors}</pre> 错误而调整图像大小。<pre>{errors}</pre>msgAjaxError Something went wrong with the {operation} operation. Please try again later! Something went wrong with the {operation} operation. Please try again later!msgAjaxProgressError {operation} failed {operation} failedajaxOperations {            deleteThumb: 'file delete',            uploadThumb: 'file upload',            uploadBatch: 'batch file upload',            uploadExtra: 'form data upload'        }, {            deleteThumb: 'file delete',            uploadThumb: 'file upload',            uploadBatch: 'batch file upload',            uploadExtra: 'form data upload'        },dropZoneTitle Drag & drop files here … 拖拽文件到这里 …<br>支持多文件同时上传dropZoneClickTitle <br>(or click to select {files}) <br>(或点击{files}按钮选择文件)previewZoomButtonTitles {            prev: 'View previous file',            next: 'View next file',            toggleheader: 'Toggle header',            fullscreen: 'Toggle full screen',            borderless: 'Toggle borderless mode',            close: 'Close detailed preview'        } {            prev: '预览上一个文件',            next: '预览下一个文件',            toggleheader: '缩放',            fullscreen: '全屏',            borderless: '无边界模式',            close: '关闭当前预览'        }fileActionSettings   {     removeTitle: '删除文件',            uploadTitle: '上传文件',            zoomTitle: '查看详情',            dragTitle: '移动 / 重置',            indicatorNewTitle: '没有上传',            indicatorSuccessTitle: '上传',            indicatorErrorTitle: '上传错误',            indicatorLoadingTitle: '上传 ...'        },

 4.

方法名 参数 描述fileerror   异步上传错误结果处理$('#uploadfile').on('fileerror', function(event, data, msg) {   });fileuploaded   异步上传成功结果处理$("#uploadfile").on("fileuploaded", function (event, data, previewId, index) {  })filebatchuploaderror   同步上传错误结果处理$('#uploadfile').on('filebatchuploaderror', function(event, data, msg) {     });filebatchuploadsuccess   同步上传成功结果处理$('#uploadfile').on('filepreupload', function(event, data, previewId, index) {       });filebatchselected   选择文件后处理事件$("#fileinput").on("filebatchselected", function(event, files) {});upload   文件上传方法$("#fileinput").fileinput("upload");fileuploaded   上传成功后处理方法$("#fileinput").on("fileuploaded", function(event, data, previewId, index) {});filereset    fileclear   点击浏览框右上角X 清空文件前响应事件$("#fileinput").on("fileclear",function(event, data, msg){});filecleared   点击浏览框右上角X 清空文件后响应事件$("#fileinput").on("filecleared",function(event, data, msg){});fileimageuploaded   在预览框中图片已经完全加载完毕后回调的事件

 5.项目使用

<div class="control-group">2 <label class="control-label">上传期刊：<span class="help-inline"><font color="red">*</font> </span></label>3 <div class="controls">4 <form:hidden id ="attachment" path="attachment"/>5 <input id="inputFile" type="file" class="file-loading required" data-preview-file-type="text" name="file" value="${periodicalResource.attachment}" class="input-xlarge">6 <font color="red">*</font>7 <span class="help-inline"><font>请上传pdf格式文件</font></span>8 </div>9 </div>

 

//初始化fileinput控件 tushu 2 $("#inputFile").fileinput({ 3 showUpload : true, 4 showRemove : false, 5 uploadUrl:"${ctx}/upload/one/8", 6 language : 'zh', 7 allowedPreviewTypes : [ 'pdf' ], 8 allowedFileTypes : ['pdf'], 9 autoReplace:true,10 maxFileCount:1,11 browseClass: "btn btn-primary", //按钮样式12 dropZoneEnabled: true,//shidou显示拖拽13 initialPreviewAsData: true,14 initialPreviewFileType: 'pdf',15 <c:if test="${periodicalResource.attachment!=null&&periodicalResource.attachment!=''}">initialPreview:["${periodicalResource.attachment}"]</c:if>16 }).on("fileuploaded", function (event, data) {17 $("#attachment").val(data.response.attachment);18 });

有些东西还得问人 请教  自己的知识有限 

 

欢迎各位道友吐槽