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)寫明白,好吧我把后臺(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 =""; //獲得磁盤文件條目工廠 DiskFileItemFactory factory = new DiskFileItemFactory(); //如果沒(méi)以下兩行設(shè)置的話,上傳大的 文件 會(huì)占用 很多內(nèi)存, //設(shè)置暫時(shí)存放的 存儲(chǔ)室 , 這個(gè)存儲(chǔ)室,可以和 最終存儲(chǔ)文件 的目錄不同 /** * 原理 它是先存到 暫時(shí)存儲(chǔ)室,然后在真正寫到 對(duì)應(yīng)目錄的硬盤上, * 按理來(lái)說(shuō) 當(dāng)上傳一個(gè)文件時(shí),其實(shí)是上傳了兩份,第一個(gè)是以 .tem 格式的 * 然后再將其真正寫到 對(duì)應(yīng)目錄的硬盤上 */ 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)的是 字符串類型的 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); //真正寫到磁盤上 //它拋出的異常 用exception 捕捉 //item.write( new File(path,filename) );//第三方提供的 //手動(dòng)寫的 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ù) 寫到 (輸出流)磁盤上 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)文章
用ajax實(shí)現(xiàn)的自動(dòng)投票的代碼
用ajax實(shí)現(xiàn)的自動(dòng)投票的代碼...2007-03-03Node.js實(shí)戰(zhàn) 建立簡(jiǎn)單的Web服務(wù)器
本章我們同樣通過(guò)實(shí)戰(zhàn)的演練,利用Node.js建立一個(gè)簡(jiǎn)單的Web服務(wù)器2012-03-03使用canvas實(shí)現(xiàn)仿新浪微博頭像截取上傳功能
用戶提供圖像大小尺寸不合適,如何用截取上傳呢?接下來(lái)小編教大家使用使用canvas實(shí)現(xiàn)仿新浪微博頭像截取上傳功能解決問(wèn)題,需要的朋友一起學(xué)習(xí)吧。2015-09-09基于JavaScript實(shí)現(xiàn)隨機(jī)顏色輸入框
這篇文章主要介紹了基于JavaScript實(shí)現(xiàn)隨機(jī)顏色輸入框的實(shí)例代碼,代碼簡(jiǎn)單易懂,非常不錯(cuò),需要的朋友參考下吧2016-12-12PhotoShop給圖片自動(dòng)添加邊框及EXIF信息的JS腳本
這篇文章主要介紹了PhotoShop給圖片自動(dòng)添加邊框及EXIF信息的JS腳本,本文給出效果圖和實(shí)現(xiàn)代碼,需要的朋友可以參考下2015-02-02利用JavaScript實(shí)現(xiàn)繪制2023新年煙花的示例代碼
大家過(guò)年好!新春佳節(jié),在這個(gè)充滿喜悅的日子里,愿新年的鐘聲帶給你一份希望和期待。在這喜慶的日子里,小編和大家分享一個(gè)煙花代碼,希望大家能夠喜歡2023-01-01