ajaxfileupload.js實(shí)現(xiàn)上傳文件功能
使用ajaxfileupload.js實(shí)現(xiàn)上傳文件功能
一、ajaxFileUpload是一個(gè)異步上傳文件的jQuery插語法：$.ajaxFileUpload([options])
options參數(shù)說明：
1、url 上傳處理程序地址
2、fileElementId 文件選擇框的id屬性，即的id
3、secureuri 是否啟用安全提交，默認(rèn)為false
4、dataType 服務(wù)器返回的數(shù)據(jù)類型?？梢詾閤ml,script,json,html。如果不填寫，jQuery會(huì)自動(dòng)判斷
5、success 服務(wù)器響應(yīng)成功后的處理函數(shù) ，參數(shù)data就是服務(wù)器返回的數(shù)據(jù)
6、error 服務(wù)器響應(yīng)失敗后的處理函數(shù)
7、data 自定義參數(shù)，當(dāng)有數(shù)據(jù)要和上傳的文件一起傳到后臺(tái)處理的時(shí)候會(huì)用到。這里注意，數(shù)據(jù)格式比較嚴(yán)格{param:[{‘param1':'value1','param2':'value2' },{‘param1':'value3','param2':'value4' }]}, 其中單引號(hào)不能改為雙引號(hào)
8、type 提交數(shù)據(jù)的方式，一般為post
二、使用方法
第一步、先引入jquery和ajaxFileUpload插件，注意先后順序：
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script> <script type= "text/javascript" src= "js/ajaxfileupload.js" ></script>
第二步、html代碼
原始的，控件展示效果如下：
因?yàn)樵伎丶臉邮綗o法改變，所以我們一般會(huì)讓這個(gè)標(biāo)簽隱藏，然后點(diǎn)擊別的標(biāo)簽來觸發(fā)上傳控件。
<input type ="file" id="ImportPicInput" name= "myfile" style=" display: none" />
<div class ="input-append">
<label for ="importPicName"> 上傳原始圖片：</label >
<input type ="text" class="input-large" id= "importPicName" />
<a class ="btn btn-default" onclick= "$('#ImportPicInput').click();" > 打開</a>
</div >
展現(xiàn)的頁(yè)面效果：
第三步、js代碼
在用戶選擇完上傳圖片后，需要把圖片名稱顯示到輸入框中，還需要在js文件中加入代碼：
$(document).ready(function(e) {
$('body').on('change',$('#ImportPicInput'),function(){
$( "#importPicName").val($( "#ImportPicInput").val());
});
});
上傳文件的js代碼：
$.ajaxFileUpload({
type: "POST",
url: "/toolkit/importPicFile.do",
data:{picParams:text},//要傳到后臺(tái)的參數(shù)，沒有可以不寫
secureuri : false,//是否啟用安全提交，默認(rèn)為false
fileElementId:'ImportPicInput',//文件選擇框的id屬性
dataType: 'json',//服務(wù)器返回的格式
async : false,
success: function(data){
if(data.result=='success'){
//coding
}else{
//coding
}
},
error: function (data, status, e){
/coding
}
});
第四步、java代碼
@RequestMapping(value="/importPicFile.do" ,produces="text/html;charset=utf-8" )
public @ResponseBody String importPicFile1(@RequestParam("picParams") String picParams,
@RequestParam MultipartFile myfile,HttpServletRequest request){
Map<String,Object> map= new HashMap<String,Object>();
if(myfile.isEmpty()){
map.put( "result", "error");
map.put( "msg", "上傳文件不能為空" );
} else{
String originalFilename=myfile.getOriginalFilename();
String fileBaseName=FilenameUtils.getBaseName(originalFilename);
String floderName=fileBaseName+"_" +DateUtil.getNowTimeData();
try{
String genePicPath=request.getSession().getServletContext().getRealPath("/upload/" +floderName);
//把上傳的圖片放到服務(wù)器的文件夾下
FileUtils. copyInputStreamToFile(myfile.getInputStream(), new File(genePicPath,originalFilename));
//coding
map.put( "result", "success");
} catch (Exception e) {
map.put( "result", "error");
map.put( "msg",e.getMessage());
}
}
String result=String. valueOf(JSONObject.fromObject (map));
return result;
}
三、注意點(diǎn)
（1）上文html中控件的css樣式，都是用的bootstrap框架里的基本樣式，也可以不用使用bootstrap框架，僅做參考。
（2）之前用的live方法，前臺(tái)js報(bào)錯(cuò)說找不到這個(gè)方法，后來查了資料才發(fā)現(xiàn)，1.9以上的jquery版本已經(jīng)廢棄live這個(gè)方法了
$(document).ready(function(e) {
$('#ImportPicInput ').live( 'change', function(){
})
});
(3)文件選擇框必須要有name，即，且java代碼中的變量要跟name的值保持一致，即@RequestParam MultipartFile myfile,這點(diǎn)非常的重要。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了window.open()的使用及瀏覽器兼容性問題方面的知識(shí)，感興趣的朋友可以參考下2014-05-05
javascript延時(shí)加載之defer測(cè)試
偶爾發(fā)現(xiàn) js 中有個(gè)延時(shí)加載的標(biāo)簽 defer,還在疑惑這么好用的東西為什么沒有流行起來,本人今天把它拾起來用了一下，發(fā)現(xiàn)只在ie7，8，9和360安全濟(jì)覽器下可以，知道為什么不用它了吧2012-12-12
原生js實(shí)現(xiàn)旋轉(zhuǎn)木馬效果
這篇文章主要為大家詳細(xì)介紹了原生js實(shí)現(xiàn)旋轉(zhuǎn)木馬效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-02-02
下面小編就為大家?guī)硪黄獪\談JavaScript 瀏覽器對(duì)象。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-06-06
這篇文章主要介紹了JS WebSocket斷開原因和心跳機(jī)制，對(duì)websocket感興趣的同學(xué)，可以參考下2021-05-05
當(dāng)一串?dāng)?shù)字的時(shí)候，很多瀏覽器不能自動(dòng)換行，所以可以借助js來實(shí)現(xiàn)。2010-08-08
easyui給某一個(gè)單元格的內(nèi)容增加下劃線的操作方法
在EasyUI的DataGrid組件中,你可以通過自定義單元格的渲染方式來實(shí)現(xiàn)給某一個(gè)單元格的內(nèi)容增加下劃線的效果,本文給大家介紹easyui如何給某一個(gè)單元格的內(nèi)容增加下劃線,感興趣的朋友跟隨小編一起看看吧2024-08-08
webpack4.0打包優(yōu)化策略整理小結(jié)
這篇文章主要介紹了webpack4.0打包優(yōu)化策略整理小結(jié)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-03-03
JS實(shí)現(xiàn)的小火箭發(fā)射動(dòng)畫效果示例
這篇文章主要介紹了JS實(shí)現(xiàn)的小火箭發(fā)射動(dòng)畫效果,涉及javascript基于時(shí)間函數(shù)的頁(yè)面元素屬性動(dòng)態(tài)變換實(shí)現(xiàn)運(yùn)動(dòng)效果相關(guān)操作技巧,需要的朋友可以參考下2018-12-12
二級(jí)域名轉(zhuǎn)向類...2006-11-11