JavaとWebUploaderを組み合わせたファイルアップロード機能コードの詳細説明
この記事では主に、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、
<p id="fileList"></p>サムネイルを生成し、アップロードの進行状況を表示します// 生成缩略图和上传进度 uploader.on("fileQueued", function(file) { // 把文件信息追加到fileList的p中 $("#fileList").append("<p id='" + file.id + "'><img/><span>" + file.name + "</span><p><span class='percentage'><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 文字列に基づいて名前を付けたフォルダーを作成し、ファイルを受信した後、ファイル ブロックのシリアル番号をバックエンドに送信します。フロントエンドが送信された後、バックエンドはファイルをマージするようにバックエンドに通知します。 、など。
// 上传基本配置
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 文字列を取得できます。
- このメソッドでは 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='" + file.id + "'>
<img/>
<span>" + file.name + "</span>
<p>
<span class='state'>
</span>
</p>
<p>
<span class='percentage'>
</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 サイトの他の関連記事を参照してください。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7478
15
1377
52
77
11
19
33
Java の乱数ジェネレーター
Aug 30, 2024 pm 04:27 PM
Java の乱数ジェネレーターのガイド。ここでは、Java の関数について例を挙げて説明し、2 つの異なるジェネレーターについて例を挙げて説明します。
ジャワのウェカ
Aug 30, 2024 pm 04:28 PM
Java の Weka へのガイド。ここでは、weka java の概要、使い方、プラットフォームの種類、利点について例を交えて説明します。
Java Springのインタビューの質問
Aug 30, 2024 pm 04:29 PM
この記事では、Java Spring の面接で最もよく聞かれる質問とその詳細な回答をまとめました。面接を突破できるように。
Java 8 Stream Foreachから休憩または戻ってきますか？
Feb 07, 2025 pm 12:09 PM
Java 8は、Stream APIを導入し、データ収集を処理する強力で表現力のある方法を提供します。ただし、ストリームを使用する際の一般的な質問は次のとおりです。 従来のループにより、早期の中断やリターンが可能になりますが、StreamのForeachメソッドはこの方法を直接サポートしていません。この記事では、理由を説明し、ストリーム処理システムに早期終了を実装するための代替方法を調査します。 さらに読み取り：JavaストリームAPIの改善 ストリームを理解してください Foreachメソッドは、ストリーム内の各要素で1つの操作を実行する端末操作です。その設計意図はです
Java での日付までのタイムスタンプ
Aug 30, 2024 pm 04:28 PM
Java での日付までのタイムスタンプに関するガイド。ここでは、Java でタイムスタンプを日付に変換する方法とその概要について、例とともに説明します。
未来を創る: まったくの初心者のための Java プログラミング
Oct 13, 2024 pm 01:32 PM
Java は、初心者と経験豊富な開発者の両方が学習できる人気のあるプログラミング言語です。このチュートリアルは基本的な概念から始まり、高度なトピックに進みます。 Java Development Kit をインストールしたら、簡単な「Hello, World!」プログラムを作成してプログラミングを練習できます。コードを理解したら、コマンド プロンプトを使用してプログラムをコンパイルして実行すると、コンソールに「Hello, World!」と出力されます。 Java の学習はプログラミングの旅の始まりであり、習熟が深まるにつれて、より複雑なアプリケーションを作成できるようになります。
