? ? ? 前言~?前段時(shí)間做項(xiàng)目用到了bootstrap里中的文件上傳控件坦袍，對(duì)此特定寫這篇文章，講述一下bootstrap的文件上傳空間的使用方法舞蔽。
我們進(jìn)入正題吧芥驳！
? ? ? ?首先bootstrap是基于jquery的，因此要導(dǎo)入jquery響應(yīng)jar包,可以找到以下網(wǎng)站：jquery相關(guān)js下載谭期。
進(jìn)入網(wǎng)址后堵第，可以選擇我圈起來的地址稚晚，打開瀏覽器輸入，并將該js的所有內(nèi)容復(fù)制下來型诚，創(chuàng)建一個(gè)" .js "文件存儲(chǔ)這些內(nèi)容作為jquery.js使用。
? ? ? ?其次要下載bootstrap的文件包鸳劳，相必你們已經(jīng)有了狰贯，那么我就只推出下載fileinput的相關(guān)文件包即可，以下是下載地址下載fileinput相關(guān)文件包赏廓。
? ? ? ?再次分別導(dǎo)入bootstrap和fileinput的相關(guān)css文件涵紊，js文件，如下所示：
<link?rel="stylesheet"?href="../static/css/bootstrap.css">
<link?rel="stylesheet" href="../static/css/fileinput.min.css">
<link rel="stylesheet"?href="../static/css/themes/theme.css">
<script type="text/javascript" src="../static/js/jquery-3.3.1.min.js"></script>
<script?type="text/javascript" src="../static/js/fileinput.min.js"></script>
<script type="text/javascript" src="../static/js/locales/zh.js"></script>
<script?type="text/javascript" src="../static/js/themes/theme.js"></script>
? ? ? ?后面可以選擇兩種方式配置fileinput的相關(guān)屬性幔摸，一種是在jsp或者h(yuǎn)tml中直接配置摸柄，第二種是寫一個(gè)js，然后將該js引入既忆。本人推薦使用第二種驱负，因?yàn)楸容^靈活。下面我都列出兩種方式患雇。
第一種：
<div?class="container kv-main">
<div?class="row ">
<div style="margin:100px 240px;width:700px;height:300px ">
<form?nctype="multipart/form-data">
<input?id="file-0a" class="file" name="file" type="file" multiple data-min-file-count="1">
<br>
</form>
</div>
</div>
<script>
$('#file-0a').fileinput({
'theme':'explorer',
language:'zh',
uploadUrl:'<%=path%>/uploadMultipleFile.do',
showPreview:true,//是否顯示預(yù)覽
? ? allowedPreviewTypes : ['image','html','text','video','audio','flash'],
maxFileCount :3,// 表示允許同時(shí)上傳的最大文件個(gè)數(shù)
});
$('#file-0a').on('fileuploaderror',function(event, data, previewId, index) {
var form = data.form,files = data.files,extra = data.extra,
response = data.response,reader = data.reader;
console.log(data);
console.log('File upload error');
});
$('#file-0a').on('fileerror',function(event, data) {
console.log(data.id);
console.log(data.index);
console.log(data.file);
console.log(data.reader);
console.log(data.files);
});
$('#file-0a').on('fileuploaded',function(event, data, previewId, index) {
var form = data.form,files = data.files,extra = data.extra,
response = data.response,reader = data.reader;
console.log('File uploaded triggered');
});
</script>
第二種：
$(function () {
? ? //0.初始化fileinputvaroFileInput =new FileInput();
? ? oFileInput.Init("file-0a", "/api/OrderApi/ImportOrder");
});
//初始化fileinputvarFileInput =function () {
? ? varoFile =new Object();
? ? //初始化fileinput控件（第一次初始化）oFile.Init =function(ctrlName, uploadUrl) {
? ? varcontrol = $('#' + ctrlName);
? ? //初始化上傳控件的樣式? ? control.fileinput({
? ? ? ? language: 'zh',//設(shè)置語(yǔ)言
? ? ? ? uploadUrl: uploadUrl,//上傳的地址
? ? ? ? allowedFileExtensions: ['jpg', 'gif', 'png'],//接收的文件后綴
? ? ? ? showUpload:true,//是否顯示上傳按鈕
? ? ? ? showCaption:false,//是否顯示標(biāo)題
? ? ? ? browseClass: "btn btn-primary",//按鈕樣式
? ? ? ? //dropZoneEnabled: false,//是否顯示拖拽區(qū)域
? ? ? ? //minImageWidth: 50, //圖片的最小寬度
? ? ? ? //minImageHeight: 50,//圖片的最小高度
? ? ? ? //maxImageWidth: 1000,//圖片的最大寬度
? ? ? ?//maxImageHeight: 1000,//圖片的最大高度
? ? ? ?//maxFileSize: 0,//單位為kb跃脊，如果為0表示不限制文件大小
? ? ? ?//minFileCount: 0,maxFileCount: 10, //表示允許同時(shí)上傳的最大文件個(gè)數(shù)
? ? ? ? enctype: 'multipart/form-data',
? ? ? ? validateInitialCount:true,
? ? ? ? previewFileIcon: "",
? ? ? ? msgFilesTooMany: "選擇上傳的文件數(shù)量({n}) 超過允許的最大數(shù)值{m}！",? ? });
? ? //導(dǎo)入文件上傳完成之后的事件
$('#file-0a').on('fileuploaderror',function(event, data, previewId, index) {
var form = data.form,files = data.files,extra = data.extra,
response = data.response,reader = data.reader;
console.log(data);
console.log('File upload error');
});
$('#file-0a').on('fileerror',function(event, data) {
console.log(data.id);
console.log(data.index);
console.log(data.file);
console.log(data.reader);
console.log(data.files);
});
$('#file-0a').on('fileuploaded',function(event, data, previewId, index) {
var form = data.form,files = data.files,extra = data.extra,
response = data.response,reader = data.reader;
console.log('File uploaded triggered');
});
}
? ? return oFile;
};
以下將提供fileinput的相關(guān)api
屬性名? ? ? ?屬性類型? ? ?描述? ? ?說明? ? ? 默認(rèn)值
language? ? ?String? ? 多語(yǔ)言設(shè)置苛吱，使用時(shí)需提前引入\locales文件夾下對(duì)應(yīng)的語(yǔ)言文件酪术，
中文zh，引入語(yǔ)言文件必須放在fileinput.js之后? ? ? ? ? ? ? ? ? ? 'en'
showCaption? ? ?Boolean? ? ?是否顯示被選文件的簡(jiǎn)介? ? ? ? ? true
showBrowse? ? ? Boolean? ? ?是否顯示瀏覽按鈕? ? ? ? ? ? ? ? ? ? true
showPreview? ? ? Boolean? ? 是否顯示預(yù)覽區(qū)域? ? ? ? ? ? ? ? ? ? true
showRemove? ? ? Boolean? ? 是否顯示移除按鈕? ? ? ? ? ? ? ? ? ?true,
showUpload? ? ? ? Boolean? ? 是否顯示上傳按鈕? ? ? ? ? ? ? ? ? ?true,
showCancel? ? ? ? Boolean? ? 是否顯示取消按鈕? ? ? ? ? ? ? ? ? ?true,
showClose:? ? ? ? ?Boolean? ? 是否顯示關(guān)閉按鈕? ? ? ? ? ? ? ? ? ?true
showUploadedThumbs? ? ? ?Boolean? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? true
browseOnZoneClick? ? ? ? ? ? Boolean? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?false
autoReplace? ? ? ? ? ? ? ? ? ? ? ? Boolean? ? ? ? 是否自動(dòng)替換當(dāng)前圖片翠储，設(shè)置為true時(shí)绘雁，再次選擇文件，
會(huì)將當(dāng)前的文件替換掉援所。? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? false
generateFileId? ? ? ? ? ? ? ? ? ? ?Object? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? null
previewClass? ? ? ? ? ? ? ? ? ? ? String? ? 添加預(yù)覽按鈕的類屬性? ? ? ? ? ‘’
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? ? ? ? ? ?刪除圖片時(shí)的請(qǐng)求路徑? ? ? ? ? ? ? ? ''
deleteExtraData? ?Object? ? ? ?刪除圖片時(shí)額外傳入的參數(shù)? ? ? ? ?{}
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'
browseIcon? ? ? ? ? ? ? ? ? ? ? ? ? ? ?String? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ' '
browseClass? ? ? ? ? ? ? ? ? ? ? ? ? String? ? ? ? ? ? ? ? ? ? ? ? ? ? ?'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
uploadExtraData? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?上傳文件時(shí)額外傳遞的參數(shù)設(shè)置? ? ? ? ? {}
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? ? ?表示同時(shí)最小上傳的文件個(gè)數(shù)? ? ? ? ? ? ? ? ? ? 0
maxFileCount? ? ? ? ? ? ? ? ? ? ? number? ? 表示允許同時(shí)上傳的最大文件個(gè)數(shù)? ? ? ? ? ? ? 0
validateInitialCount? ? ? ? ? ? ? boolean? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? false
msgValidationErrorClass? ? ?String? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?'text-danger'
msgValidationErrorIcon? ? ? ?String? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?' '
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? ? ? ? ? ? ? ? ? ? ? 預(yù)覽文件類型,內(nèi)置['image', 'html', 'text', 'video', 'audio', 'flash', 'object',‘other‘]等格式? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?'image'
elCaptionContainer? ? ? ? ? ? ? ?String? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? null
elCaptionText? ? ? ? ? ? ? ? ? ? ? ? String? ? ? ? ? ? ?設(shè)置標(biāo)題欄提示信息? ? ? ? ? ? ? null
elPreviewContainer? ? ? ? ? ? ? String? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?null
elPreviewImage? ? ? ? ? ? ? ? ? ?String? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?null
elPreviewStatus? ? ? ? ? ? ? ? ? ?String? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?null
elErrorContainer? ? ? ? ? ? ? ? ? String? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?null
errorCloseButton? ? ? ? ? ? ? ? ?String? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? '×'
slugCallback? ? ? ? ? ? ? ? ? ? ? ? String? ? ? ? ? ? ?暫時(shí)沒有搜到說明继阻，調(diào)試顯示，在文件選擇后會(huì)調(diào)到這個(gè)方法废酷。? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? null
dropZoneEnabled? ? ? ? ? ? ? ? boolean? ? ? ?是否顯示拖拽區(qū)域? ? ? ? ? ? ? ? ? ? ?true
dropZoneTitleClass? ? ? ? ? ? ? String? ? ? ? ? 拖拽區(qū)域類屬性設(shè)置? ? ? ? ?'file-drop-zone-title'
fileActionSettings? ? ? ? ? ? ? ? ?Object? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? {}
otherActionButtons? ? ? ? ? ? ? String? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ''
textEncoding? ? ? ? ? ? ? ? ? ? ? ?String? ? ? ? ? ? ? ? ? 編碼設(shè)置? ? ? ? ? ? ? ? ? ? ? ? ? ? ?'UTF-8'
ajaxSettings? ? ? ? ? ? ? ? ? ? ? ? Object? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? {}
ajaxDeleteSettings? ? ? ? ? ? ? Object? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? {}
showAjaxErrorDetails? ? ? ? ?boolean? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?true
7瘟檩、Method說明：
方法名參數(shù)描述
fileerror?異步上傳錯(cuò)誤結(jié)果處理
$('#uploadfile').on('fileerror', function(event, data, msg) {
});
fileuploaded?異步上傳成功結(jié)果處理
$("#uploadfile").on("fileuploaded", function (event, data, previewId, index) {
})
filebatchuploaderror?同步上傳錯(cuò)誤結(jié)果處理
$('#uploadfile').on('filebatchuploaderror', function(event, data, msg) {
});
filebatchuploadsuccess?同步上傳成功結(jié)果處理
$('#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?點(diǎn)擊瀏覽框右上角X 清空文件前響應(yīng)事件
$("#fileinput").on("fileclear",function(event, data, msg){
});
filecleared?點(diǎn)擊瀏覽框右上角X 清空文件后響應(yīng)事件
$("#fileinput").on("filecleared",function(event, data, msg){
});
fileimageuploaded?在預(yù)覽框中圖片已經(jīng)完全加載完畢后回調(diào)的事件
? ?后臺(tái)代碼
/**
* 多文件上傳
* @param files 文件數(shù)組
* @param request
* @return
* @throws IOException
*/
@RequestMapping(value ="/uploadMultipleFile.do", method = RequestMethod.POST, produces ="application/json;charset=utf8")
@ResponseBody
public Message uploadMultipleFileHandler(@RequestParam("file") MultipartFile[] files, HttpServletRequest request)throws IOException {
Message msg =new Message();
ArrayList arr =new ArrayList();
String serverPath=null;
for (int i =0; i < files.length; i++) {
MultipartFile file = files[i];
if (!file.isEmpty()) {
InputStream in =null;
OutputStream out =null;
try {
if(file.getOriginalFilename().substring(0,file.getOriginalFilename().indexOf(".")).contains("表1-惡意程序監(jiān)測(cè)統(tǒng)計(jì)")){
serverPath=FileUtil.getMalwareUploadDirFilePath(file.getOriginalFilename(), request);
}else{
serverPath=FileUtil.getHighRiskUploadDirFilePath(file.getOriginalFilename(), request);
}
/*String serverPath=dir.getAbsolutePath() + File.separator + file.getOriginalFilename();*/
? ? ? ? ? ? ? ? File serverFile =new File(serverPath);
in = file.getInputStream();
out =new FileOutputStream(serverFile);
byte[] b =new byte[1024];
int len =0;
while ((len = in.read(b)) >0) {
out.write(b,0, len);
}
out.close();
in.close();
logger.info("Server File Location=" + serverFile.getAbsolutePath());
}catch (Exception e) {
arr.add(i);
}finally {
if (out !=null) {
out.close();
out =null;
}
if (in !=null) {
in.close();
in =null;
}
}
}else {
arr.add(i);
}
}
if(arr.size() >0) {
msg.setStatus(Status.ERROR);
msg.setError("Files upload fail");
msg.setErrorKys(arr);
}else {
msg.setStatus(Status.SUCCESS);
msg.setStatusMsg("Files upload success");
}
return msg;
}
