- 因为bootstrap是基于jquery的,因此,引用插件前,应先引入, jquery.js(要求bootstrap的版本在3以上).
- 引入fileinput 的必须文件: ( )
- htm 结构
注:控件生产的结构都会在content容器中
- 控件初始化和基本配置:
$(".content").fileinput( language: 'en', showCaption: true, showBrowse: true, showPreview: true, showRemove: true, showUpload: true, showCancel: true, showClose: true, showUploadedThumbs: true, browseOnZoneClick: false, autoReplace: false, generateFileId: null, previewClass: '', captionClass: '', frameClass: 'krajee-default', mainClass: 'file-caption-main', mainTemplate: null, purifyHtml: true, fileSizeGetter: null, initialCaption: '', initialPreview: [], initialPreviewDelimiter: '*$$*', initialPreviewAsData: false, initialPreviewFileType: 'image', initialPreviewConfig: [], initialPreviewThumbTags: [], previewThumbTags: {}, initialPreviewShowDelete: true, removeFromPreviewOnError: false, deleteUrl: '', deleteExtraData: {}, overwriteInitial: true, previewZoomButtonIcons: { prev: '', next: '', toggleheader: '', fullscreen: '', borderless: '', close: '' }, previewZoomButtonClasses: { 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: false, preferIconicZoomPreview: false, allowedPreviewTypes: undefined, allowedPreviewMimeTypes: null, allowedFileTypes: null, allowedFileExtensions: null, defaultPreviewContent: null, customLayoutTags: {}, customPreviewTags: {}, previewFileIcon: '', previewFileIconClass: 'file-other-icon', previewFileIconSettings: {}, previewFileExtSettings: {}, buttonLabelClass: 'hidden-xs', browseIcon: ' ', browseClass: 'btn btn-primary', removeIcon: '', removeClass: 'btn btn-default', cancelIcon: '', cancelClass: 'btn btn-default', uploadIcon: '', uploadClass: 'btn btn-default', uploadUrl: null, uploadAsync: true, uploadExtraData: {}, zoomModalHeight: 480, minImageWidth: null, minImageHeight: null, maxImageWidth: null, maxImageHeight: null, resizeImage: false, resizePreference: 'width', resizeQuality: 0.92, resizeDefaultImageType: 'image/jpeg', resizeIfSizeMoreThan: 0, // in KB minFileSize: 0, maxFileSize: 0, maxFilePreviewSize: 25600, // 25 MB minFileCount: 0, maxFileCount: 0, validateInitialCount: false, msgValidationErrorClass: 'text-danger', msgValidationErrorIcon: ' ', msgErrorClass: 'file-error-message', progressThumbClass: "progress-bar progress-bar-success progress-bar-striped active", progressClass: "progress-bar progress-bar-success progress-bar-striped active", progressCompleteClass: "progress-bar progress-bar-success", progressErrorClass: "progress-bar progress-bar-danger", progressUploadThreshold: 99, previewFileType: 'image', elCaptionContainer: null, elCaptionText: null, elPreviewContainer: null, elPreviewImage: null, elPreviewStatus: null, elErrorContainer: null, errorCloseButton: '×', slugCallback: null, dropZoneEnabled: true, dropZoneTitleClass: 'file-drop-zone-title', fileActionSettings: {}, otherActionButtons: '', textEncoding: 'UTF-8', ajaxSettings: {}, ajaxDeleteSettings: {}, showAjaxErrorDetails: true };//这是插件中的所有的配置选项及其默认值.//下面是常用的几个配置项/*{ language: 'zh', //语言格式(默认为英文,若设置为中文或其他语言,需引入语言js) uploadUrl: 'url', allowedFileExtensions: [],//接收的文件后缀 showUpload: true, //是否显示上传按钮 showCaption: true, //是否显示标题(即文件名称) showPreview: true, //是否显示拖拽区 maxFileCount: 0, //表示允许同时上传的最大文件个数 uploadExtraData:, //向后台传递的参数 showAjaxErrorDetails: false, //上传失败后,是否显示返回的信息 ajaxSettings:{ //配置回调函数 beforeSend: fnBefore, success: fnSuccess, complete: fnComplete, error: fnError }}*/) 此时,基本功能都已有,接下来就是根据自己的需求对其进行更进一步的配置
-
提交过程中的常用事件和jQuery中的很接近,有filereset, fileclear, filecleared, fileloaded, and fileerror.(可以像jquery中那样,书写注册事件,因为函数返回的还是控件本身,所以可以链式调用)
-
支持的各种文件类型,内置的类型有: image, text, html, video, audio, flash, object, and other.
-
预览文件的默认类型有:['image', 'html', 'text', 'video', 'audio', 'flash', 'object']
你可以自定义,如 allowedPreviewTypes: ['images','html'] 注:当将allowedPreviewTypes: 设置为 null,空,或者false时,预览图将都是相同的一个小图标.
-
自定义 预览图的大小(宽和高,下面是插件默认的值) 如:previewSettings:{ image: {width: "auto", height: "160px"}, html: {width: "213px", height: "160px"}, text: {width: "213px", height: "160px"}, video: {width: "auto", height: "100%", 'max-width': "100%"}, audio: {width: "100%", height: "30px"}, flash: {width: "auto", height: "100%", 'max-width': "100%"}, object: {height: "100%"}, pdf: {width: "160px", height: "160px"}, other: {width: "160px", height: "160px"}}
-
提交方式有两种 ;表单提交和基于ajax的提交 (Upload action defaults to form submit. Supports an upload route/server action parameter for custom ajax based upload.) 若想要使用ajax上传文件,必须设置uploadUrl属性,否则将默认使用form表单提交:
uploadUrl:'我的url地址'
-
返回的数据应为json类型
-
上传类型:上传异步还是同步(默认是异步):
uploadAsync :true 异步时每个文件发送一次ajax;同步上传时,ajax只触发一次
-
传递参数的方法:传递参数,有两种方式:
a.初始化时就确定数据:uploadExtraData:{id:1}
b.动态获取参数并传递:
第一步,方法外定义参数:
var mydata
第二步,配置中:
uploadExtraData: function () { return mydata }, 第三步,
$(".fileinput").on("filepreajax", function (event, data) { uploadExtraData ={ id:$(".someInput").val() //此时可以动态获取 };}) -
minImageHeight,maxImageHeight,minImageWidth,maxImageWidth:
对上传图片的宽高进行限制(px为单位); minFileSize ,maxFileSize 对上传文件的大小进行限制(kb为单位)
-
常用函数配置(推荐使用插件的回调函数): change , fileselect ,filereset, fileclear, filecleared, fileloaded, fileerror 和jquery的回调函数很像,依次是: 文件选中后的事件,文件选中事件, input框重置事件, 当input框中的remove按钮或预览窗口的关闭按钮按下时的事件, 文件在预览框被清除事件,文件上传成功的事件:(参数较多,有function(event, file, previewId, index, reader),上传时验证失败的函数
-
插件支持事件(亲自测试过的):
fileuploaded(event,data , previewId , index):上传并完成时触发(无论是点击的哪个按钮) filebatchuploadsuccess(event,data,previewId,index):当点击input的上传时(多文件上传),触发此事件 所以文件上传成功时触发(只在同步上传时,且所有文件上传成功) filebatchuploadcomplete(event,files,extra):当点击input的上传时(无论是否是多文件上传),触发此事件 (亲测不对 多文件上传结束后触发,无论异步还是同步) filesuccessremove(event,id) :点击删除预览框中的删除按钮前触发( 已上传成功的文件 ) filepreremove(event,id,index):点击删除预览框中的删除按钮前触发( initialPreview中的文件除外,只针对于还未上传的文件 ) //id=文件容器的id , index=文件容器的index fileuploaderror(event,data,msg):选中文件后未通过验证时触发及取消正在上传的文件,可用于限制文件大小类型等 注:a. filepreajax > filepreupload > fileuploaded> filebatchuploadcomplete b.(多文件) filepreajax(多次触发) > filepreupload > fileuploaded(多次触发) > filebatchuploadcomplete
}
-
插件支持的方法:
disable,将file input框置为不可用($('#input-id').fileinput('disable').fileinput('enable'))
,enable ,可用
reset , 重置
destroy, 取消对此input 的初始化(将其变为一个普通的input框)
refresh, 刷新input
clear :清除提交的记录
,upload :触发input的上传
,cancel ,:取消正在上传的ajax
lock:锁定按钮,取消按钮除外
unlock,
addToStack :将一个文件加进缓存文件栈(必须传递一个文件对象)
,updateStack :用一个文件替换掉缓存文件栈中的一个文件$
clearStack:清空文件栈
getFileStack :返回一个已选中文件列表
getFilesCount ,
zoom,
getPreview
-
展示页面加载时,数据库已存在的图片(及删除的接口和传递的参数)
{ initialPreview: [ "", "", "", ], initialPreviewConfig: [{ caption: "nature-1.jpg", size: 329892, width: "120px", url: "", //删除接口 或者deleteUrl, key: 1, extra: {id: 100}, }, { caption: "nature-1.jpg", size: 329892, width: "120px", url: "", //删除接口 或者deleteUrl key: 1, extra: {id: 100}, }, { caption: "nature-1.jpg", size: 329892, width: "120px", url: "", //删除接口 或者deleteUrl key: 1, extra: {id: 100}, }, ], }
-
自己在使用的时候遇到的问题????:
- 删除图片: 情景: 当我上传成功一个图片后,发现图片上传错了,想立马把他删除掉,但是我当点击删除按钮时,获取到数据是包裹当前图片的一个元素对象的id名
问题: 但是,预览框中的包裹图片的元素对象的id名竟然有些是一样的(大概是这样:id = 'upload-1244565476567'),(很诡异),所以根据id名我仍无法确定到当前要删除文件,望哪位大神指点迷津,将十分感谢 . . .
2017-05-13:补充:针对第一个问题,搜过作者的论坛后,初步得出答案,每当有文件上传成功后,都将上传控件destroy,然后马上再次的初始化,并将服务器中的所以图片的信息通过 initailPreview配置,默认的显示在页面中,这样所以的图片的删除动作使用的都是initailPreviewConfig中的url进行删除. 若有哪个地方理解的有误,或者对此插件有熟练的使用,还请大神指点迷津,将十分感谢 . . .