지역 사회 배우다 도구 라이브러리 여가
찾다
한국어
집 > Java > java지도 시간 > Java와 WebUploader의 조합을 이용한 파일 업로드 기능 코드에 대한 자세한 설명

Java와 WebUploader의 조합을 이용한 파일 업로드 기능 코드에 대한 자세한 설명

黄舟
풀어 주다： 2017-03-30 10:11:32
원래의
2401명이 탐색했습니다.

이 글에서는 파일업로드기능도 간단하고 이해하기 쉽고, 아주 좋고, 참고할만한 가치가 있어요. 필요한 친구들이 참고하면 좋아요

저도 예전에 작은 프로젝트를 작성할 때 파일 업로드 문제에 직면했습니다. , 그리고 좋은 것을 찾지 못했습니다. 온라인에서 다양한 솔루션을 검색할 때 WebUploader를 보았지만 이번에는 더 자세히 설명하지 않았습니다.

단순 파일 및 일반 데이터 업로드 및 저장

jsp 페이지: 

<%@ page language="java" contentType="text/html; charset=UTF-8"
 pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
 <form action="${pageContext.request.contextPath }/FileUploadServlet" method="post" enctype="multipart/form-data">
  文件：<input type="file" value="请选择文件" name="file" /> <br/>
  信息：<input type="text" name="info" /> <br/>
  <input type="submit" value="提交" />
 </form>
</body>
</html>
로그인 후 복사

서블릿: 

package com.yihengliu.web.action;
import java.io.File;
import java.io.IOException;
import java.io.InputStream;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.apache.commons.fileupload.FileItem;
import org.apache.commons.fileupload.disk.DiskFileItemFactory;
import org.apache.commons.fileupload.servlet.ServletFileUpload;
import org.apache.commons.io.FileUtils;
/**
 * Servlet user to accept file upload
 */
public class FileUploadServlet extends HttpServlet {
 private static final long serialVersionUID = 1L;
 private String serverPath = "e:/";
 protected void doGet(HttpServletRequest request, HttpServletResponse response)
   throws ServletException, IOException {
  response.getWriter().append("Served at: ").append(request.getContextPath());
  System.out.println("进入后台...");
  // 1.创建DiskFileItemFactory对象，配置缓存用
  DiskFileItemFactory diskFileItemFactory = new DiskFileItemFactory();
  // 2. 创建 ServletFileUpload对象
  ServletFileUpload servletFileUpload = new ServletFileUpload(diskFileItemFactory);
  // 3. 设置文件名称编码
  servletFileUpload.setHeaderEncoding("utf-8");
  // 4. 开始解析文件
  try {
   List<FileItem> items = servletFileUpload.parseRequest(request);
   for (FileItem fileItem : items) {
    if (fileItem.isFormField()) { // >> 普通数据
     String info = fileItem.getString("utf-8");
     System.out.println("info:" + info);
    } else { // >> 文件
     // 1. 获取文件名称
     String name = fileItem.getName();
     // 2. 获取文件的实际内容
     InputStream is = fileItem.getInputStream();
     // 3. 保存文件
     FileUtils.copyInputStreamToFile(is, new File(serverPath + "/" + name));
    }
   }
  } catch (Exception e) {
   e.printStackTrace();
  }
 }
 protected void doPost(HttpServletRequest request, HttpServletResponse response)
   throws ServletException, IOException {
  doGet(request, response);
 }
}
로그인 후 복사

WebUploader 구성 요소를 사용하여 업로드

샤딩, 동시성, 미리 보기, 압축, 폴더 추가를 위한 다양한 방법(다중 파일 선택) , 드래그 앤 드롭 드래그 등), Miaozhuan

페이지 스타일은 

<html>
<title>使用webuploader上传</title>
<!-- 1.引入文件 -->
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/js/webuploader.css" rel="external nofollow" >
<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/js/webuploader.js"></script>
</head>
<body>
 <!-- 2.创建页面元素 -->
 <p id="upload">
  <p id="filePicker">文件上传</p>
 </p>
 <!-- 3.添加js代码 -->
 <script type="text/javascript">
  var uploader = WebUploader.create(
   {
    swf:"${pageContext.request.contextPath }/js/Uploader.swf",
    server:"${pageContext.request.contextPath }/FileUploadServlet",
    pick:"#filePicker",
    auto:true
   }  
  );
 </script>
</body>
</html>
로그인 후 복사

  • 를 사용하여 파일 이름 목록을 생성하고 업로드 진행 상황을 표시합니다.

    썸네일 표시

  • 파일 목록 p 추가,

    <p id="fileList"></p>

  • 썸네일 생성 및 업로드 진행 상황 표시 

    • // 生成缩略图和上传进度
uploader.on("fileQueued", function(file) {
  // 把文件信息追加到fileList的p中
  $("#fileList").append("<p id=&#39;" + file.id + "&#39;><img/><span>" + file.name + "</span><p><span class=&#39;percentage&#39;><span></p></p>")
  // 制作缩略图
  // error：不是图片，则有error
  // src:代表生成缩略图的地址
  uploader.makeThumb(file, function(error, src) {
   if (error) {
    $("#" + file.id).find("img").replaceWith("<span>无法预览 </span>");
   } else {
    $("#" + file.id).find("img").attr("src", src);
   }
  });
 }
);
// 监控上传进度
// percentage:代表上传文件的百分比
uploader.on("uploadProgress", function(file, percentage) {
 $("#" + file.id).find("span.percentage").text(Math.round(percentage * 100) + "%");
});
    로그인 후 복사
  • 드래그 업로드, 붙여넣기 업로드

  • 드래그 영역 만들기 및 스타일 설정: 

    • <style type="text/css">
 #dndArea {
  width: 200px;
  height: 100px;
  border-color: red;
  border-style: dashed;
 }
</style>  
<!-- 创建用于拖拽的区域 -->
<p id="dndArea"></p>
    로그인 후 복사
  • 기본 구성에 dnd 영역 구성 추가(드래그 앤 드롭 활성화)

드래그 영역 외부 응답 보호

붙여넣기 기능 활성화

var uploader = WebUploader.create(
 {  swf:"${pageContext.request.contextPath }/js/Uploader.swf",
server:"${pageContext.request.contextPath }/FileUploadServlet",
  pick:"#filePicker",
  auto:true,
  // 开启拖拽
  dnd:"#dndArea",
  // 屏蔽拖拽区域外的响应
  disableGlobalDnd:true,
  // 
 }  
);
로그인 후 복사

  • 파일 업로드 차단

프런트 엔드에서

md5 string 을 백그라운드로 전송해야 하는 파일을 기준으로 백그라운드는 md5 문자열 이름을 딴 폴더를 생성하고 파일 블록 일련번호를 수신한 후 백그라운드로 보냅니다. 파일, 백그라운드는 일련번호 이름에 따라 저장합니다.

    프런트엔드 구성, 청크 활성화 여부, 청크 크기, 스레드 수 등

  • // 上传基本配置
var uploader = WebUploader.create(
{
 swf:"${pageContext.request.contextPath }/js/Uploader.swf",
 server:"${pageContext.request.contextPath }/FileUploadServlet",
 pick:"#filePicker",
 auto:true,
 dnd:"#dndArea",
 disableGlobalDnd:true,
 paste:"#uploader",

 // 分块上传设置
 // 是否分块
 chunked:true,
 // 每块文件大小（默认5M）
 chunkSize:5*1024*1024,
 // 开启几个并非线程（默认3个）
 threads:3,
 // 在上传当前文件时，准备好下一个文件
 prepareNextFile:true
}  
);
    로그인 후 복사
    프런트엔드 모니터링 청킹

    • 은 세 가지 시점으로 나눌 수 있습니다:

    before-send-file: 이 메소드는 파일이 업로드되기 전에 호출됩니다(파일 하나가 업로드된 후에만 업로드됩니다).

    • md5 문자열을 얻을 수 있습니다. 백그라운드에서 청크된 파일을 저장하기 위한 디렉토리 이름으로 이 메소드에서 파일의 전송

    전송: 이 메소드는 각 부분 파일이 업로드되기 전에 호출됩니다(각 부분 업로드 전에 호출됨) ).

    • 이 방법으로 md5 문자열을 백그라운드로 보낼 수 있으며, 백그라운드는 이미 블록이 있는지 판단하고 전송할지 여부를 결정하여 전송을 재개하는 기능을 구현합니다. 중단점에서

    after-send-file: 이 메소드는 모든 파일이 오류 없이 업로드된 후 호출됩니다(모든 다중 부분 업로드가 완료된 후 호출됨).

    • 이 방법으로 모든 청크를 병합하도록 배경에 알릴 수 있습니다.

    프런트 엔드는 파일 md5 문자열을 가져와서 배경으로 보냅니다. , 백그라운드 수신은 폴더가 없으면 폴더를 생성하고 전송된 파일을 청크로 저장

  •  // 监听分块上传的时间点，断点续传
var fileMd5;
WebUploader.Uploader.register({
 "before-send-file":"beforeSendFile",
 "before-send":"beforeSend",
 "after-send-file":"afterSendFile"
 },{
  beforeSendFile:function(file) {
   // 创建一个deffered,用于通知是否完成操作
   var deferred = WebUploader.Deferred();
   // 计算文件的唯一标识，用于断点续传和妙传
   (new WebUploader.Uploader()).md5File(file, 0, 5*1024*1024)
    .progress(function(percentage){
     $("#"+file.id).find("span.state").text("正在获取文件信息...");
    })
    .then(function(val) {
     fileMd5 = val;
     $("#" + file.id).find("span.state").text("成功获取文件信息");
     // 放行
     deferred.resolve();
    });
   // 通知完成操作
   return deferred.promise();
  },
  beforeSend:function() {
   var deferred = WebUploader.Deferred();
   // 发送文件md5字符串到后台
   this.owner.options.formData.fileMd5 = fileMd5;
   deferred.resolve();
   return deferred.promise();
  },
  afterSendFile:function() {
  }
 }
);
    로그인 후 복사
    • 상태 태그 추가
$("#fileList").append("<p id=&#39;" + file.id + "&#39;>
<img/>
<span>" + file.name + "</span>
<p>
<span class=&#39;state&#39;>
</span>
</p>
<p>
<span class=&#39;percentage&#39;>
</span>
</p>
</p>");
로그인 후 복사

파일 저장

// 4. 开始解析文件
// 文件md5获取的字符串
String fileMd5 = null;
// 文件的索引
String chunk = null;
try {
  List<FileItem> items = servletFileUpload.parseRequest(request);
  for (FileItem fileItem : items) {
    if (fileItem.isFormField()) { // >> 普通数据
      String fieldName = fileItem.getFieldName();
      if ("info".equals(fieldName)) {
        String info = fileItem.getString("utf-8");
        System.out.println("info:" + info);
      }
      if ("fileMd5".equals(fieldName)) {
        fileMd5 = fileItem.getString("utf-8");
        System.out.println("fileMd5:" + fileMd5);
      }
      if ("chunk".equals(fieldName)) {
        chunk = fileItem.getString("utf-8");
        System.out.println("chunk:" + chunk);
      }
    } else { // >> 文件
      /*// 1. 获取文件名称
      String name = fileItem.getName();
      // 2. 获取文件的实际内容
      InputStream is = fileItem.getInputStream();
      // 3. 保存文件
      FileUtils.copyInputStreamToFile(is, new File(serverPath + "/" + name));*/
      // 如果文件夹没有创建文件夹
      File file = new File(serverPath + "/" + fileMd5);
      if (!file.exists()) {
        file.mkdirs();
      }
      // 保存文件
      File chunkFile = new File(serverPath + "/" + fileMd5 + "/" + chunk);
      FileUtils.copyInputStreamToFile(fileItem.getInputStream(), chunkFile);
    }
  }
로그인 후 복사

    프런트 엔드에서 파일 병합 작업 알림

    • 프런트 엔드에 다음이 추가됩니다. 
// 通知合并分块
$.ajax(
  {
    type:"POST",
    url:"${pageContext.request.contextPath}/UploadActionServlet?action=mergeChunks",
    data:{
      fileMd5:fileMd5
    },
    success:function(response){
    }
  }
);
로그인 후 복사

새로 만들기

병합 작업:

package com.yihengliu.web.action;
import java.io.File;
import java.io.FileFilter;
import java.io.FileInputStream;
import java.io.FileOutputStream;
import java.io.IOException;
import java.nio.channels.FileChannel;
import java.util.ArrayList;
import java.util.Arrays;
import java.util.Collections;
import java.util.Comparator;
import java.util.List;
import java.util.UUID;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
/**
 * 合并上传文件
 */
public class UploadActionServlet extends HttpServlet {
  private static final long serialVersionUID = 1L;
  private String serverPath = "e:/";
  protected void doGet(HttpServletRequest request, HttpServletResponse response)
      throws ServletException, IOException {
    System.out.println("进入合并后台...");
    String action = request.getParameter("action");
    if ("mergeChunks".equals(action)) {
      // 获得需要合并的目录
      String fileMd5 = request.getParameter("fileMd5");
      // 读取目录所有文件
      File f = new File(serverPath + "/" + fileMd5);
      File[] fileArray = f.listFiles(new FileFilter() {
        // 排除目录，只要文件
        @Override
        public boolean accept(File pathname) {
          if (pathname.isDirectory()) {
            return false;
          }
          return true;
        }
      });
      // 转成集合，便于排序
      List<File> fileList = new ArrayList<File>(Arrays.asList(fileArray));
      // 从小到大排序
      Collections.sort(fileList, new Comparator<File>() {
        @Override
        public int compare(File o1, File o2) {
          if (Integer.parseInt(o1.getName()) < Integer.parseInt(o2.getName())) {
            return -1;
          }
          return 1;
        }
      });
      // 新建保存文件
      File outputFile = new File(serverPath + "/" + UUID.randomUUID().toString() + ".zip");
      // 创建文件
      outputFile.createNewFile();
      // 输出流
      FileOutputStream fileOutputStream = new FileOutputStream(outputFile);
      FileChannel outChannel = fileOutputStream.getChannel();
      // 合并
      FileChannel inChannel;
      for (File file : fileList) {
        inChannel = new FileInputStream(file).getChannel();
        inChannel.transferTo(0, inChannel.size(), outChannel);
        inChannel.close();
        // 删除分片
        file.delete();
      }
      // 关闭流
      fileOutputStream.close();
      outChannel.close();
      // 清除文件加
      File tempFile = new File(serverPath + "/" + fileMd5);
      if (tempFile.isDirectory() && tempFile.exists()) {
        tempFile.delete();
      }
      System.out.println("合并文件成功");
    }
  }
  protected void doPost(HttpServletRequest request, HttpServletResponse response)
      throws ServletException, IOException {
    doGet(request, response);
  }
}
로그인 후 복사

    중단점 재개

    • 청크가 업로드되었는지 확인하기 위해 프런트 엔드 페이지를 보내기 전에 확인 추가
beforeSend:function(block) {
        var deferred = WebUploader.Deferred();
        // 支持断点续传，发送到后台判断是否已经上传过
        $.ajax(
          {
            type:"POST",
            url:"${pageContext.request.contextPath}/UploadActionServlet?action=checkChunk",
            data:{
              // 文件唯一表示                
              fileMd5:fileMd5,
              // 当前分块下标
              chunk:block.chunk,
              // 当前分块大小
              chunkSize:block.end-block.start
            },
            dataType:"json",
            success:function(response) {
              if(response.ifExist) {
                // 分块存在，跳过该分块
                deferred.reject();
              } else {
                // 分块不存在或不完整，重新发送
                deferred.resolve();
              }
            }
          }
        );
        // 发送文件md5字符串到后台
        this.owner.options.formData.fileMd5 = fileMd5;
        return deferred.promise();
      }
로그인 후 복사

    인증 추가 실행 중

  • else if ("checkChunk".equals(action)) {
    // 校验文件是否已经上传并返回结果给前端
    // 文件唯一表示                
    String fileMd5 = request.getParameter("fileMd5");
    // 当前分块下标
    String chunk = request.getParameter("chunk");
    // 当前分块大小
    String chunkSize = request.getParameter("chunkSize");
    // 找到分块文件
    File checkFile = new File(serverPath + "/" + fileMd5 + "/" + chunk);
    // 检查文件是否存在，且大小一致
    response.setContentType("text/html;charset=utf-8");
    if (checkFile.exists() && checkFile.length() == Integer.parseInt((chunkSize))) {
      response.getWriter().write("{\"ifExist\":1}");
    } else {
      response.getWriter().write("{\"ifExist\":0}");
    }
  }
    로그인 후 복사

    위 내용은 Java와 WebUploader의 조합을 이용한 파일 업로드 기능 코드에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨：
java
원천：php.cn
이전 기사：Excel을 통해 객체 배열 내보내기 기능을 구현하기 위한 Java용 샘플 코드 공유 다음 기사：지정된 디렉터리에 파일이나 폴더를 복사하는 Java 예제에 대한 자세한 소개
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
자동 반올림 없이 JavaScript에서 문자열을 19자리 숫자로 변환하는 방법은 무엇입니까? 숫자로 변환하려는 경우 문자열 입력 숫자 input="6145390195186705543"(6145390195186705000)이 있습니다.
에서 2024-03-30 14:42:35
0
1
367
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿