Javaシングルファイル、マルチファイルアップロード/アップロード進捗バーの実装

10693 ワード
ブログアドレス:https://ainyi.com/76
日常、仕事
ここでまとめてアップしましょう(以前やった練習なので、個人ブログにまとめましょう)
JAva ssmフレームワーク実装ファイルアップロード実装:単一ファイルアップロード、マルチファイルアップロード(ラジオと複数選択)、ajaxで非同期リフレッシュし、現在のインタフェースにアップロードされたファイルを表示
バックエンド
まずspringmvcのプロファイルでアップロードファイル解析器を構成します.


  
  
    209715200
  
  
    4096

次にpom.xmlでアップロードファイルを構成する依存性

  commons-io
  commons-io
  2.4



  commons-fileupload
  commons-fileupload
  1.3.1



  org.apache.commons
  commons-lang3
  3.3.2

単一ファイルのアップロード
/**
 *      
 * @param file
 * @param request
 * @return
 * @throws IllegalStateException
 * @throws IOException
 * @throws JSONException
 */
public static String simUpload(MultipartFile file, HttpServletRequest request) 
        throws IllegalStateException, IOException, JSONException{
    
    if(!file.isEmpty()){
        String path = request.getSession().getServletContext().getRealPath("/upload");
        //    
        File parent = new File(path);
        if(!parent.exists()) parent.mkdirs();
        
        HashMap map = new HashMap();
        
        String oldName = file.getOriginalFilename();
        
        long size = file.getSize();
        
        //  TmFileUtil               
        //      
        String sizeString = TmFileUtil.countFileSize(size);
        //       
        String ext = TmFileUtil.getExtNoPoint(oldName);
        //     ，10      
        String newFileName = TmFileUtil.generateFileName(oldName, 10, "yyyyMMddHHmmss");
        
        String url = "upload/"+newFileName;
        
        //    ，parent  
        file.transferTo(new File(parent, newFileName));
        
        map.put("oldname",oldName);//     
        map.put("ext",ext);
        map.put("size",sizeString);
        map.put("name",newFileName);//     
        map.put("url",url);
        
        // json       
        return JSONUtil.serialize(map);
    }else{
        return null;
    }
}

マルチファイルアップロード(==ラジオファイル==と==マルチファイル==の2種類を統合)
/**
 *      
 * @param files
 * @param request
 * @return
 * @throws IllegalStateException
 * @throws IOException
 * @throws JSONException
 */
public static List> mutlUpload(MultipartFile[] files, HttpServletRequest request) 
        throws IllegalStateException, IOException, JSONException{
    
    if(files.length > 0){
        String path = request.getSession().getServletContext().getRealPath("/upload");
        //    
        File parent = new File(path);
        if(!parent.exists()) parent.mkdirs();
        
        //               
        List> listMap = new ArrayList>();
        
        //          
        for (MultipartFile file : files) {
            
            //  map            
            HashMap map = new HashMap();
            
            String oldName = file.getOriginalFilename();

            long size = file.getSize();
            
            //  TmFileUtil               
            //      
            String sizeString = TmFileUtil.countFileSize(size);
            //       
            String ext = TmFileUtil.getExtNoPoint(oldName);
            //     ，10      
            String newFileName = TmFileUtil.generateFileName(oldName, 10, "yyyyMMddHHmmss");
            
            String url = "upload/"+newFileName;
            
            //    ，parent  
            file.transferTo(new File(parent, newFileName));
            
            map.put("oldname",oldName);//     
            map.put("ext",ext);
            map.put("size",sizeString);
            map.put("name",newFileName);//     
            map.put("url",url);
            
            listMap.add(map);
        }
        
        // json       
        return listMap;
    }else{
        return null;
    }
}

フロントエンド
フロントエンドコード:ファイルが複数選択され、実際には

Multipleプロパティを追加
onchangeイベントコード
//      
function uploadFile(obj){
  //      FormData   ，                
  //    form          name   value       queryString
  let form = new FormData();
  let fileObj = obj.files[0];
  form.append('doc',fileObj);
  
  // ajax   ...
}

//      (  )
function mutiFiles(obj){
  let form = new FormData();
  let fileObj = obj.files;
  let length = fileObj.length;
  //   fileObj      
  // let filese = Array.from(fileObj);
  for(let i = 0; i < length; i++){
    form.append('doc', fileObj[i]);
  }

  // ajax   ...
}

//      (  ：        ，             )
function multipartone(){
  let file1 = $('.fileupon11').get(0).files[0];
  let file2 = $('.fileupon12').get(0).files[0];
  let file3 = $('.fileupon13').get(0).files[0];
  //     ，     
  isEmpty(file1) && isEmpty(file2) && isEmpty(file3) return;
        
  let form = new FormData();
  //      ，   controller      
  form.append('doc', file1);
  form.append('doc', file2);
  form.append('doc', file3);
  
  // ajax   ...
}

現在のインタフェースにアップロードされたファイルをジャンプせずに表示するにはajax非同期リクエストを使用します.
ただし、ここではFormData()を使用してファイルオブジェクトを格納しています.ajaxはこれらのパラメータを割り当ててファイルアップロードを実現する必要があります.
$.ajax({
　type: "post",
　data: form,  // FormData()  
  url: basePath+"/upload/mutl",
　contentType: false, //   false         Content-Type
　processData: false, //   false     jQuery   formdata      , XMLHttpRequest   formdata        
　success: function(data){
    // TODO
　}
})

コントロールレイヤ呼び出し
package com.krry.controller;

import java.io.IOException;
import java.util.HashMap;
import java.util.List;

import javax.servlet.http.HttpServletRequest;

import org.apache.struts2.json.JSONException;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartFile;

import com.krry.util.UploadUtil;

/**
 *      
 * KrryUploadController
 * @author krry
 * @version 1.0.0
 *
 */
@Controller
@RequestMapping("/upload")
public class KrryUploadController {
    
    /**
     *      
     * @param file
     * @param request
     * @return
     * @throws IllegalStateException
     * @throws IOException
     * @throws JSONException
     */
    @ResponseBody
    @RequestMapping(value = "/file")
    public String krryupload(@RequestParam("doc") MultipartFile file, HttpServletRequest request) throws IllegalStateException, IOException, JSONException{

        //         ，         
        return UploadUtil.simUpload(file, request);
    }
    
    /**
     *      
     * @param file
     * @param request
     * @return
     * @throws IllegalStateException
     * @throws IOException
     * @throws JSONException
     */
  //    MultipartFile[] file               ，file       file   input   name，               MultipartFile  ，
  //              MultipartFile[]  ，      [Lorg.springframework.web.multipart.MultipartFile;.()  ，
  //      @RequestParam    （    MultipartFile     ），        ：@RequestParam("file") MultipartFile[] files。
    @ResponseBody
    @RequestMapping(value = "/mutl")
    public List> krryuploadMutl(@RequestParam("doc") MultipartFile[] file, HttpServletRequest request) throws IllegalStateException, IOException, JSONException{
        //         ，         
        return UploadUtil.mutlUpload(file, request);
    }
}

進捗バー
アップロードの進捗バーを表示するには、オリジナルajaxメソッドを使用します.
function uploadFile(obj) {
  // ...
  //              

  //      ajax   
  var xhr = new XMLHttpRequest();

  //        、URL           。true   
  //       。             ，        ，       ，              
  xhr.open("post", basePath+"/upload/file", true);

  //            
  xhr.onreadystatechange = function(){
  if(xhr.readyState==4 && xhr.status==200){ //    4   200            
    //            
    var data = xhr.responseText.trim();
    jdata = eval("("+data+")");
    krry_uploadsuccess(jdata);
  }
  };
  //          
  xhr.upload.addEventListener("progress", progressFunction, false);
  //   http  :         ，     
  xhr.send(form);
}


//          
function progressFunction(event) {
  let prograssbarDom = document.getElementById("prograssbar");
  let fileRea = document.getElementById("fileRea");
  if (prograssbarDom && event.lengthComputable) {
    let percent = event.loaded / event.total; //         
    let p = Math.floor(percent*100);
    prograssbarDom.style.width = p+"%";
    fileRea.innerHTML = p+"%";
  }
}

ファイルサイズを最適化するコードを添付します.
/**
 *                
 * com.krry.uitl 
 *    ：format
 * @author krry 
 * @param size
 * @return String
 * @exception 
 * @since  1.0.0
 */
public static String format(long size){
    float fsize = size;
    String fileSizeString;
    if (fsize < 1024) {
        fileSizeString = String.format("%.2f", fsize) + "B"; //2f        
    } else if (fsize < 1048576) {
        fileSizeString = String.format("%.2f", fsize/1024) + "KB";
    } else if (fsize < 1073741824) {
        fileSizeString = String.format("%.2f", fsize/1024/1024) + "MB";
    } else if (fsize < 1024 * 1024 * 1024) {
        fileSizeString = String.format("%.2f", fsize/1024/1024/1024) + "GB";
    } else {
        fileSizeString = "0B";
    }
    return fileSizeString;
}

ブログアドレス:https://ainyi.com/76
コマンドプロンプトからdnscmdコマンドでDNSサーバに登録する方法
【LeetCode】 best-time-to-buy-and-sell-stock-i ii iii iv