Einführung in die Verwendung des asynchronen Datei-Uploads ajaxFileUpload

In diesem Artikel wird hauptsächlich die einfache Verwendung von ajaxFileUpload zum asynchronen Hochladen von Dateien vorgestellt. Das jQuery-Plug-in AjaxFileUpload kann das Hochladen von Ajax-Dateien realisieren. Wenn Sie interessiert sind, können Sie mehr erfahren

Hier finden Sie eine kurze Einführung in ajaxFileUpload. Das jQuery-Plug-in AjaxFileUpload kann das Hochladen von Ajax-Dateien implementieren. Unser Projekt verwendet eine Architektur, die JSP und JS trennt, daher lautet der Code wie folgt.

Zuerst ist der JSP-Teil:

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

Hier ist der Grund, warum ich das Formular auskommentiert habe, weil es in meinem JSP bereits ein anderes Formular gibt Während Während des Debugging-Prozesses habe ich festgestellt, dass möglicherweise ein Konflikt vorliegt, und habe das Formular auskommentiert. Es stellt sich heraus, dass ajaxFileUpload ohne Formular übermittelt werden kann:

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

Mein js ist nicht gut, aber ich weiß, wie man dieses js verwendet und kann es nicht vollständig kopieren. Es muss mit der tatsächlichen Situation der Projektstruktur kombiniert werden, aber die Kommentare dazu, welche allgemeinen Parameter verwendet werden denn sind geschrieben. Beachten Sie unbedingt, dass der Beitragstyp mit der method=RequestMethod.POST der Controller-Methode übereinstimmt, die der Anforderung entspricht. Beachten Sie dataType:'json'. Achten Sie unbedingt auf die Groß- und Kleinschreibung von json.

ps: Hier möchte ich sagen, dass die Beurteilung, die ich data.success verwende, mit der nachfolgenden Entitätsklasse AjaxJson zusammenhängt. ! ! ! !

Übrigens müssen die entsprechenden js wie folgt in jsp eingeführt werden:

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

Der im ersten eingeführte Upload Der Absatz ist der obige js-Inhalt, unser importierter js wurde gekapselt, also schreiben Sie ihn einfach direkt. Basierend auf der tatsächlichen Situation wird die folgende js-Datei des jQuery-Plug-Ins AjaxFileUpload verwendet.

Der nächste Schritt ist, wie die Controller-Methode reagiert:

@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!!!"); 
   
}

Achten Sie einfach auf ein paar Punkte in dieser Methode, die Der Rest liegt beim ursprünglichen Poster selbst. Für seine eigene Geschäftslogik ist die erste Anforderungsmethode in @RequestMapping und der zweite übergebene Parameter ist MultipartFile n_file. Diese n_file sollte dem Namensattribut im d5fd7aea971a85678ba271703566ebfd entsprechen jsp. Als Drittes ist die Annotation @ResponseBody für den Rückgabewert Sting zu beachten. Die verbleibenden zwei Dinge, auf die Sie achten sollten, sind AjaxJson und ObjectMapper.

AjaxJson ist eine selbst gekapselte Modellklasse, die zur Verarbeitung von Ajax verwendet wird. Sie kann auch Baidu oder Brainstorming verwenden wie man es benutzt. Fügen Sie AjaxJson unten ein:

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; 
  } 
   
}

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Lernen aller hilfreich ist Achtung auf die chinesische PHP-Website!

Verwandte Empfehlungen:

So laden Sie den Navigationsverlauf bei Verwendung der jQuery-Mobilklassenbibliothek

Die JQuery-Ajax-Technologie implementiert das Intervall N Wert in Sekunden an eine Seite übergeben

Das obige ist der detaillierte Inhalt vonEinführung in die Verwendung des asynchronen Datei-Uploads ajaxFileUpload. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!