首頁 > web前端 > js教程 > 關於ajaxFileUpload 非同步上傳檔案的使用介紹

關於ajaxFileUpload 非同步上傳檔案的使用介紹

不言
發布: 2018-07-02 16:55:12
原創
1452 人瀏覽過

本篇文章主要介紹了ajaxFileUpload 非同步上傳檔案簡單使用,jQuery外掛AjaxFileUpload可以實作ajax檔案上傳。有興趣的可以了解一下,

這裡就簡單介紹下ajaxFileUpload,jQuery外掛AjaxFileUpload可以實作ajax檔上傳。我們的專案採用的是jsp跟js分離的架構,所以程式碼如下。

首先是jsp部分:

<!-- <form method="post"> --> 
    <input type="file" name="n_file" id="fileToUpload" value="上传表格" /> 
     <button id="upload1" class="btn btn-default">上传</button> 
<!-- </form> -->
登入後複製

這裡說下為什麼把form註解了,因為我的jsp中已經有了另外一個form在調試過程中發現可能有衝突就把form註解了,事實證明ajaxFileUpload 不用form表單一樣可以提交,下面就是js程式碼部分:

$(function(){  
  //点击打开文件选择器  
  $("#upload1").on(&#39;click&#39;, function() {  
    //选择文件之后执行上传  
 
    $.ajaxFileUpload({  
      url:&#39;supplyDataReportUploadExcel&#39;, //url自己写  
      secureuri:false, //这个是啥没啥用 
      type:&#39;post&#39;, 
      fileElementId:&#39;fileToUpload&#39;,//file标签的id  
      dataType: &#39;json&#39;,//返回数据的类型  
      //data:{name:&#39;logan&#39;},//一同上传的数据  
      success: function (data, status) {  
//       alert(data); 
//       alert(data.msg);   
//       alert(data.success); 
        if(data.success){ 
          alert("upload,success!!!"); 
          window.location.href=&#39;supplyDataReport&#39;; 
        }else{ 
          alert(data.msg); 
          window.location.href=&#39;supplyDataReport&#39;; 
        } 
         
      }/*,  
      error: function (data, status, e) {  
        alert(e);  
      }*/  
    });  
 
  });  
 
});
登入後複製

##本人js不好,只是會用這個js不能完全copy走,要結合專案結構的實際情況,不過大體參數幹什麼的註解都寫了。一定注意type是post跟請求對應的Controller的方法的method=RequestMethod.POST 一致。注意dataType:'json'  ,一定注意json的大小寫。


ps:這裡要說一下我用的data.success做的判斷跟後面的一個實體類別AjaxJson有關係,注意! ! ! ! !


對了jsp中還需要引入對應的js如下:

#

<script type="text/javascript">Core.js(&#39;./js/iface/upload&#39;);</script> 
<script type="text/javascript" src="libs/jquery/ajaxfileupload.js"></script>
登入後複製

第一段引入的upload 就是上面js的內容,我們的引入js已經被封裝好了,所以直接寫那就行,具體結合實際情況,下面的要用到的jQuery插件AjaxFileUpload的js檔案。


接下來是Controller方法如何對應:

@SuppressWarnings("resource") 
@RequestMapping(value = "/supplyDataReportUploadExcel", method = RequestMethod.POST) 
public @ResponseBody String supplyDataReportUploadExcel(HttpServletRequest request, HttpServletResponse response,MultipartFile n_file) throws Exception { 
  AjaxJson json = new AjaxJson(); 
  ObjectMapper mapper = new ObjectMapper(); 
  UploadFormBackVo uploadFormBackVo = new UploadFormBackVo(); 
  //判断是否是空的Excel 包括没有标题 
  if(n_file.getSize()>0){ 
    try{ 
      //先判断 文件名 是否符合规格 因为不知道怎么获取上传文件的路径 后期修改 
      //获取文件 
      //验证文件名 
      String fileName = n_file.getOriginalFilename(); 
      String fileNewName = fileName.replaceAll(".xls", ""); 
      String eL = "[a-zA-Z]+[0-9]{4}-[0-9]{2}-[0-9]{2}"; 
      Pattern p = Pattern.compile(eL); 
      Matcher m = p.matcher(fileNewName); 
      boolean dateFlag = m.matches(); 
      if (!dateFlag) { 
        System.out.println("格式错误"); 
        uploadFormBackVo.setFormName(n_file.getOriginalFilename()); 
        uploadFormBackVo.setUploadTime(new Date()); 
        uploadFormBackVo.setIfsuccess("上传失败,Excel文件名不符合规格!!!"); 
        supplyDataReportService.insert(uploadFormBackVo); 
         
        json.setSuccess(false); 
        json.setMsg("Excel,NameError!!!"); 
        String jsonStr = mapper.writeValueAsString(json); 
        return jsonStr; 
      } 
      //上传文件 
      UploadUtil.SaveFileFromInputStream(n_file.getInputStream(), "D:/补数据报表文件", n_file.getOriginalFilename()); 
      InputStream is2 = new FileInputStream("D:/补数据报表文件/"+n_file.getOriginalFilename()); 
       
      //读取文件进行内容验证 
      ExcelReader excelReader = new ExcelReader(); 
       
      Map<Integer, SupplyDataReportBackVo> supplyDataReportBackVos = new HashMap<Integer, SupplyDataReportBackVo>(); 
       
       
      String jsonStr = excelReader.readExcelContent(is2,supplyDataReportBackVos,json,n_file); 
      //判断 readExcelContent()解析Excel文件 是否符合规范 如果符合 修改相应数据  
      if(json.isSuccess()==true){ 
         //遍历map 用value --》SupplyDataReportBackVo 调用  updateById方法 
        for(SupplyDataReportBackVo supplyDataReportBackVo : supplyDataReportBackVos.values()){ 
          supplyDataReportService.updateById(supplyDataReportBackVo); 
        } 
         
        System.out.println("获得Excel表格的内容:"); 
        for (int i = 1; i <= supplyDataReportBackVos.size(); i++) { 
           
          System.out.println(supplyDataReportBackVos.get(i)); 
        } 
        //保存上传记录 
        uploadFormBackVo.setFormName(n_file.getOriginalFilename()); 
        uploadFormBackVo.setUploadTime(new Date()); 
        uploadFormBackVo.setIfsuccess("上传成功"); 
        supplyDataReportService.insert(uploadFormBackVo); 
        return jsonStr; 
      } 
      // 解析Excel 文件 中  有空值 保存这次上传的记录且删除已上传的Excel文件, 删除已上传的Excel文件已在 readExcelContent()中处理 
      uploadFormBackVo.setFormName(n_file.getOriginalFilename()); 
      uploadFormBackVo.setUploadTime(new Date()); 
      uploadFormBackVo.setIfsuccess("上传失败,Excel中有空值!!!"); 
      supplyDataReportService.insert(uploadFormBackVo); 
      return jsonStr; 
    } catch (IOException e){ 
      System.out.println(e.getMessage()); 
    } 
  }else{ 
    //ajax返回的数据 
    json.setSuccess(false); 
    json.setMsg("Upload File Null!!!!!"); 
    String jsonStr = mapper.writeValueAsString(json); 
    return jsonStr; 
  } 
  System.out.println("ajax请求成功"); 
  return ""; 
   
/    json.setMsg("upload,success!!!"); 
   
}
登入後複製

這個方法注意幾個地方就行,其他的都是樓主本人自己的業務邏輯,第一@RequestMapping中請求的方式為POST,第二傳入的參數有個MultipartFile  n_file,這個n_file要跟jsp中的標籤中name屬性對應。第三要注意回傳值Sting上的一個註解@ResponseBody,剩下兩個需要注意的地方就是AjaxJson,ObjectMapper。


AjaxJson是自己封裝的一個model類,用來處理aj​​ax的,至於ObjectMapper是用來轉換類型的具體的自己百度或者腦補吧,樓主也緊緊限於會用。以下貼上AjaxJson:

package com.zhongxin.web.ops.adrule.model; 
 
import java.util.Map; 
 
public class AjaxJson { 
   
  private boolean success = true; 
   
  private String msg = "ok"; 
   
  private Object obj = null; 
   
  private Map<String, Object> attributes; 
   
  public boolean isSuccess() { 
    return success; 
  } 
  public void setSuccess(boolean success) { 
    this.success = success; 
  } 
  public String getMsg() { 
    return msg; 
  } 
  public void setMsg(String msg) { 
    this.msg = msg; 
  } 
  public Object getObj() { 
    return obj; 
  } 
  public void setObj(Object obj) { 
    this.obj = obj; 
  } 
  public Map<String, Object> getAttributes() { 
    return attributes; 
  } 
  public void setAttributes(Map<String, Object> attributes) { 
    this.attributes = attributes; 
  } 
   
}
登入後複製

以上就是本文的全部內容,希望對大家的學習有所幫助,更多相關內容請關注PHP中文網!

相關推薦:

jQuery mobile類別庫使用時載入導航歷史的方法

Jquery ajax技術實作間隔N秒傳值至某頁頁面

######

以上是關於ajaxFileUpload 非同步上傳檔案的使用介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板