ajaxFileUpload 非同期ファイルアップロードの使用方法の概要

この記事では、ファイルを非同期でアップロードするためのajaxFileUploadの簡単な使い方を中心に紹介します。ajaxファイルアップロードを実現できるjQueryプラグインAjaxFileUpload。ご興味がございましたら、詳細をご覧ください

ここでは、ajaxFileUpload について簡単に説明します。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> -->

ここでは、JSP にすでに別のフォームがあるため、フォームがコメントアウトされている理由について説明します。事実は、ajaxFileUpload がフォームなしで送信できることを証明しています。 以下は、js コードの部分です。 js. プロジェクト構造の実際の状況と組み合わせる必要がありますが、一般的なパラメータがどのようなものであるかについてのコメントがすべて書かれています。投稿のタイプは、リクエストに対応するコントローラー メソッドのメソッド=RequestMethod.POST と一致していることに注意してください。 dataType:'json' に注意してください。json の大文字と小文字に注意してください。

追記: ここで、data.success を使用する判断は、後続のエンティティ クラス AjaxJson に関連していることを伝えたいと思います。 ！ ！ ！ ！

ちなみに、対応する js は次のように jsp に導入する必要があります:

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

最初の段落で紹介したアップロードは上記の js の内容をカプセル化したものです。実際の状況に基づいて、jQuery プラグイン AjaxFileUpload の次の js ファイルが使用されます。

次のステップは、Controller メソッドがどのように応答するかです。

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

このメソッドのいくつかの点に注意してください。残りは、@RequestMapping の最初のリクエスト メソッドは POST です。 2 番目に渡されるパラメータは MultipartFile n_file であり、この n_file は JSP の タグの name 属性に対応する必要があります。 3 番目に注目すべきは、戻り値 Sting の @ResponseBody アノテーションです。残りの 2 つは、AjaxJson と ObjectMapper です。

AjaxJson は、Ajax を処理するために使用される、独自にカプセル化されたモデル クラスです。ObjectMapper については、Baidu またはブレインストーミングを使用することができます。以下に AjaxJson を貼り付けます:

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

上記がこの記事の全内容です。その他の関連コンテンツについては、PHP 中国語 Web サイトに注目してください。

関連する推奨事項:

jQuery モバイル クラス ライブラリを使用するときにナビゲーション履歴を読み込む方法

JQuery Ajax テクノロジーにより、N 秒ごとにページに値を送信することが実現

以上がajaxFileUpload 非同期ファイルアップロードの使用方法の概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。