자바 웹 파일 업로드 인 스 턴 스 설명 다운로드(쿨 한 파일 업로드 기술)
웹 응용 시스템 개발 에서 파일 업로드 기능 은 매우 자주 사용 되 는 기능 이다.오늘 은 주로 자바 웹 의 파일 업로드 기능 과 관련 된 기술 의 실현 을 이야기 하고 인터넷 기술 의 신속 한 발전 에 따라 사용자 들 이 사이트 에 대한 체험 요구 가 점점 높 아 지고 파일 전송 기능 의 기술 에 도 많은 혁신 점 이 나 타 났 다.예 를 들 어 비동기 업로드 파일,드래그 식 업로드 등 이다.업로드,업로드 진도 모니터링,파일 미리 보기 그림,큰 파일 정지점 전송,큰 파일 초 전송 등 을 붙 여 넣 습 니 다.
본 과정 에 필요 한 기초 지식:
기본 Http 프로 토 콜 내용 알 아 보기
기본 IO 흐름 조작 기술
Servlet 기초 지식
javascript/jQuery 기술 기초 지식
2.파일 업로드 의 기초
파일 업로드 에 대해 브 라 우 저 는 업로드 과정 에서 파일 을 스 트림 으로 서버 에 제출 하고 모든 스 트림 데 이 터 는 Http 요청 에 따라 서버 에 가 져 옵 니 다.따라서 파일 업로드 시 요청 내용 형식 은 기본적으로 알 아 볼 수 있어 야 합 니 다.
파일 업로드 페이지:
<form action="/itheimaUpload/UploadServlet" method="post" enctype="multipart/form-data">
：<input type="file" name="attach"/><br/>
<input type="submit" value=" "/>
</form>
3.자바 배경 에서 Servlet 을 사용 하여 파일 을 받 습 니 다.
Servlet 을 사용 하여 업로드 파일 의 입력 흐름 을 가 져 온 다음 에 요청 파 라미 터 를 분석 하 는 것 이 번 거 로 우 므 로,일반적으로 백 엔 드 에 서 는 Apache 의 오픈 소스 도구 인 common-fileupload 라 는 파일 업로드 구성 요 소 를 사용 합 니 다.
//Java ：Commons-fileUpload
public class UploadServlet extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
//1.
DiskFileItemFactory factory = new DiskFileItemFactory(1*1024*1024,new File("c:/tempFiles/"));
//2. ServleFileUpload
ServletFileUpload sfu = new ServletFileUpload(factory);
//
sfu.setHeaderEncoding("utf-8");
//3.
try {
List<FileItem> list = sfu.parseRequest(request);
//
if(list!=null){
for(FileItem item:list){
//
if(item.isFormField()){
//
// name
String fieldName = item.getFieldName();
//
String value = item.getString("utf-8");
}else{
//
if(item.getName()!=null && !item.getName().equals("")) {
//
FileUtils.copyInputStreamToFile(item.getInputStream(), new File("c:/targetFiles/"+item.getName()));
item.delete();
}
}
}
}
} catch (FileUploadException e) {
e.printStackTrace();
}
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doGet(request, response);
}
}파일 업로드 페이지 의 전단 에 우 리 는 바 이 두 의 오픈 소스 구성 요소 인 WebUploader 와 같은 비교적 좋 은 업로드 구성 요 소 를 선택 할 수 있 습 니 다.이 구성 요 소 는 파일 업로드 에 필요 한 일상적인 기능 을 만족 시 킬 수 있 습 니 다.예 를 들 어 비동기 업로드 파일,드래그 식 업로드,붙 여 넣 기 업로드,업로드 진도 모니터링,파일 미리 보기 그림,심지어 큰 파일 정지점 전송,큰 파일 초 전송 등 입 니 다.
웹 업로드 구성 요소 다운로드
웹 업로드 홈 페이지 에서 웹 업로드 패 키 지 를 다운로드 합 니 다.
WebUpload 디 렉 터 리 구조:
기본 파일 업로드 데모(업로드 진행 포함)
전단
1.1 페이지 에서 필요 한 css,js 가 져 오기
<link rel="stylesheet" type="text/css"
href="${pageContext.request.contextPath}/css/webuploader.css">
<script type="text/javascript"
src="${pageContext.request.contextPath }/js/jquery-1.10.2.min.js"></script>
<script type="text/javascript"
src="${pageContext.request.contextPath }/js/webuploader.js"></script>
<!-- div -->
<div id="uploader">
<!-- -->
<ul id="fileList"></ul>
<!-- -->
<div id="filePicker"> </div>
</div>
<script type="text/javascript">
//1. WebUpload，
var uploader = WebUploader.create(
{
//flashk
swf: "${pageContext.request.contextPath}/js/Uploader.swf",
//
server:"${pageContext.request.contextPath}/UploadServlet",
//
pick:"#filePicker",
//
auto:true,
}
);
//2. ，
// fileQueued ：
// file:
uploader.on("fileQueued",function(file){
// div
$("#fileList").append("<div id='"+file.id+"' class='fileInfo'><span>"+file.name+"</span><div class='state'> ...</div><span class='text'></span></div>");
});
//3.
//file:
//percentage: 。 1. :0.2
uploader.on("uploadProgress",function(file,percentage){
var id = $("#"+file.id);
//
id.find("div.state").text(" ...");
//
id.find("span.text").text(Math.round(percentage*100)+"%");
});
//4.
//file:
//response: ， json
uploader.on("uploadSuccess",function(file,response){
//
$("#"+file.id).find("div.state").text(" ");
});
DiskFileItemFactory factory = new DiskFileItemFactory();
ServletFileUpload sfu = new ServletFileUpload(factory);
sfu.setHeaderEncoding("utf-8");
try {
List<FileItem> items = sfu.parseRequest(request);
for(FileItem item:items){
if(item.isFormField()){
//
}else{
//
//
System.out.println(" :"+item.getName());
//
FileUtils.copyInputStreamToFile(item.getInputStream(), new File(serverPath+"/"+item.getName()));
System.out.println(" ");
}
}
} catch (FileUploadException e) {
e.printStackTrace();
}관건:uploader.makeThumb()방법 으로 미리 보기 그림 생 성
uploader.on("fileQueued",function(file){
// div
$("#fileList").append("<div id='"+file.id+"' class='fileInfo'><img/><span>"+file.name+"</span><div class='state'> ...</div><span class='text'></span></div>");
// ： makeThumb()
//error:
//src:
uploader.makeThumb(file,function(error,src){
var id = $("#"+file.id);
// ， “ ”
if(error){
id.find("img").replaceWith(" ");
}
// ，
id.find("img").attr("src",src);
});
});1)페이지 드래그 영역 div 추가
<!-- div -->
<div id="uploader">
<!-- -->
<div id="dndArea">
<p> </p>
</div>
<!-- -->
<ul id="fileList"></ul>
<!-- -->
<div id="filePicker"> </div>
</div>
//1. WebUpload，
var uploader = WebUploader.create(
{
//flashk
swf: "${pageContext.request.contextPath}/js/Uploader.swf",
//
server:"${pageContext.request.contextPath}/UploadServlet",
//
pick:"#filePicker",
//
auto:true,
// ，
dnd:"#dndArea",
// ，
disableGlobalDnd:true
//
paste:"#uploader"
}
);1)webuploader 전역 매개 변수 에 블록 업로드 매개 변 수 를 추가 합 니 다.
//1. WebUpload，
var uploader = WebUploader.create(
{
//flashk
swf: "${pageContext.request.contextPath}/js/Uploader.swf",
//
server:"${pageContext.request.contextPath}/UploadServlet",
//
pick:"#filePicker",
//
auto:true,
// ，
dnd:"#dndArea",
// ，
disableGlobalDnd:true,
//
paste:"#uploader",
//
//
chunked:true,
// （ 5M）
chunkSize:5*1024*1024,
// （ 3 ）
threads:3,
// ，
prepareNextFile:true
}
);위 세 개의 설정 을 추가 하면 파일 이 5M 을 초과 할 때 webuploader 는 자동 으로 파일 을 몇 개의 요청 으로 나 누 어 배경 에 보 냅 니 다.
각 블록 요청,포 함 된 정보:
파일 을 블록 별로 나 누 어 올 릴 수 있 는 세 가지 중요 한 시간 대 입 니 다.
before-send-file :
before-send: ，
after-send-file:
//5. ( ： WebUploader.create )
// 1：: （1. ;2. ）
// 2： ， （1. ， ）
// 3： （1. ）
WebUploader.Uploader.register({
"before-send-file":"beforeSendFile",
"before-send":"beforeSend",
"after-send-file":"afterSendFile"
},{
// 1：:
beforeSendFile:function(){
//1. ，
//2. ， ， ，
},
// 2： ，
beforeSend:function(){
//1. ， ， ，
},
// 3：
afterSendFile:function(){
//1. ，
}
});
// md5File（）
// deferred
beforeSendFile:function(file){
// deffered
var deferred = WebUploader.Deferred();
//1. ，
(new WebUploader.Uploader()).md5File(file,0,5*1024*1024)
.progress(function(percentage){
$("#"+file.id).find("div.state").text(" ...");
})
.then(function(val){
uniqueFileTag = val;
$("#"+file.id).find("div.state").text(" ");
// ，
deferred.resolve();
});
//alert(uniqueFileTag);
//2. ， ， ，
// deffered
return deferred.promise();
}
// ，
beforeSend:function(){
// ，
this.owner.options.formData.fileMd5 = fileMd5;
}
// ，
//
if(chunks!=null){
System.out.println(" ...");
//
// ，
File chunksDir = new File(serverPath+"/"+fileMd5);
if(!chunksDir.exists()){
chunksDir.mkdir();
}
if(chunk!=null){
//
File chunkFile = new File(chunksDir.getPath()+"/"+chunk);
FileUtils.copyInputStreamToFile(item.getInputStream(), chunkFile);
}
//
after-send-file ：
afterSendFile:function(file){
//1. ，
//
$.ajax(
{
type:"POST",
url:"${pageContext.request.contextPath}/UploadCheckServlet?action=mergeChunks",
data:{
//
fileMd5:fileMd5,
//
fileName:file.name
},
dataType:"json",
success:function(response){
alert(response.msg);
}
}
);
}
//
if("mergeChunks".equals(action)){
System.out.println(" ...");
//
String fileMd5 = request.getParameter("fileMd5");
String fileName = request.getParameter("fileName");
//
File f = new File(serverPath+"/"+fileMd5);
File[] fileArray = f.listFiles(new FileFilter(){
// ，
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>() {
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+"/"+fileName);
//
outputFile.createNewFile();
//
FileChannel outChannel = new FileOutputStream(outputFile).getChannel();
//
FileChannel inChannel;
for(File file : fileList){
inChannel = new FileInputStream(file).getChannel();
inChannel.transferTo(0, inChannel.size(), outChannel);
inChannel.close();
//
file.delete();
}
//
File tempFile = new File(serverPath+"/"+fileMd5);
if(tempFile.isDirectory() && tempFile.exists()){
tempFile.delete();
}
//
outChannel.close();
response.setContentType("text/html;charset=utf-8");
response.getWriter().write("{\"msg\":\" \"}");
}블록 업 로드 를 실현 한 토대 에서 단점 속전 을 실현 하 는 것 은 매우 간단 합 니 다!!
전단:
// 2： ，
//block:
beforeSend:function(block){
//1. ， ， ，
var deferred = WebUploader.Deferred();
// ， ， ， ，
$.ajax(
{
type:"POST",
url:"${pageContext.request.contextPath}/UploadCheckServlet?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();
}
}
}
);
// ，
this.owner.options.formData.fileMd5 = fileMd5;
return deferred.promise();
},
//
private void checkChunk(HttpServletRequest request,
HttpServletResponse response) throws IOException,
FileNotFoundException {
System.out.println("checkChunk...");
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}");
}
}모든 블록 요청 전에 초 전송 기능 을 실현 할 수 있 습 니 다!!
전단:
beforeSendFile:function(file){
// deffered
var deferred = WebUploader.Deferred();
//1. ，
(new WebUploader.Uploader()).md5File(file,0,5*1024*1024)
.progress(function(percentage){
$("#"+file.id).find("div.state").text(" ...");
})
.then(function(val){
fileMd5 = val;
$("#"+file.id).find("div.state").text(" ");
//2. ， ， ，
$.ajax(
{
type:"POST",
url:"${pageContext.request.contextPath}/UploadCheckServlet?action=fileCheck",
data:{
//
fileMd5:fileMd5
},
dataType:"json",
success:function(response){
if(response.ifExist){
$("#"+file.id).find("div.state").text(" ");
// ， ，
deferred.reject();
}else{
//
deferred.resolve();
}
}
}
);
});
// deffered
return deferred.promise();
},
// md5
private void fileCheck(HttpServletRequest request,
HttpServletResponse response) throws IOException,
FileNotFoundException {
String fileMd5 = request.getParameter("fileMd5");
//
Map<String,String> database = new HashMap<String,String>();
database.put("576018603f4091782b68b78af85704a1", "01. .itcast");
response.setContentType("text/html;charset=utf-8");
if(database.containsKey(fileMd5)){
response.getWriter().write("{\"ifExist\":1}");
}else{
response.getWriter().write("{\"ifExist\":0}");
}
}이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Javaweb에서 양식 데이터를 가져오는 다양한 방법Javaweb에서 양식 데이터를 가져오는 몇 가지 방법 1. 키 값이 맞는 형식으로 폼 데이터를 얻는다 getParameter(String name): 키를 통해 value를 반환합니다. getParameterVal...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
