WebUploaderを使って断片アップロードのファイル機能を実現する（二）
9998 ワード
前に書く:
ここ数日、WebUploaderのアップロードファイルを研究しに行きました。前のブログにWebUploaderを使って簡単にファイルをアップロードするという記録があります。今日は断片アップロードの例も記録してください。ブログの中で資料も調べました。基本的にはバックグラウンドでデータを処理するときに使うServlet、あるいはSpringMVCです。最近のプロジェクトはずっとStrutsです。だからここでは、Struts 2のactionでデータを処理して、ファイルを分割アップロードする効果があります。
1.何がスライスアップロードですか？
名前の通り、ファイルを一枚に分割して、一つのファイルをいくつかの小さなファイルに分割して、またアップロードします。このようにするメリットは大きいファイルをアップロードするのに便利です。
2.スライスアップロードの大まかな構想：
1.フロントページで、ファイルを選択し、ボタンをクリックしてアップロードします。
2.WebUploaderはアップロードされたファイルを指定された個数に分割してサービスエンドのバックグラウンドに送信する。
3.サーバーは分割後の小さいファイルを受信し、一時フォルダに保存します。
4.サーバーが分割後の小さいファイルを受信したら、フロントページでアップロード成功関数を実行します。
5.アップロード成功関数でサーバに要求を送り、小さいファイルを一つの全体として統合することを要求します。
6.サーバのバックグラウンドでファイルをマージし、マージが完了したら、小さいファイルを保存する一時ファイルを削除します。
スライスアップロードの大体の過程を了解しました。直接デモに行きましょう。
フロントページ:
ところで、補足説明では、バックグラウンドは簡単なパラメータだけを受け取っています。フロントからWebUploaderが伝えてきたパラメータは上記の数だけではないです。だから、F 12でデバッグモードをマスターして、送信の要求を確認してください。また、関連する要求パラメータはここでは多くありません。
実行スクリーンショット:
以上が本文の全部です。皆さんの勉強に役に立つように、私たちを応援してください。
ここ数日、WebUploaderのアップロードファイルを研究しに行きました。前のブログにWebUploaderを使って簡単にファイルをアップロードするという記録があります。今日は断片アップロードの例も記録してください。ブログの中で資料も調べました。基本的にはバックグラウンドでデータを処理するときに使うServlet、あるいはSpringMVCです。最近のプロジェクトはずっとStrutsです。だからここでは、Struts 2のactionでデータを処理して、ファイルを分割アップロードする効果があります。
1.何がスライスアップロードですか？
名前の通り、ファイルを一枚に分割して、一つのファイルをいくつかの小さなファイルに分割して、またアップロードします。このようにするメリットは大きいファイルをアップロードするのに便利です。
2.スライスアップロードの大まかな構想：
1.フロントページで、ファイルを選択し、ボタンをクリックしてアップロードします。
2.WebUploaderはアップロードされたファイルを指定された個数に分割してサービスエンドのバックグラウンドに送信する。
3.サーバーは分割後の小さいファイルを受信し、一時フォルダに保存します。
4.サーバーが分割後の小さいファイルを受信したら、フロントページでアップロード成功関数を実行します。
5.アップロード成功関数でサーバに要求を送り、小さいファイルを一つの全体として統合することを要求します。
6.サーバのバックグラウンドでファイルをマージし、マージが完了したら、小さいファイルを保存する一時ファイルを削除します。
スライスアップロードの大体の過程を了解しました。直接デモに行きましょう。
フロントページ:
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
String scheme = request.getScheme();
String serverName = request.getServerName();
String contextPath = request.getContextPath();
int port = request.getServerPort();
//
String baseURL = scheme + "://" + serverName + ":" + port
+ contextPath;
request.setAttribute("baseURL", baseURL);
%>
<html>
<head>
<title>WebUploader </title>
<%-- css --%>
<link href="${baseURL}/webuploader0.1.5/webuploader.css" rel="external nofollow" rel="stylesheet" type="text/css"/>
<script src="${baseURL}/ligerui2/jquery/jquery-1.9.0.min.js" type="text/javascript"></script>
<%-- --%>
<script type="text/javascript" src="${baseURL}/webuploader0.1.5/webuploader.min.js"></script>
<script type="text/javascript">
$(function(){
/*
uploader ， dom div ， ，
， ， $(function(){} */
var uploader = WebUploader.create({
// swf
swf: '${baseURL}/webuploader0.1.5/Uploader.swf',
// 。
server: '${baseURL}/uploadFile2',
// [ ：'file'] name。
fileVal:'upload',
// 。 。
// ， input ， flash.
pick:
{
multiple: false,
id: '#filePicker'
},
// 。 [ ：3]
/*
webuploader 3
， 1*/
threads: 1,
//
auto: false,
// 。
chunked: true,
// ， ？ 5M.
chunkSize: 5 * 1024 * 1024,
// image, jpeg， ！
resize: false,
formData: {
guid: Math.random() //
}
});
//
uploader.on('fileQueued', function (file) {
//
$("#fileList").html("");
//
$one = $("<div id='"+file.id+"'>"+file.name+"</div>");
$two = $("<div id='state'> ......</div>");
$("#fileList").append($one);
$("#fileList").append($two);
});
// 。
uploader.on('uploadProgress', function (file, percentage) {
// ...
console.log("uploadProgress===="+percentage);
$("#state").text(" ...");
});
// 。
uploader.on('uploadSuccess', function (file, response) {
// ...
console.log('upload success...
');
console.log(uploader.options.formData.guid);
console.log(file.name);
//
$.post(
"${baseURL}/mergeFile",
//
{
guid: uploader.options.formData.guid,
chunks: Math.ceil(file.size / (5 * 1024 * 1024)),
fileName: file.name
},
function(data){
});
$("#state").text(" ~~~");
});
// 。
uploader.on('uploadError', function (file) {
// ...
});
// ， ，
uploader.on('uploadComplete', function (file) {
// ...
});
//
$("#btnClick").click(function(){
uploader.upload();
});
//
$("#btnCancel").click(function(){
// ..
});
});
</script>
</head>
<body style="padding:10px">
<div id="layout1">
<div id="uploader-demo">
<div id="fileList" ></div>
<div id="filePicker" > </div>
<button id="btnClick"> </button>
<button id="btnCancel"> </button>
</div>
</div>
</body>
</html>
/**
* Description:com.ims.action
* Author: Eleven
* Date: 2017/12/26 10:50
*/
@Controller("FileAction")
public class FileAction {
/* */
// get set
// ( type=file name )
private File upload;
//
private String uploadFileName;
//
private String uploadContentType;
/**
* public， ， private get,set ，
* public
*/
//
public String chunk;
public String guid;//
//
public String fileName; //
public String chunks; //
// ， ，
public void uploadFile2() throws Exception{
String str = "D:/upload44/divide/"; //
//
String realPath = str + guid +"/" + chunk;
File tmp =new File(realPath);
FileUtils.copyFile(upload, tmp);
System.out.println(" "+uploadFileName+", ："+chunk+", ："+(upload.length()/1024/1024)+"M");
}
//
public void mergeFile() throws Exception{
String path = "D:/upload44/merge/" ;
//
new File(path).mkdir();
//
File newFile = new File(path + fileName);
if(!newFile.exists()){
newFile.createNewFile();
}
FileOutputStream outputStream = new FileOutputStream(newFile, true);//
byte[] byt = new byte[10 * 1024 * 1024];
int len;
FileInputStream temp = null;//
for (int i = 0; i < Integer.parseInt(chunks); i++) {
//"D:/upload44/divide/" + guid + "/" + i
temp = new FileInputStream(new File("D:/upload44/divide/" + guid + "/" + i));
while ((len = temp.read(byt)) != -1) {
System.out.println(len);
outputStream.write(byt, 0, len);
}
temp.close();
}
//
outputStream.close();
//
String path2 = "D:/upload44/divide/" + guid;
FileUtils.deleteDirectory(new File(path2));//
System.out.println("success!guid=" + guid + ";chunks=" + chunks + ";fileName=" + fileName);
}
public File getUpload() {
return upload;
}
public void setUpload(File upload) {
this.upload = upload;
}
public String getUploadFileName() {
return uploadFileName;
}
public void setUploadFileName(String uploadFileName) {
this.uploadFileName = uploadFileName;
}
public String getUploadContentType() {
return uploadContentType;
}
public void setUploadContentType(String uploadContentType) {
this.uploadContentType = uploadContentType;
}
}
<action name="uploadFile2" class="FileAction" method="uploadFile2">
</action>
<action name="mergeFile" class="FileAction" method="mergeFile">
</action>ところで、補足説明では、バックグラウンドは簡単なパラメータだけを受け取っています。フロントからWebUploaderが伝えてきたパラメータは上記の数だけではないです。だから、F 12でデバッグモードをマスターして、送信の要求を確認してください。また、関連する要求パラメータはここでは多くありません。
実行スクリーンショット:
以上が本文の全部です。皆さんの勉強に役に立つように、私たちを応援してください。