WebUploaderを使ってファイルアップロード機能を実現する（一）
6251 ワード
前に書く:
ファイルのアップロード方法はとても多くて、大きいファイルのアップロードに対して、今回のプロジェクトの中でも関連があって、主にスライスの断線を使って大きいファイルをアップロードしました。だからWebUploaderを調べて、簡単なアップロードファイルから始めましょう。
コードにコメントを書いて、このように見たほうがいいです。コードを直接見て、実現の過程を理解しましょう。
フロントのjspページ：
実行スクリーンショット:
その後も断片的にアップロードできる文章を整理し続けます。
以上が本文の全部です。皆さんの勉強に役に立つように、私たちを応援してください。
ファイルのアップロード方法はとても多くて、大きいファイルのアップロードに対して、今回のプロジェクトの中でも関連があって、主にスライスの断線を使って大きいファイルをアップロードしました。だからWebUploaderを調べて、簡単なアップロードファイルから始めましょう。
コードにコメントを書いて、このように見たほうがいいです。コードを直接見て、実現の過程を理解しましょう。
フロントのjspページ：
<%@ 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}/uploadFile',
// [ ：'file'] name。
fileVal:'upload',
// 。 。
// ， input ， flash.
pick:
{
multiple: false,
id: '#filePicker'
},
// 。 [ ：3]
threads: 1,
//
//auto: true,
// 。
//chunked: true,
// ， ？ 5M.
//chunkSize: 5 * 1024 * 1024,
// image, jpeg， ！
//resize: false
});
//
uploader.on('fileQueued', function (file) {
//
$one = $("<div >"+file.name+"</div>");
$("#fileList").append($one);
});
// 。
uploader.on('uploadProgress', function (file, percentage) {
// ...
});
// 。
uploader.on('uploadSuccess', function (file, response) {
// ...
console.log('upload success...
');
});
// 。
uploader.on('uploadError', function (file) {
// ...
});
// ， ，
uploader.on('uploadComplete', function (file) {
// ...
});
//
$("#btnClick").click(function(){
uploader.upload();
});
});
</script>
</head>
<body style="padding:10px">
<div id="layout1">
<div id="uploader-demo">
<%-- div--%>
<div id="fileList" class="uploader-list"></div>
<div id="filePicker" > </div>
<button id="btnClick"> </button>
</div>
</div>
</body>
</html>
/**
* Description:com.ims.action
* Author: Eleven
* Date: 2017/12/26 10:50
*/
@Controller("FileAction")
public class FileAction extends BaseAction{
// get set
// ( type=file name ， jsp fileVal:'upload',)
private File upload;
//
private String uploadFileName;
//
private String uploadContentType;
public void uploadFile() throws Exception{
String str = "D:/upload33/"; //
System.out.println(" ===="+uploadFileName);
String realPath = str + uploadFileName;
File tmp =new File(realPath);
FileUtils.copyFile(upload, tmp);
System.out.println(" "+uploadFileName+", ："+(upload.length()/1024/1024)+"M");
}
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="uploadFile" class="FileAction" method="uploadFile">
</action>
実行スクリーンショット:
その後も断片的にアップロードできる文章を整理し続けます。
以上が本文の全部です。皆さんの勉強に役に立つように、私たちを応援してください。