BootStrap fileinput.js文件上傳組件實(shí)例代碼
1.首先我們下載好fileinput插件引入插件
<span style="font-size:14px;"><link type="text/css" rel="stylesheet" href="fileinput/css/fileinput.css" rel="external nofollow" /> <script type="text/javascript" src="fileinput/js/fileinput.js"></script> <script type="text/javascript" src="fileinput/js/fileinput_locale_zh.js"></script></span>
2.html設(shè)置:
<span style="font-size:14px;"><form enctype="multipart/form-data"> <input id="file-file" class="file" type="file" multiple> </form></span>
3.初始化設(shè)置:
function initFileInput(ctrlName, uploadUrl) {
var control = $('#' + ctrlName);
control.fileinput({
resizeImage : true,
maxImageWidth : 200,
maxImageHeight : 200,
resizePreference : 'width',
language : 'zh', //設(shè)置語(yǔ)言
uploadUrl : uploadUrl,
uploadAsync : true,
allowedFileExtensions : [ 'jpg', 'png', 'gif' ],//接收的文件后綴
showUpload : true, //是否顯示上傳按鈕
showCaption : true,//是否顯示標(biāo)題
browseClass : "btn btn-primary", //按鈕樣式
previewFileIcon : "<i class='glyphicon glyphicon-king'></i>",
maxFileCount : 3,
msgFilesTooMany : "選擇圖片超過(guò)了最大數(shù)量",
maxFileSize : 2000,
});
};
//初始化控件initFileInput(id,uploadurl)控件id,與上傳路徑
initFileInput("file-file", "/tqyh/pushMessAction");
注:要想使用控件自帶的upload按鈕,以及上傳進(jìn)度,必須用form包裹
(當(dāng)然也可以在初始化的時(shí)加入 enctype: 'multipart/form-data',是一樣的)但不用定義action
<strong><form enctype="multipart/form-data"> <input id="file-file" class="file" type="file" multiple> </form></strong>
最后通過(guò)后臺(tái)進(jìn)行正常的上傳就好了。



有些朋友說(shuō)我沒(méi)寫(xiě)明白,好吧我把后臺(tái)代碼貼出:
servlet:
@Override
ublic void doPost(HttpServletRequest request,
HttpServletResponse response)
throws ServletException, java.io.IOException {
String path = request.getSession().getServletContext().getRealPath("/headUpload");
UploadMediaService upload=new UploadMediaService();
String headimage=upload.getMeiaName(path, request);
request.getSession().setAttribute("headname",headimage );
System.out.println("文件上傳成功");
}
@Override
ublic void doGet(HttpServletRequest request,
HttpServletResponse response)
throws ServletException, java.io.IOException {
doPost( request, response);
}
其實(shí)后臺(tái)不用可以接收,我們通過(guò)解析request就能獲取一個(gè)或者多個(gè)上傳的文件。上面代碼主要核心代碼:
<span style="font-size:14px;">String path = request.getSession().getServletContext().getRealPath("/headUpload");
UploadMediaService upload=new UploadMediaService();
String headimage=upload.getMeiaName(path, request);</span>
<span style="font-size:14px;">UploadMediaService :
/**
* 上傳媒體文件,存儲(chǔ)在服務(wù)端
*
* @param path 獲取文件需要上傳到的路徑
* @param request 客戶端請(qǐng)求
* @return
*/
public static String uploadLocalMedia(String path,HttpServletRequest request){
String filename ="";
//獲得磁盤(pán)文件條目工廠
DiskFileItemFactory factory = new DiskFileItemFactory();
//如果沒(méi)以下兩行設(shè)置的話,上傳大的 文件 會(huì)占用 很多內(nèi)存,
//設(shè)置暫時(shí)存放的 存儲(chǔ)室 , 這個(gè)存儲(chǔ)室,可以和 最終存儲(chǔ)文件 的目錄不同
/**
* 原理 它是先存到 暫時(shí)存儲(chǔ)室,然后在真正寫(xiě)到 對(duì)應(yīng)目錄的硬盤(pán)上,
* 按理來(lái)說(shuō) 當(dāng)上傳一個(gè)文件時(shí),其實(shí)是上傳了兩份,第一個(gè)是以 .tem 格式的
* 然后再將其真正寫(xiě)到 對(duì)應(yīng)目錄的硬盤(pán)上
*/
factory.setRepository(new File(path));
//設(shè)置 緩存的大小,當(dāng)上傳文件的容量超過(guò)該緩存時(shí),直接放到 暫時(shí)存儲(chǔ)室
factory.setSizeThreshold(1024*1024) ;
//高水平的API文件上傳處理
ServletFileUpload upload = new ServletFileUpload(factory);
try {
//可以上傳多個(gè)文件
List<FileItem> list = upload.parseRequest(request);
for(FileItem item : list) {
//如果獲取的 表單信息是普通的 文本 信息
if(item.isFormField()) {
//獲取用戶具體輸入的字符串 ,名字起得挺好,因?yàn)楸韱翁峤贿^(guò)來(lái)的是 字符串類(lèi)型的
String value = item.getString() ;
} else{
//對(duì)傳入的非 簡(jiǎn)單的字符串進(jìn)行處理 ,比如說(shuō)二進(jìn)制的 圖片,視頻這些
/**
* 以下三步,主要獲取 上傳文件的名字
*/
//獲取路徑名
String value = item.getName() ;
//索引到最后一個(gè)反斜杠
int start = value.lastIndexOf("\\");
//截取 上傳文件的 字符串名字,加1是 去掉反斜杠,
filename = value.substring(start+1);
System.out.println("filename="+ filename);
//真正寫(xiě)到磁盤(pán)上
//它拋出的異常 用exception 捕捉
//item.write( new File(path,filename) );//第三方提供的
//手動(dòng)寫(xiě)的
OutputStream out = new FileOutputStream(new File(path,filename));
InputStream in = item.getInputStream() ;
int length = 0 ;
byte [] buf = new byte[1024] ;
// in.read(buf) 每次讀到的數(shù)據(jù)存放在 buf 數(shù)組中
while( (length = in.read(buf) ) != -1) {
//在 buf 數(shù)組中 取出數(shù)據(jù) 寫(xiě)到 (輸出流)磁盤(pán)上
out.write(buf, 0, length);
}
in.close();
out.close();
}
}
} catch (FileUploadException e) {
log.error("文件上傳異常:",e);
} catch (Exception e) {
log.error("文件處理IO異常:",e);
}
return filename ;
}
</span>
以上所述是小編給大家介紹的BootStrap fileinput.js文件上傳組件實(shí)例代碼,希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
- Bootstrap Fileinput文件上傳組件用法詳解
- JS文件上傳神器bootstrap fileinput詳解
- Bootstrap fileinput文件上傳預(yù)覽插件使用詳解
- Bootstrap中的fileinput 多圖片上傳及編輯功能
- Bootstrap的fileinput插件實(shí)現(xiàn)多文件上傳的方法
- bootstrapfileinput實(shí)現(xiàn)文件自動(dòng)上傳
- 基于bootstrap的上傳插件fileinput實(shí)現(xiàn)ajax異步上傳功能(支持多文件上傳預(yù)覽拖拽)
- 詳解bootstrap-fileinput文件上傳控件的親身實(shí)踐
- Bootstrap fileinput 上傳新文件移除時(shí)觸發(fā)服務(wù)器同步刪除的配置
- Bootstrap FileInput實(shí)現(xiàn)圖片上傳功能
相關(guān)文章
Javascript自執(zhí)行匿名函數(shù)(function() { })()的原理淺析
匿名函數(shù)就是沒(méi)有函數(shù)名的函數(shù)。這篇文章主要介紹了Javascript自執(zhí)行匿名函數(shù)(function() { })()的原理淺析的相關(guān)資料,需要的朋友可以參考下2016-05-05
JavaScript動(dòng)態(tài)修改彈出窗口大小的方法
這篇文章主要介紹了JavaScript動(dòng)態(tài)修改彈出窗口大小的方法,涉及javascript中window.open方法的使用技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-04-04
網(wǎng)頁(yè)中可關(guān)閉的漂浮窗口實(shí)現(xiàn)可自行調(diào)節(jié)
廣告式的漂浮窗口,想必大家并不陌生吧,下面為大家簡(jiǎn)單介紹下具體的實(shí)現(xiàn),有需要的朋友可以參考下2013-08-08
JS實(shí)現(xiàn)網(wǎng)絡(luò)請(qǐng)求的三種方式梳理
本文主要為大家介紹了基于 XMLHttpRequest、Promise、async/await 等三種異步網(wǎng)絡(luò)請(qǐng)求的寫(xiě)法,文中的示例代碼講解詳細(xì),感興趣的可以學(xué)習(xí)一下2022-03-03
JavaScript中你不知道的Object.entries用法
大家應(yīng)該都知道,Object.entries()方法返回一個(gè)給定對(duì)象自身可枚舉屬性的鍵值對(duì)數(shù)組,其排列與使用 for...in 循環(huán)遍歷該對(duì)象時(shí)返回的順序一致,這篇文章主要給大家介紹了關(guān)于JavaScript中你不知道的Object.entries用法的相關(guān)資料,需要的朋友可以參考下2021-10-10
uniapp微信小程序打卡功能的詳細(xì)實(shí)現(xiàn)流程
最近因?yàn)楣ぷ餍枰?搭建了一個(gè)加班打卡的小程序,下面這篇文章主要給大家介紹了關(guān)于uniapp微信小程序打卡功能的詳細(xì)實(shí)現(xiàn)流程,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-12-12

