下载地址、API和DOM地址
[下载地址](https://github.com/kartik-v/bootstrap-fileinput)
[api文档 ](http://plugins.krajee.com/file-input)
[D E M O](http://plugins.krajee.com/file-input/demo)
<link href="../css/bootstrap.min.css"rel="stylesheet">
<link href="../css/fileinput.css" media="all"rel="stylesheet" type="text/css" />
<scriptsrc="../js/jquery-2.0.3.min.js"></script>
<script src="../js/fileinput.js"type="text/javascript"></script>
<script src="../js/bootstrap.min.js"type="text/javascript"></script>
二、初始化设置
//初始化fileinput
initFileinput() ;
function initFileinput() {
$("#uploadImg").fileinput({
language: 'zh', //设置语言
dropZoneTitle: '可以将图片 拖放到这里 …支持 多文件 上传 ',
uploadUrl: "index.PHP ", //上传 的地址
uploadExTrad ata: function(previewId, index) { //该插件 可以向您的服务器方法 发送附加数据。这可以通过uploadExTrad ata在键值对中设置为关联数组对象来完成。所以如果你有设置uploadExTrad ata={id:'kv-1'},在PHP 中你可以读取这些数据$_POST['id']
var id = $('#id').val();
return {seriesId: id};
},
allowedFileExtensions: ['jpg','png'],//接收的文件 后缀
uploadAsync: true, //默 认异步上传
showUpload: true, //是否显示 上传 按钮
showRemove: true, //显示 移除按钮
showPreview: true, //是否显示 预览
showCancel:true, //是否显示 文件 上传 取消按钮。默 认为true。只有在AJAX上传 过程中,才会启用和显示
showCaption: true,//是否显示 文件 标题 ,默 认为true
bro wseClass: "btn btn-primary", //文件 选择器/浏览按钮的CSS类。默 认为btn btn-primary
dropZoneEnabled: true,//是否显示 拖拽区域
minImageWidth: 50, //图片 的最小宽度
minImageHeight: 50,//图片 的最小高度
maxImageWidth: 1000,//图片 的最大宽度
maxImageHeight: 1000,//图片 的最大高度
maxFileSize: 1024,//单位为kb,如果为0表示不限制文件 大小
minFileCount: 1, //每次上传 允许的最少文件 数。如果设置为0,则表示文件 数是可选的。默 认为0
maxFileCount: 0, //每次上传 允许的最大文件 数。如果设置为0,则表示允许的文件 数是无限制的。默 认为0
previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",//当检测到用于预览的不可读文件 类型时,将在每个预览文件 缩略图 中显示 的图标。默 认为<i class="glyphicon glyphicon-file"></i>
layoutTemplates:{
actionUpload:''//去除 上传 预览缩略图 中的上传 图片
actionZoom:'', //去除 上传 预览缩略图 中的查看详情预览的缩略图 标
actionDownload:'' //去除 上传 预览缩略图 中的下载图标
actionDelete:'', //去除 上传 预览的缩略图 中的删除 图标
},//对象用于渲染布局的每个部分的模板配置。您可以设置以下模板来控制窗口小部件布局.eg:去除 上传 图标
msgFilesTooMany: "选择上传 的文件 数量 ({n}) 超过允许的最大数值{m}!",//字符串,当文件 数超过设置的最大计数时显示 的消息 maxFileCount。默 认为:选择上传 的文件 数({n})超出了允许的最大限制{m}。请重试您的上传 !
}).on('filebatchpreupload', function(event, data) { //该方法 将在上传 之前触发
var id = $('#id option:selected').val();
if(id == 0){
return {
message: "请选择", // 验证错误 信息在上传 前要显示 。如果设置了这个设置,插件 会在调用 时自动 中止上传 ,并将其显示 为错误 消息。您可以使用此属性 来读取文件 并执行自己的自定义 验证
data:{} // any other data to send that can be referred in `filecustomerror`
};
}
});
}
//fileuploaded此事件仅针对ajax上传 触发,并在每个缩略图 文件 上传 完成后触发。此事件仅针对ajax上传 并在以下情况下触发:当点击每个预览缩略图 中的上传 图标并且文件 上传 成功时,或者当你有 uploadAsync设置为true您已触发批量上传 。在这 种情况下,fileuploaded每一个 人选择的文件 被上传 成功后,触发事件。
var id_str = '';
$('#uploadImg').on('fileuploaded', function(event, data, previewId, index) {
if(typeof(data.response.id) != 'undefined'){
id_str = id_str+data.response.id+',';
}
});
// filebatchuploadcomplete此事件仅在ajax上传 和完成同步或异步ajax批量上传 后触发。
$('#uploadImg').on('filebatchuploadcomplete',function (event,files,extra) {
if(id_str.length == 0){
layer.msg('上传 失败', {icon: 0});//弹框提示
return false;
}
setTimeout(function(){ //执行延时关闭
closeSelf();
},1000);
});
三、Options 说明
属性 名属性 类型描述说明 默 认值language String 多语言设置,使用时需提前引入locales文件 夹下对应的语言文件 ,中文 zh,引入语言文件 必须放在fileinput.js之后 ‘en’ showCaption Boolean 是否显示 被选文件 的简介 true showbro wse Boolean 是否显示 浏览按钮 true showPreview Boolean 是否显示 预览区域 true showRemove Boolean 是否显示 移除按钮 true, showUpload Boolean 是否显示 上传 按钮 true, showCancel Boolean 是否显示 取消按钮 true, showClose: Boolean 是否显示 关闭 按钮 true showUploadedThumbs Boolean true bro wSEO nZoneClickBoolean 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 删除 图片 时的请求路径‘’ deleteExTrad ata Object 删除 图片 时额外传入的参数{} overwriteInitial Boolean true previewZoomButtonIcons Object {prev: ‘’,next: ‘’,toggleheader: ‘’,fullscreen: ‘’,borderless: ‘’,close: ‘’}, 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 ‘’ previewFileIconClass String ‘file-other-icon’ previewFileIconSettings Object {} previewFileExtSettings Object {} buttonLabelClass String ‘hidden-xs’ bro wseIconString ’ ’ bro wseClassString ‘btn btn-primary’ removeIcon String ‘’ removeClass String ‘btn btn-default’ cancelIcon String ‘’ cancelClass String ‘btn btn-default’ uploadIcon String ‘’ uploadClass String ‘btn btn-default’ uploadUrl String 上传 文件 路径null uploadAsync boolean 是否为异步上传 true uploadExTrad ata 上传 文件 时额外传递的参数设置{} 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 resizeDefaultimage Type String ‘image/jpeg’ minFileSize number 单位为kb,上传 文件 的最小大小值 0 maxFileSize number 单位为kb,如果为0表示不限制文件 大小 0 resizeDefaultimage Type number 25600(25MB) minFileCount number 表示同时最小上传 的文件 个数 0 maxFileCount number 表示允许同时上传 的最大文件 个数 0 validateInitialCount boolean false msgValidationErrorClass String ‘text-danger’ msgValidationErrorIcon String ’ ’ msgErrorClass String ‘file-error-message’ progresst humbClass 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” progressupl oadThreshold 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 ‘×’ slugCallback function 选择后未上传 前 回调方法 null dropZoneEnabled boolean 是否显示 拖拽区域 true dropZoneTitleClass String 拖拽区域类属性 设置 ‘file-drop-zone-title’ fileActionSettings Object 设置预览图片 的显示 样式 {showRemove: true,showUpload: false,showZoom: true,showDrag: true,removeIcon: ‘’,removeClass: ‘btn btn-xs btn-default’,removeTitle: ‘Remove file’,uploadIcon: ‘’,uploadClass: ‘btn btn-xs btn-default’,uploadTitle: ‘Upload file’,zoomIcon: ‘’,zoomClass: ‘btn btn-xs btn-default’,zoomTitle: ‘View Details’,dragIcon: ‘’,dragClass: ‘text-info’,dragTitle: ‘Move / Rearrange’,dragSettings: {},indicatorNew: ‘’,indicatorSuccess: ‘’,indicatorError: ‘’,indicatorLoading: ‘’,indicatorNewTitle: ‘Not uploaded yet’,indicatorSuccesst itle: ‘Uploaded’,indicatorErrorTitle: ‘Upload Error’,indicatorLoadingTitle: ‘Uploading …’} otherActionButtons String ‘’ textEncoding String 编码设置 ‘UTF-8’ ajaxSettings Object {} ajaxDeleteSettings Object {} showAjaxErrorDetails boolean true
四、提示 说明设置
属性 名默 认值中文 fileSingle file 文件 filePlural files 个文件 bro wseLabelbro wse &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 详细预览 msgSizeto oSmall File “{name}” ({size} KB) is too small and must be larger than {minSize} KB. File “{name}” ({size} KB) is too small and must be larger than {minSize} KB. msgSizeto oLarge File “{name}” ({size} KB) exceeds maximum allowed upload size of {maxSize} KB. 文件 “{name}” ({size} KB) 超过了允许大小 {maxSize} KB.msgFilesTooLess You must select at least {n} {files} to upload. 你必须选择最少 {n} {files} 来上传 . msgFilesTooMany Number of files selected for upload ({n}) exceeds maximum allowed limit of {m}. 选择的上传 文件 个数 ({n}) 超出最大文件 的限制个数 {m}. 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}” 时出现了一个 错误 . msgi nvalidFileName Invalid or unsupported chara cters in file name “{name}”. Invalid or unsupported chara cters in file name “{name}”. msgi nvalidFileType Invalid type for file “{name}”. Only “{types}” files are supported. 不正确的类型 “{name}”. 只支持 “{types}” 类型的文件 . msgi nvalidFileExtension 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} 拖拽的文件 夹. msgi mageWidthSmall Width of image file “{name}” must be at least {size} px. 宽度的图像文件 的"{name}"的必须是至少{size}像素. msgi mageHeightSmall Height of image file “{name}” must be at least {size} px. 图像文件 的"{name}"的高度必须至少为{size}像素. msgi mageWidthLarge Width of image file “{name}” cannot exceed {size} px. 宽度的图像文件 "{name}"不能超过{size}像素. msgi mageHeightLarge Height of image file “{name}” cannot exceed {size} px. 图像文件 "{name}"的高度不能超过{size}像素. msgi mageResizeError Could not get the image dimensions to resize.无法获取 的图像尺寸调整。 msgi mageResizeException Error while resizing the image.{errors} 错误 而调整图像大小。{errors} 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 … 拖拽文件 到这里 …支持 多文件 同时上传 dropZoneClickTitle (or click to select {files}) (或点击{files}按钮选择文件 ) previewZoomButtonTitles {prev: ‘View prevIoU s 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: ‘没有上传 ’, indicatorSuccesst itle: ‘上传 ’,indicatorErrorTitle: ‘上传 错误 ’, indicatorLoadingTitle: ‘上传 …’},
五、Method说明
方法 名描述 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 在预览框中图片 已经完全加载完毕后回调的事件
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。