Bootstrap FileInput 上傳中文 API 整理

時間 2019-11-18

標籤 bootstrap fileinput 上傳中文 api 整理欄目 Bootstarp 简体版

原文原文鏈接

Bootstrap FileInput 上傳中文 API 整理javascript

上傳插件有不少可是公司用的就是 Bootstrap FileInputcss

本身就看了看會用就行html

本身都不知道每一個值是幹嗎用的就問大佬 java

總結一下jquery

 1 1、    引入文件
 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 2、    初始化設置：
 8 $("#uploadfile").fileinput({
 9                 language: 'zh', //設置語言
10                 uploadUrl:"http://127.0.0.1/testDemo/fileupload/upload.do", //上傳的地址
11                allowedFileExtensions: ['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", //按鈕樣式    
19                dropZoneEnabled: 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',
28                validateInitialCount:true,
29                 previewFileIcon: "<iclass='glyphicon glyphicon-king'></i>",
30                msgFilesTooMany: "選擇上傳的文件數量({n}) 超過容許的最大數值{m}！",
31            }).on("fileuploaded", function (event, data, previewId, index){
32                  
33 });

屬性名            屬性類型            描述說明                         默認值
language     String                        多語言設置，使用時需提早引入\locales文件夾下對應的語言文件，中文zh，引入語言文件必須放在fileinput.js以後 'en'
showCaption    Boolean 是否顯示被選文件的簡介 true
showBrowse   Boolean 是否顯示瀏覽按鈕 true
showPreview   Boolean 是否顯示預覽區域 true
showRemove    Boolean 是否顯示移除按鈕 true,
showUpload   Boolean 是否顯示上傳按鈕 true,
showCancel Boolean 是否顯示取消按鈕 true,
showClose: Boolean 是否顯示關閉按鈕 true
showUploadedThumbs Boolean   true
browseOnZoneClick Boolean   false
autoReplace Boolean 是否自動替換當前圖片，設置爲true時，再次選擇文件， 會將當前的文件替換掉。 false
generateFileId Object   null
previewClass String 添加預覽按鈕的類屬性 ‘’
captionClass String   ‘’
frameClass String   'krajee-default'
mainClass String   'file-caption-main'
mainTemplate Object   null
purifyHtml Boolean   true
fileSizeGetter Object   null
initialCaption String   ''
initialPreview Array/Object   []
initialPreviewDelimiter String   '*$$*'
initialPreviewAsData Boolean   false
initialPreviewFileType String   'image'
initialPreviewConfig Array/Object   []
initialPreviewThumbTags Array/Object   []
previewThumbTags Object   {}
initialPreviewShowDelete Boolean   true
removeFromPreviewOnError Boolean   false
deleteUrl String 刪除圖片時的請求路徑 ''
deleteExtraData Object 刪除圖片時額外傳入的參數 {}
overwriteInitial Boolean   true
previewZoomButtonIcons 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   false
preferIconicZoomPreview Boolrean   false
allowedPreviewTypes undefined   undefined
allowedPreviewMimeTypes Object   null
allowedFileTypes Object 接收的文件後綴，如['jpg', 'gif', 'png'],不填將不限制上傳文件後綴類型 null
allowedFileExtensions Object   null
defaultPreviewContent Object   null
customLayoutTags 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 上傳文件路徑 null
uploadAsync boolean 是否爲異步上傳 true
uploadExtraData   上傳文件時額外傳遞的參數設置 {}
zoomModalHeight number   480
minImageWidth String 圖片的最小寬度 null
minImageHeight String 圖片的最小高度 null
maxImageWidth String 圖片的最大寬度 null
maxImageHeight String 圖片的最大高度 null
resizeImage boolean   false
resizePreference String   'width'
resizeQuality number   0.92
resizeDefaultImageType String   'image/jpeg'
minFileSize number 單位爲kb，上傳文件的最小大小值 0
maxFileSize number 單位爲kb，若是爲0表示不限制文件大小 0
resizeDefaultImageType number   25600(25MB)
minFileCount number 表示同時最小上傳的文件個數 0
maxFileCount number 表示容許同時上傳的最大文件個數 0
validateInitialCount boolean   false
msgValidationErrorClass 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   99
previewFileType String 預覽文件類型,內置['image', 'html', 'text', 'video', 'audio', 'flash', 'object',‘other‘]等格式 'image'
elCaptionContainer String   null
elCaptionText String 設置標題欄提示信息 null
elPreviewContainer String   null
elPreviewImage String   null
elPreviewStatus String   null
elErrorContainer String   null
errorCloseButton String   '<span class="close kv-error-close">×</span>'
slugCallback String   null
dropZoneEnabled boolean 是否顯示拖拽區域 true
dropZoneTitleClass 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-warning"></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.ajax

屬性名         默認值             中文
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 Done
msgUploadEmpty 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} failed
ajaxOperations {            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.bootstrap

方法名 參數 描述
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.項目使用安全

1 <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>

 1   //初始化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             });