使⽤插件BootstrapFileinput⽂件上传
最近的项⽬中有⽤到这个插件，觉得功能挺强⼤的。
类似的效果如下图：
⼀、载⼊
需要载⼊样式：
<link href="${tPath}/plug-in/bootstrap-fileinput-master/css/fileinput.min.css" media="all"
solidworks2020安装教程
rel="stylesheet" type="text/css" />
<link href="${tPath}/plug-in/bootstrap-fileinput-master/themes/explorer/theme.css" media="all" rel="stylesheet" type="text/css"/>
<link href="maxcdn.bootstrapcdn/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
以及js：
<script type="text/javascript" src="${tPath}/assets/js/jquery-2.0.3.min.js"></script>
<script src="maxcdn.bootstrapcdn/bootstrap/3.3.7/js/bootstrap.min.js" type="text/javascript"></script>
<script src="${tPath}/plug-in/bootstrap-fileinput-master/js/fileinput.js" type="text/javascript"> </script>
<script src="${tPath}/plug-in/bootstrap-fileinput-master/js/plugins/sortable.js"
type="text/javascript"></script>
<script src="${tPath}/plug-in/bootstrap-fileinput-master/themes/explorer/theme.js"
type="text/javascript"></script>
<script src="${tPath}/plug-in/bootstrap-fileinput-master/js/locales/zh.js"
type="text/javascript"></script>（这是语⾔包，有很多种可以选）
⼆、初始化设置：
$("#uploadfile").fileinput({
language: 'zh', //设置语⾔
uploadUrl:"127.0.0.1/testDemo/fileupload/upload.do", //上传的地址
allowedFileExtensions: ['jpg', 'gif', 'png'],//接收的⽂件后缀
//uploadExtraData:{"id": 1, "fileName":'123.mp3'},
uploadAsync: true, //默认异步上传
showUpload:true, //是否显⽰上传按钮
showRemove :true, //显⽰移除按钮
showPreview :true, //是否显⽰预览
showCaption:false,//是否显⽰标题
browseClass:"btn btn-primary", //按钮样式
dropZoneEnabled: false,//是否显⽰拖拽区域
//minImageWidth: 50, //图⽚的最⼩宽度
//minImageHeight: 50,//图⽚的最⼩⾼度
//maxImageWidth: 1000,//图⽚的最⼤宽度
//maxImageHeight: 1000,//图⽚的最⼤⾼度
/
/maxFileSize:0,//单位为kb，如果为0表⽰不限制⽂件⼤⼩
//minFileCount: 0,
maxFileCount:10, //表⽰允许同时上传的最⼤⽂件个数
enctype:'multipart/form-data',
validateInitialCount:true,
previewFileIcon: "<iclass='glyphicon glyphicon-king'></i>",
msgFilesTooMany: "选择上传的⽂件数量({n}) 超过允许的最⼤数值{m}！",
}).on("fileuploaded", function (event, data, previewId, index){
});
三、    Options 说明：
属性名属性类型描述说明默认值
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>',
汇编语言appclose: '<i class="glyphicon glyphicon-remove"></i>'
},
{
prev: 'btn btn-navigate',
previewZoomButtonClasses Object  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 nulltypescript的作用
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'jquery下载文件插件
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 number480 minImageWidth String图⽚的最⼩宽度null minImageHeight String图⽚的最⼩⾼度null maxImageWidth String图⽚的最⼤宽度null maxImageHeight String图⽚的最⼤⾼度null resizeImage boolean false resizePreference String'width' resizeQuality number0.92 resizeDefaultImageType String'image/jpeg' minFileSize number单位为kb，上传⽂件的最⼩⼤⼩值0
maxFileSize number单位为kb，如果为0表⽰不限制⽂件⼤⼩0 resizeDefaultImageType number25600(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'
数组去重的方法vue
progressThumbClass String "progress-bar progress-bar-success progress-bar-striped active"
rogressClass String "progress-bar progress-bar-success progress-bar-striped active"
mysql中delimiterprogressCompleteClass String "progress-bar progress-bar-success"
progressErrorClass String "progress-bar progress-bar-danger"
progressUploadThreshold number99
previewFileType String 预览⽂件类型，内置['image', 'html', 'text',
'video', 'audio', 'flash', 'object',‘other‘]等
格式
'image'
elCaptionContainer String null elCaptionText String设置标题栏提⽰信息null

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。