這篇文章將為大家詳細(xì)講解有關(guān)ajaxfileupload.js怎么實(shí)現(xiàn)上傳文件功能，小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

目前創(chuàng)新互聯(lián)已為上1000家的企業(yè)提供了網(wǎng)站建設(shè)、域名、網(wǎng)頁(yè)空間、網(wǎng)站運(yùn)營(yíng)、企業(yè)網(wǎng)站設(shè)計(jì)、湖口網(wǎng)站維護(hù)等服務(wù)，公司將堅(jiān)持客戶導(dǎo)向、應(yīng)用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長(zhǎng)，共同發(fā)展。

使用ajaxfileupload.js實(shí)現(xiàn)上傳文件功能

一、ajaxFileUpload是一個(gè)異步上傳文件的jQuery插語(yǔ)法：$.ajaxFileUpload([options])

options參數(shù)說(shuō)明：

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(wú)法改變，所以我們一般會(huì)讓這個(gè)標(biāo)簽隱藏，然后點(diǎn)擊別的標(biāo)簽來(lái)觸發(fā)上傳控件。

<input type ="file" id="ImportPicInput" name= "myfile"  /> 
<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ù)，沒(méi)有可以不寫 
 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ò)說(shuō)找不到這個(gè)方法，后來(lái)查了資料才發(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)非常的重要。

關(guān)于“ajaxfileupload.js怎么實(shí)現(xiàn)上傳文件功能”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。

文章題目：ajaxfileupload.js怎么實(shí)現(xiàn)上傳文件功能-創(chuàng)新互聯(lián)
網(wǎng)頁(yè)路徑：http://www.rwnh.cn/article10/ddcogo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站設(shè)計(jì)、ChatGPT、移動(dòng)網(wǎng)站建設(shè)、自適應(yīng)網(wǎng)站、微信小程序、標(biāo)簽優(yōu)化

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)