Detaillierte Erläuterung des Datei-Upload-Funktionscodes mithilfe der Kombination von Java und WebUploader-javaLernprogramm-php.cn

In diesem Artikel wird hauptsächlich Java in Kombination mit WebUploader vorgestellt, um Datei Upload Funktion, der Code ist einfach und leicht zu verstehen, sehr gut und hat Referenzwert. Freunde, die ihn benötigen, können darauf verweisen

Ich bin auch auf das Problem des Datei-Uploads gestoßen, als ich zuvor ein kleines Projekt geschrieben habe , aber ich habe keine gute Lösung gefunden, als ich online nach verschiedenen Lösungen gesucht habe.

Einfaches Hochladen und Speichern von Dateien und normalen Daten

jsp Seite:

<%@ 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>

Nach dem Login kopieren

Servlet:

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

Nach dem Login kopieren

Verwenden Sie die WebUploader-Komponente zum Hochladen

Sharding, Parallelität, Vorschau, Komprimierung, mehrere Möglichkeiten zum Hochladen Ordner hinzufügen (Dateien Mehrfachauswahl, Drag & Drop usw.), Miaozhuan

Seitenstil verwendet

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

Nach dem Login kopieren

, um eine Datei zu generieren Namensliste und Anzeige des Upload-Fortschritts in Echtzeit, Anzeige von
Miniaturansichten
Dateiliste hinzufügen p,
<p id="fileList"></p>
Generieren Sie Miniaturansichten und zeigen Sie den Upload-Fortschritt an

// 生成缩略图和上传进度
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) + "%");
});

Nach dem Login kopieren

Drag-and-Drop-Upload, Einfügen-Upload
Erstellen Sie einen Drag Bereich und Stile festlegen:

<style type="text/css">
 #dndArea {
  width: 200px;
  height: 100px;
  border-color: red;
  border-style: dashed;
 }
</style>  
<!-- 创建用于拖拽的区域 -->
<p id="dndArea"></p>

Nach dem Login kopieren

DND-Bereichskonfiguration hinzufügen (Drag & Drop aktivieren) in der Grundkonfiguration

Antworten außerhalb des Ziehbereichs abschirmen

Einfügefunktion aktivieren

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

Nach dem Login kopieren

Blockiertes Hochladen von Dateien

Die Das Frontend generiert einen

md5 basierend auf der zu sendenden Datei Die Zeichenfolge wird an den Hintergrund gesendet, und der Hintergrund erstellt einen Ordner, der nach der MD5-Zeichenfolge benannt ist. end sendet die Datei in Blöcken und sendet die Dateiblock-Seriennummer an den Hintergrund. Nach dem Empfang der Datei speichert der Hintergrund sie entsprechend dem Seriennummernnamen. Nach dem Senden benachrichtigt es den Hintergrund, die Dateien zusammenzuführen.

Front-End-Konfiguration, ob Chunking aktiviert werden soll, Chunk-Größe, Anzahl der Threads usw.

// 上传基本配置
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
}  
);

Nach dem Login kopieren

Front-End-Überwachung Chunks

können in drei Zeitpunkte unterteilt werden:

before-send-file: Diese Methode wird aufgerufen, bevor die Datei hochgeladen wird (it wird nur aufgerufen, bevor eine Datei hochgeladen wird). >

before-send: Diese Methode wird aufgerufen, bevor jede mehrteilige Datei hochgeladen wird (wird vor jedem mehrteiligen Upload aufgerufen).

Mit dieser Methode können Sie die MD5-Zeichenfolge an den Hintergrund senden. Der Hintergrund beurteilt, ob bereits ein Block vorhanden ist, und entscheidet, ob er gesendet werden soll, um die Funktion der Wiederaufnahme der Übertragung zu erreichen an einem Haltepunkt

after-send-file: Diese Methode wird aufgerufen, nachdem alle Dateien fehlerfrei hochgeladen wurden (wird aufgerufen, nachdem alle mehrteiligen Uploads abgeschlossen wurden).

Mit dieser Methode können Sie den Hintergrund benachrichtigen, alle Chunks zusammenzuführen.

Das Front-End ruft die MD5-Zeichenfolge der Datei ab und sendet sie an den Hintergrund , Hintergrundempfang erstellt einen Ordner, wenn der Ordner nicht existiert, speichert die in Blöcken gesendete Datei

fügt Status-Tag hinzu

speichert die Datei

 // 监听分块上传的时间点，断点续传
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() {
  }
 }
);

Nach dem Login kopieren

Das Frontend benachrichtigt die Aktion zum Zusammenführen von Dateien

$("#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>");

Nach dem Login kopieren

Frontend hinzugefügt:

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

Nach dem Login kopieren

Neue Ergänzung
Aktion zusammenführen:

// 通知合并分块
$.ajax(
  {
    type:"POST",
    url:"${pageContext.request.contextPath}/UploadActionServlet?action=mergeChunks",
    data:{
      fileMd5:fileMd5
    },
    success:function(response){
    }
  }
);

Nach dem Login kopieren

Haltepunkt fortsetzen

Verifizierung hinzufügen, bevor die Front-End-Seite an gesendet wird Überprüfen Sie, ob die Blöcke hochgeladen wurden

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

Nach dem Login kopieren

Verifizierung in Aktion hinzufügen

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung des Datei-Upload-Funktionscodes mithilfe der Kombination von Java und WebUploader. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!