JavaとWebUploaderを組み合わせたファイルアップロード機能コードの詳細説明-＆＃＆チュートリアル-php.cn

ホームページ

Java

＆＃＆チュートリアル

JavaとWebUploaderを組み合わせたファイルアップロード機能コードの詳細説明

黄舟

Mar 30, 2017 am 10:11 AM

java

この記事では主に、Java と WebUploader を組み合わせてファイル upload 関数を実装する方法を紹介します。コードはシンプルで簡単です。理解しました、とても良いです、それを必要とする友人はそれを参照できます

私も以前小さなプロジェクトを書いていたときにファイルのアップロードの問題に遭遇しましたが、良い解決策が見つかりませんでした。以前に 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コンポーネントを使用してアップロードシャーディング、同時実行、プレビュー、圧縮、フォルダーを追加する複数の方法(複数のファイル選択、ドラッグしてドロップなど)、素晴らしいヒント

ページスタイルの使用法

<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 id="fileList"></p>

// 生成缩略图和上传进度
uploader.on("fileQueued", function(file) {
  // 把文件信息追加到fileList的p中
  $("#fileList").append("<p id=&#39;" + file.id + "&#39;><img / alt="JavaとWebUploaderを組み合わせたファイルアップロード機能コードの詳細説明" ><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>

貼り付け機能を有効にします

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

文字列を生成しますこれを送信する必要があり、それをバックエンドに送信すると、バックエンドは 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
}  
);

フロントエンド監視ブロック

は、次の 3 つの時点に分けることができます:

before-send-file: このメソッドは、ファイルがアップロードされる前に呼び出されます (ファイルがアップロードされる前にのみ呼び出されます)。 1 つのファイルがアップロードされます)。
バックグラウンドでチャンクファイルを保存するためのディレクトリ名として、このメソッドでファイルの md5 文字列を取得できます。

before-send: このメソッドは、各チャンクファイルがアップロードされる前に呼び出されます。 (各チャンクファイルがアップロードされる前に呼び出されます)。

このメソッドでは 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 / alt="JavaとWebUploaderを組み合わせたファイルアップロード機能コードの詳細説明" >
<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){
    }
  }
);

New

mergeアクション:

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 中国語 Web サイトの他の関連記事を参照してください。

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

Javaプラットフォームは独立していますか？May 09, 2025 am 12:11 AM

Javaは、Java Virtual Machines（JVMS）とBytecodeに依存している「Write and Averywherewherewherewherewherewherewhere」の哲学のために、プラットフォームに依存しません。 1）Javaコードは、JVMによって解釈されるか、地元でその場でコンパイルされたBytecodeにコンパイルされます。 2）ライブラリの依存関係、パフォーマンスの違い、環境構成に注意してください。 3）標準ライブラリを使用して、クロスプラットフォームのテストとバージョン管理がプラットフォームの独立性を確保するためのベストプラクティスです。

Javaのプラットフォームの独立性についての真実：それは本当に簡単ですか？May 09, 2025 am 12:10 AM

java'splatformindepenceisnotsimple; itinvolvescomplexities.1）jvmcompatibilitymustbeensuredacrosplatforms.2）nativeLibrariesandsystemCallSneedCarefulHandling.3）依存症の依存症の依存症と依存症の依存症と依存関係の増加 - プラットフォームのパフォーマンス

Javaプラットフォームの独立性：Webアプリケーションの利点May 09, 2025 am 12:08 AM

java'splatformentedentencebenefitswebapplicationsbyAllowingCodeTorunOnySystemwithajvm、simpledifyifieddeploymentandscaling.itenables：1）easydeploymentddifferentservers、2）Seamlessscalingacroscloudplatforms、および3）deminvermentementmentmentmentmentementtodeploymentpoce

JVM説明：Java Virtual Machineの包括的なガイドMay 09, 2025 am 12:04 AM

jvmistheruntimeenvironment forexecutingjavabytecode、Curivalforjavaの「writeonce、runanywhere」capability.itmanagesmemory、executessuressecurity、makingestessentionentionalforjavadevadedertionserstunterstanderforeffication devitivationdevation

Javaの主な機能：なぜそれがトッププログラミング言語のままであるかMay 09, 2025 am 12:04 AM

JavareMainsAtopChoiceFordevelopersDuetoitsPlatformEndepentence、Object-OrientedDesign、stryngting、automaticmemorymanagement、およびcomprehensivestandardlibrary.thesefeaturesmavaversatilatileandpowerful、sustableforawiderangeofplications、daspitesomech

Java Platform Independence：開発者にとってはどういう意味ですか？May 08, 2025 am 12:27 AM

java'splatformentencemeansdeveloperscancancodecodeonceanddevicewithoutrocompilling.cancodecodecodecodecodecodecodecodecodecodecodecode compilling

最初の使用のためにJVMをセットアップする方法は？May 08, 2025 am 12:21 AM

JVMをセットアップするには、次の手順に従う必要があります。1）JDKをダウンロードしてインストールする、2）環境変数を設定する、3）インストールの確認、4）IDEを設定する、5）ランナープログラムをテストします。 JVMのセットアップは、単に機能するだけでなく、メモリの割り当て、ガベージコレクション、パフォーマンスチューニング、エラー処理の最適化を行い、最適な動作を確保することも含まれます。

製品のJavaプラットフォームの独立性を確認するにはどうすればよいですか？May 08, 2025 am 12:12 AM

toensurejavaplatformindopendence、soflowthesesteps：1）compileandrunyourapplicationOnMultiplePlatformsusingDifferentosAndjvversions.2）utilizeci/cdpipelines

See all articles

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

Safe Exam Browser

Safe Exam Browser は、オンライン試験を安全に受験するための安全なブラウザ環境です。このソフトウェアは、あらゆるコンピュータを安全なワークステーションに変えます。あらゆるユーティリティへのアクセスを制御し、学生が無許可のリソースを使用するのを防ぎます。

Dreamweaver Mac版

ビジュアル Web 開発ツール

SecLists

SecLists は、セキュリティテスターの究極の相棒です。これは、セキュリティ評価中に頻繁に使用されるさまざまな種類のリストを 1 か所にまとめたものです。 SecLists は、セキュリティテスターが必要とする可能性のあるすべてのリストを便利に提供することで、セキュリティテストをより効率的かつ生産的にするのに役立ちます。リストの種類には、ユーザー名、パスワード、URL、ファジングペイロード、機密データパターン、Web シェルなどが含まれます。テスターはこのリポジトリを新しいテストマシンにプルするだけで、必要なあらゆる種類のリストにアクセスできるようになります。