Introduction à l'utilisation du téléchargement de fichiers asynchrone ajaxFileUpload

Cet article présente principalement l'utilisation simple d'ajaxFileUpload pour télécharger des fichiers de manière asynchrone. Le plug-in jQuery AjaxFileUpload peut réaliser le téléchargement de fichiers ajax. Ceux qui sont intéressés peuvent en savoir plus.

Voici une brève introduction à ajaxFileUpload Le plug-in jQuery AjaxFileUpload peut réaliser le téléchargement de fichiers ajax. Notre projet utilise une architecture qui sépare jsp et js, le code est donc le suivant.

La première est la partie jsp :

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

Ici, je vais vous expliquer pourquoi le formulaire est commenté, car il y en a déjà un autre dans ma jsp Pendant le processus de débogage, un formulaire a trouvé un conflit possible et a commenté le formulaire. Il s'avère que ajaxFileUpload peut être soumis sans formulaire. Voici la partie du code js :

$(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);  
      }*/  
    });  
 
  });  
 
});

Je ne suis pas bon en js, mais je peux utiliser ce js et je ne peux pas le copier complètement. Il doit être combiné avec la situation réelle de la structure du projet, mais les paramètres généraux sont commentés. Assurez-vous de noter que le type de publication est cohérent avec la méthode method=RequestMethod.POST de la méthode Controller correspondant à la requête. Notez dataType:'json', assurez-vous de faire attention au cas de json.

ps : Ici, je veux dire que le jugement que j'utilise data.success est lié à la classe d'entité suivante AjaxJson. Faites attention ! ! ! ! !

Au fait, le js correspondant doit être introduit dans jsp comme suit :

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

Le téléchargement introduit dans le premier paragraphe est le contenu de js ci-dessus, notre js importé a été encapsulé, il suffit donc de l'écrire directement. En fonction de la situation réelle, le fichier js suivant du plug-in jQuery AjaxFileUpload sera utilisé.

L'étape suivante est la réponse de la méthode 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!!!"); 
   
}

Cette méthode ne doit prêter attention qu'à quelques-uns points, et tout le reste va bien. En ce qui concerne la logique métier de l'auteur, la première méthode de requête dans @RequestMapping est POST et le deuxième paramètre transmis est MultipartFile n_file. Ce n_file doit correspondre à l'attribut name dans la balise d5fd7aea971a85678ba271703566ebfd en jsp. La troisième chose à noter est l'annotation @ResponseBody sur la valeur de retour Sting. Les deux autres éléments auxquels il faut prêter attention sont AjaxJson et ObjectMapper.

AjaxJson est une classe de modèle encapsulée par elle-même, qui est utilisée pour gérer ajax. Quant à ObjectMapper, elle est utilisée pour convertir des types. Vous pouvez également utiliser Baidu ou le brainstorming. comment l'utiliser. Collez AjaxJson ci-dessous :

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

Ce qui précède est l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'apprentissage de chacun. Pour un contenu plus connexe, veuillez faire attention au réseau chinois PHP !

Recommandations associées :

Comment charger l'historique de navigation lors de l'utilisation de la bibliothèque de classes mobiles jQuery

La technologie Jquery ajax implémente l'intervalle N Transmettre de la valeur à une page en quelques secondes

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!