1.前端需要先引入js和css
- fileinput.min.js 和 zh.js （汉化js） 和 fileinput.min.css
fileinput.min.js
/*!
* bootstrap-fileinput v4.4.5
* http://plugins.krajee.com/file-input
*
* Author: Kartik Visweswaran
* Copyright: 2014 - 2017, Kartik Visweswaran, Krajee.com
*
* Licensed under the BSD 3-Clause
* https://github.com/kartik-v/bootstrap-fileinput/blob/master/LICENSE.md
*/!function(e){"use strict";"function"==typeof define&&define.amd?define(["jquery"],e):"object"==typeof module&&module.exports?module.exports=e(require("jquery")):e(window.jQuery)}(function(e){"use strict";e.fn.fileinputLocales={},e.fn.fileinputThemes={},String.prototype.setTokens=function(e){var t,i,a=this.toString();for(t in e)e.hasOwnProperty(t)&&(i=new RegExp("{"+t+"}","g"),a=a.replace(i,e[t]));return a};var t,i;t={FRAMES:".kv-preview-thumb",SORT_CSS:"file-sortable",OBJECT_PARAMS:'\n\n\n\n\n\n',DEFAULT_PREVIEW:'\n{previewFileIcon}\n
',MODAL_ID:"kvFileinputModal",MODAL_EVENTS:["show","shown","hide","hidden","loaded"],objUrl:window.URL||window.webkitURL,compare:function(e,t,i){return void 0!==e&&(i?e===t:e.match(t))},isIE:function(e){if("Microsoft Internet Explorer"!==navigator.appName)return!1;if(10===e)return new RegExp("msie\\s"+e,"i").test(navigator.userAgent);var t,i=document.createElement("div");return i.innerHTML="",t=i.getElementsByTagName("i").length,document.body.appendChild(i),i.parentNode.removeChild(i),t},initModal:function(t){var i=e("body");i.length&&t.appendTo(i)},isEmpty:function(t,i){return void 0===t||null===t||0===t.length||i&&""===e.trim(t)},isArray:function(e){return Array.isArray(e)||"[object Array]"===Object.prototype.toString.call(e)},ifSet:function(e,t,i){return i=i||"",t&&"object"==typeof t&&e in t?t[e]:i},cleanArray:function(e){return e instanceof Array||(e=[]),e.filter(function(e){return void 0!==e&&null!==e})},spliceArray:function(e,t){var i,a=0,n=[];if(!(e instanceof Array))return[];for(i=0;i=0?atob(e.split(",")[1]):decodeURIComponent(e.split(",")[1]),a=new ArrayBuffer(i.length),n=new Uint8Array(a),r=0;rl;)switch(i=r[l++],i>>4){case 0:case 1:case 2:case 3:case 4:case 5:case 6:case 7:o+=String.fromCharCode(i);break;case 12:case 13:a=r[l++],o+=String.fromCharCode((31&i)<<6|63&a);break;case 14:a=r[l++],n=r[l++],o+=String.fromCharCode((15&i)<<12|(63&a)<<6|(63&n)<<0)}return o},isHtml:function(e){var t=document.createElement("div");t.innerHTML=e;for(var i=t.childNodes,a=i.length;a--;)if(1===i[a].nodeType)return!0;return!1},isSvg:function(e){return e.match(/^\s*<\?xml/i)&&(e.match(//g,">").replace(/"/g,""").replace(/'/g,"'")},replaceTags:function(t,i){var a=t;return i?(e.each(i,function(e,t){"function"==typeof t&&(t=t()),a=a.split(e).join(t)}),a):a},cleanMemory:function(e){var i=e.is("img")?e.attr("src"):e.find("source").attr("src");t.objUrl.revokeObjectURL(i)},findFileName:function(e){var t=e.lastIndexOf("/");return-1===t&&(t=e.lastIndexOf("\\")),e.split(e.substring(t,t+1)).pop()},checkFullScreen:function(){return document.fullscreenElement||document.mozFullScreenElement||document.webkitFullscreenElement||document.msFullscreenElement},toggleFullScreen:function(e){var i=document,a=i.documentElement;a&&e&&!t.checkFullScreen()?a.requestFullscreen?a.requestFullscreen():a.msRequestFullscreen?a.msRequestFullscreen():a.mozRequestFullScreen?a.mozRequestFullScreen():a.webkitRequestFullscreen&&a.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT):i.exitFullscreen?i.exitFullscreen():i.msExitFullscreen?i.msExitFullscreen():i.mozCancelFullScreen?i.mozCancelFullScreen():i.webkitExitFullscreen&&i.webkitExitFullscreen()},moveArray:function(e,t,i){if(i>=e.length)for(var a=i-e.length;a--+1;)e.push(void 0);return e.splice(i,0,e.splice(t,1)[0]),e},cleanZoomCache:function(e){var t=e.closest(".kv-zoom-cache-theme");t.length||(t=e.closest(".kv-zoom-cache")),t.remove()},setOrientation:function(e,t){var i,a,n,r=new DataView(e),o=0,l=1;if(65496!==r.getUint16(o)||e.length<2)return void(t&&t());for(o+=2,i=r.byteLength;i-2>o;)switch(a=r.getUint16(o),o+=2,a){case 65505:n=r.getUint16(o),i=n-o,o+=2;break;case 274:l=r.getUint16(o+6,!1),i=0}t&&t(l)},validateOrientation:function(e,i){if(window.FileReader&&window.DataView){var a,n=new FileReader;n.onloadend=function(){a=n.result,t.setOrientation(a,i)},n.readAsArrayBuffer(e)}},adjustOrientedImage:function(e,t){var i,a,n;if(e.hasClass("is-portrait-gt4")){if(t)return void e.css({width:e.parent().height()});e.css({height:"auto",width:e.height()}),i=e.parent().offset().top,a=e.offset().top,n=i-a,e.css("margin-top",n)}}},i=function(i,a){var n=this;n.$element=e(i),n.$parent=n.$element.parent(),n._validate()&&(n.isPreviewable=t.hasFileAPISupport(),n.isIE9=t.isIE(9),n.isIE10=t.isIE(10),(n.isPreviewable||n.isIE9)&&(n._init(a),n._listen()),n.$element.removeClass("file-loading"))},i.prototype={constructor:i,_cleanup:function(){var e=this;e.reader=null,e.formdata={},e.uploadCount=0,e.uploadStatus={},e.uploadLog=[],e.uploadAsyncCount=0,e.loadedImages=[],e.totalImagesCount=0,e.ajaxRequests=[],e.clearStack(),e.fileInputCleared=!1,e.fileBatchCompleted=!0,e.isPreviewable||(e.showPreview=!1),e.isError=!1,e.ajaxAborted=!1,e.cancelling=!1},_init:function(i,a){var n,r,o,l,s=this,d=s.$element;s.options=i,e.each(i,function(e,i){switch(e){case"minFileCount":case"maxFileCount":case"minFileSize":case"maxFileSize":case"maxFilePreviewSize":case"resizeImageQuality":case"resizeIfSizeMoreThan":case"progressUploadThreshold":case"initialPreviewCount":case"zoomModalHeight":case"minImageHeight":case"maxImageHeight":case"minImageWidth":case"maxImageWidth":s[e]=t.getNum(i);break;default:s[e]=i}}),s.rtl&&(l=s.previewZoomButtonIcons.prev,s.previewZoomButtonIcons.prev=s.previewZoomButtonIcons.next,s.previewZoomButtonIcons.next=l),a||s._cleanup(),s.$form=d.closest("form"),s._initTemplateDefaults(),s.uploadFileAttr=t.isEmpty(d.attr("name"))?"file_data":d.attr("name"),o=s._getLayoutTemplate("progress"),s.progressTemplate=o.replace("{class}",s.progressClass),s.progressCompleteTemplate=o.replace("{class}",s.progressCompleteClass),s.progressErrorTemplate=o.replace("{class}",s.progressErrorClass),s.dropZoneEnabled=t.hasDragDropSupport()&&s.dropZoneEnabled,s.isDisabled=d.attr("disabled")||d.attr("readonly"),s.isDisabled&&d.attr("disabled",!0),s.isAjaxUpload=t.hasFileUploadSupport()&&!t.isEmpty(s.uploadUrl),s.isClickable=s.browseOnZoneClick&&s.showPreview&&(s.isAjaxUpload&&s.dropZoneEnabled||!t.isEmpty(s.defaultPreviewContent)),s.slug="function"==typeof i.slugCallback?i.slugCallback:s._slugDefault,s.mainTemplate=s.showCaption?s._getLayoutTemplate("main1"):s._getLayoutTemplate("main2"),s.captionTemplate=s._getLayoutTemplate("caption"),s.previewGenericTemplate=s._getPreviewTemplate("generic"),!s.imageCanvas&&s.resizeImage&&(s.maxImageWidth||s.maxImageHeight)&&(s.imageCanvas=document.createElement("canvas"),s.imageCanvasContext=s.imageCanvas.getContext("2d")),t.isEmpty(d.attr("id"))&&d.attr("id",t.uniqId()),s.namespace=".fileinput_"+d.attr("id").replace(/-/g,"_"),void 0===s.$container?s.$container=s._createContainer():s._refreshContainer(),r=s.$container,s.$dropZone=r.find(".file-drop-zone"),s.$progress=r.find(".kv-upload-progress"),s.$btnUpload=r.find(".fileinput-upload"),s.$captionContainer=t.getElement(i,"elCaptionContainer",r.find(".file-caption")),s.$caption=t.getElement(i,"elCaptionText",r.find(".file-caption-name")),t.isEmpty(s.msgPlaceholder)||(n=d.attr("multiple")?s.filePlural:s.fileSingle,s.$caption.attr("placeholder",s.msgPlaceholder.replace("{files}",n))),s.$captionIcon=s.$captionContainer.find(".file-caption-icon"),s.mainClass.indexOf("input-group-lg")>-1?t.addCss(s.$captionIcon,"icon-lg"):s.$captionIcon.removeClass("icon-lg"),s.$previewContainer=t.getElement(i,"elPreviewContainer",r.find(".file-preview")),s.$preview=t.getElement(i,"elPreviewImage",r.find(".file-preview-thumbnails")),s.$previewStatus=t.getElement(i,"elPreviewStatus",r.find(".file-preview-status")),s.$errorContainer=t.getElement(i,"elErrorContainer",s.$previewContainer.find(".kv-fileinput-error")),s._validateDisabled(),t.isEmpty(s.msgErrorClass)||t.addCss(s.$errorContainer,s.msgErrorClass),a||(s.$errorContainer.hide(),s.previewInitId="preview-"+t.uniqId(),s._initPreviewCache(),s._initPreview(!0),s._initPreviewActions(),s._setFileDropZoneTitle(),s.$parent.hasClass("file-loading")&&(s.$container.insertBefore(s.$parent),s.$parent.remove())),d.attr("disabled")&&s.disable(),s._initZoom(),s.hideThumbnailContent&&t.addCss(s.$preview,"hide-content")},_initTemplateDefaults:function(){var i,a,n,r,o,l,s,d,c,p,u,f,m,v,g,h,w,_,b,C,y,x,T,E,S,F,k,I,P,A,D,z,$,U,j,B,R,O=this;i='{preview}\n\n',a='{preview}\n\n\n{remove}\n{cancel}\n{upload}\n{browse}\n',n='',o='\n',r='',l='\n \n \n
',s='',d='{icon} {label}',c='{icon} {label}
',p='',u='\n',f='',m=" ({sizeText})",v='',g='\n \n
\n{drag}\n',h='\n',w='',_='{downloadIcon}',b='',C='{dragIcon}',y='{indicator}
',x='\n',E=x+' title="{caption}">
\n',S="
{footer}\n
\n",F="{content}\n",k='
{data}
\n',I='
\n',P='
\n',A='
\n",D='
\n",z='
