SSM 프레임 워 크+Plupload 블록 별로 큰 파일 업로드 예제 구현
그 전에 제 프로젝트 에 대해 말씀 드 리 겠 습 니 다.제 가 만 든 j2ee 프로젝트 는 spring+SpringMVC+MyBatis 의 프레임 워 크 집합 에 활용 되 었 습 니 다.소 셜 네트워크 서비스 에 관 한 사이트 입 니 다.페 이 스 북,트 위 터,웨 이 보 등 과 같은 이름 으로 YouAndMe 라 고 지 었 습 니 다.나 는 이 프로젝트 에 사용자 자료 공유 플랫폼 이 있어 야 한다 고 대담 하 게 구상 했다.예 쁜 영화 나 드라마 한 세트,집에 서 필요 한 식단,예 쁜 풍경 도,각양각색 일 수도 있다.사용 자 는 원 하 는 자 료 를 검색 하고 다운로드 할 수 있다.그래서 우선 해결 해 야 할 것 은 각양각색의 파일 업로드 다.
1.Plupload 플러그 인 을 다운로드 하고 해당 파일 을 도입 합 니 다.
특히 이 플러그 인 은 전단 일 뿐 입 니 다.배경 에서 작은 블록 을 어떻게 통합 하 는 지 등 코드 는 스스로 써 야 합 니 다.
다운로드 주소:http://www.plupload.com/download저 는 Plupload 2.1.9 GPLv 2 버 전 을 내 렸 습 니 다.그 안에 사용 할 css 와 js 가 있 습 니 다.
프로젝트 에 도입 해 야 합 니 다:jQuery.pluproad.queue.css,jquery-2.0.0.min.js,pluproad.full.min.js,jquery.pluproad.queue.js,zhCN.js 파일 들
전단 준비
1.우선 html 에 다음 코드 를 기록 합 니 다.
<div id="uploader">
<p>Your browser doesn't have Flash, Silverlight or HTML5 support.</p>
</div>
<button id="toStop"> </button>
<button id="toStart"> </button>2.페이지 불 러 온 후 js 를 통 해 구성 요소 초기 화
<script type="text/javascript">
$(function() {
// Initialize the widget when the DOM is ready
var uploader = $("#uploader").pluploadQueue({
// General settings
runtimes: 'html5,flash,silverlight,html4',
url: "../pluploadUpload",
// Maximum file size
max_file_size: '10000mb',
chunk_size: '1mb',
// Resize images on clientside if we can
resize: {
width: 200,
height: 200,
quality: 90,
crop: true // crop to exact dimensions
},
// Specify what files to browse for
filters: [
{title: "Image files", extensions: "jpg,gif,png"},
{title: "Vedio files", extensions: "mp4,mkv"},
{title: "Zip files", extensions: "zip,avi"}
],
// Rename files by clicking on their titles
rename: true,
// Sort files
sortable: true,
// Enable ability to drag'n'drop files onto the widget (currently only HTML5 supports that)
dragdrop: true,
// Views to activate
views: {
list: true,
thumbs: true, // Show thumbs
active: 'thumbs'
},
// Flash settings
flash_swf_url: 'js/Moxie.swf',
// Silverlight settings
silverlight_xap_url: 'js/Moxie.xap'
});
$("#toStop").on('click', function () {
uploader.stop();
});
$("#toStart").on('click', function () {
uploader.start();
});
});
</script>
url 은 서버 가 업로드 할 주 소 를 처리 하 는 것 입 니 다.filers 는 필터 라 는 뜻 으로 어떤 형식의 파일 을 업로드 할 수 있 는 지 규정 합 니 다.dragdrop:true 는 선택 상자 로 파일 을 끌 어 올 릴 수 있 도록 설정 되 어 있 습 니 다.
메모:업 로드 를 일시 정지 하고 계속 할 때 uploader.stop()과 uploader.start()를 사용 해 야 합 니 다.이 uploader 인 스 턴 스 는$("\#uploader").pluploadQueue({...})에서 발생 합 니 다.홈 페이지 에서 보 여 준 예 중 두 가지 상황 이 있 습 니 다.하 나 는 등록 할 때 한꺼번에 모든 인 자 를 지정 하 는 것 입 니 다.그러나 이것 은 uploader 인 스 턴 스 를 되 돌려 주지 않 습 니 다.둘째,등록 할 때 인 자 를 주지 않 으 면 uploader 인 스 턴 스 를 되 돌려 주 고 이 uploader 인 스 턴 스 바 인 딩 이벤트 에 대해 한 걸음 한 걸음 인 자 를 줍 니 다.그러나 분명 한 것 은 내 가 주어진 매개 변 수 는 uploader 인 스 턴 스 를 동시에 되 돌려 주 었 습 니 다.하나의 소스 코드 만 수정 하면 jquery.plplpload.quue.js 소스 코드 를 열 어 정의 plplploproadQueue 라 는 것 을 찾 았 습 니 다.if(settings)내의 return this 를 return uploaders[$(this[0]).attr('id')로 바 꾸 었 습 니 다.이렇게 하면 일시 정지 단 추 를 누 르 면 현재 업로드 가 중단 되 고 시작 단 추 를 누 르 면 계속 됩 니 다.
3:컨트롤 러 맵
@Autowired
private PluploadService pluploadService;
/**Plupload */
@RequestMapping(value="/pluploadUpload")
public void upload(Plupload plupload,HttpServletRequest request,HttpServletResponse response) {
String FileDir = "pluploadDir";//
plupload.setRequest(request);// Plupload HttpServletRequest
int userId = ((User)request.getSession().getAttribute("user")).getUserId();
// , ， Servlet "pluploadDir" ， id
File dir = new File(request.getSession().getServletContext().getRealPath("/") + FileDir+"/"+userId);
if(!dir.exists()){
dir.mkdirs();// ， mkdir()
}
//
pluploadService.upload(plupload, dir);
}
4:Plupload 클래스
package web.plupload;
import org.springframework.web.multipart.MultipartFile;
import javax.servlet.http.HttpServletRequest;
/**
* Plupload ，
* MultipartFile Spring web ， web ， entity
*/
public class Plupload {
/** */
private String name;
/** */
private int chunks = -1;
/** （ 0 ）*/
private int chunk = -1;
/**HttpServletRequest ， ， */
private HttpServletRequest request;
/** ， ， */
private MultipartFile multipartFile;
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public int getChunks() {
return chunks;
}
public void setChunks(int chunks) {
this.chunks = chunks;
}
public int getChunk() {
return chunk;
}
public void setChunk(int chunk) {
this.chunk = chunk;
}
public HttpServletRequest getRequest() {
return request;
}
public void setRequest(HttpServletRequest request) {
this.request = request;
}
public MultipartFile getMultipartFile() {
return multipartFile;
}
public void setMultipartFile(MultipartFile multipartFile) {
this.multipartFile = multipartFile;
}
}
속성 에 대한 설명 코드 주석 은 이미 명확 하 게 말 했 으 니 스스로 연구 하여 공부 할 수 있다.
5:PluploadService 클래스
package web.plupload;
import entity.User;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Component;
import org.springframework.util.MultiValueMap;
import org.springframework.web.multipart.MultipartFile;
import org.springframework.web.multipart.MultipartHttpServletRequest;
import java.io.*;
import java.sql.Timestamp;
import java.util.Iterator;
import java.util.List;
import service.youandmeService;
/**
* Plupload Service ， Plupload ， Spring web ， Service
*/
@Component // SpringIOC Controller
public class PluploadService {
@Autowired
private youandmeService youandmeService;
public void upload(Plupload plupload,File pluploadDir){
String fileName = ""+System.currentTimeMillis()+plupload.getName();//
upload(plupload, pluploadDir, fileName);
}
private void upload(Plupload plupload,File pluploadDir,String fileName){
int chunks = plupload.getChunks();//
int nowChunk = plupload.getChunk();// ， 0
// Request ， SpringIOC multipartResolver 。
MultipartHttpServletRequest multipartHttpServletRequest = (MultipartHttpServletRequest)plupload.getRequest();
// map
MultiValueMap<String,MultipartFile> map = multipartHttpServletRequest.getMultiFileMap();
if(map!=null){
try{
Iterator<String> iterator = map.keySet().iterator();
while(iterator.hasNext()){
String key = iterator.next();
List<MultipartFile> multipartFileList = map.get(key);
for(MultipartFile multipartFile:multipartFileList){//
plupload.setMultipartFile(multipartFile);// Plupload MultipartFile
File targetFile = new File(pluploadDir+"/"+fileName);// ，
if(chunks>1){// 1，
File tempFile = new File(pluploadDir.getPath()+"/"+multipartFile.getName());
// ，
savePluploadFile(multipartFile.getInputStream(),tempFile,nowChunk==0?false:true);
if(chunks-nowChunk==1){// ， targetFile ，
tempFile.renameTo(targetFile);
// ，
Timestamp now = new Timestamp(System.currentTimeMillis());
youandmeService.uploadInfo(fileName,((User)(plupload.getRequest().getSession().getAttribute("user"))).getUsername(),now);
}
}
else{
// ，
multipartFile.transferTo(targetFile);
// ，
Timestamp now = new Timestamp(System.currentTimeMillis());
youandmeService.uploadInfo(fileName, ((User) (plupload.getRequest().getSession().getAttribute("user"))).getUsername(), now);
}
}
}
}
catch (IOException e){
e.printStackTrace();
}
}
}
private void savePluploadFile(InputStream inputStream,File tempFile,boolean flag){
OutputStream outputStream = null;
try {
if(flag==false){
//
outputStream = new BufferedOutputStream(new FileOutputStream(tempFile));
}
else{
//
outputStream = new BufferedOutputStream(new FileOutputStream(tempFile,true));
}
byte[] bytes = new byte[1024];
int len = 0;
while ((len = (inputStream.read(bytes)))>0){
outputStream.write(bytes,0,len);
}
}
catch (FileNotFoundException e){
e.printStackTrace();
}
catch (IOException e){
e.printStackTrace();
}
finally {
try{
outputStream.close();
inputStream.close();
}
catch (IOException e){
e.printStackTrace();
}
}
}
}
2.Controller 의 마지막 줄 인 PluploadService.upload(plplplpload,dir);서버 에서 생 성 된 plplpload 대상 과 저 장 된 폴 더 디 렉 터 리 에 클 라 이언 트 를 제출 하여 plplploadService 의 upload 방법 에 매개 변수 로 전송 합 니 다.
3.upload(Plupload plplplplplplpload,File plplploadDir)방법 에서 서버 에 저장 할 수 있 는 유일한 파일 이름 을 만 듭 니 다.
4.chunks 는 사용자 가 업로드 할 파일 중 현재 파일 이 구 분 된 총 블록 을 한꺼번에 선택 합 니 다.nowChunk 는 이번에 올 린 블록의 번호 입 니 다.0 부터 왜'이번'을 사용 합 니까?앞에서 언급 했 듯 이 Plupload 는 클 라 이언 트 에서 서버 로 블록 을 순서대로 제출 하기 때문에 파일 업로드 에 Http 요청 이 여러 번 있 고 같은 파일 의 chunks 는 변 하지 않 으 며 nowChunk 는 한 번 씩 증가 합 니 다.
5.HttpServletRequest 를 Multipart HttpServletRequest 로 강제 변환 하 는 중 오류 가 발생 할 수 있 지만,이 오 류 는 피 할 수 있 습 니 다.SpringIOC 용기 에 multipart Resolver 라 는 대상 을 주입 하면 됩 니 다.
<bean id="multipartResolver"
class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
<!-- set the max upload size100MB -->
<property name="maxUploadSize">
<value>104857600</value>
</property>
<property name="maxInMemorySize">
<value>4096</value>
</property>
<property name="defaultEncoding" value="UTF-8"></property>
</bean>7.plupload.setMultipartFile(multipartFile);plploproad 대상 에 수 동 으로 MultipartFile 속성 값 을 전송 합 니 다.
8.총 블록 수 chunks 가 1 보다 크 면 올 라 온 작은 블록 을 하나의 파일 로 합성 하 는 것 을 고려 해 야 합 니 다.그렇지 않 으 면 블록 파일 을 대상 파일 multipart File.transferto(targetFile)로 직접 복사 해 야 합 니 다.
9.chunks 가 1 보다 클 때 먼저 임시 파일 tempfile 을 새로 만들어 서 이 tempfile 에 작은 조각 을 계속 기록 하 는 데 사용 합 니 다.다 쓴 후에(chunks-nowChunk==1)이름 을 바 꿉 니 다(tempfile.renameTo(targetFile).
10.savePluploadFile(multipartFile.getInputStream(),tempFile,nowChunk==0?false:true);방법 은 작은 파일 하 나 를 합 치 는 데 사 용 됩 니 다.첫 번 째 조각 이 라면 처음부터(new FileOutputStream(tempFile)을 기록 합 니 다.그렇지 않 으 면 모두 끝 에서 기록 합 니 다(new FileOutputStream(tempFile,true).
여기까지 썼 습 니 다.Plupload 를 바탕 으로 단점 속전 을 실현 하 는 코드 는 모두 제 시 했 습 니 다.여러분 은 스스로 프로젝트 에 통합 해 야 합 니 다.여 기 는 완전한 demo 를 제시 하지 않 았 습 니 다.음,아니면 그 말 입 니까?물고기 에 게 가 르 치 는 것 보다 물고 기 를 가 르 치 는 것 이 좋 습 니 다.
항목 효과 그림 업로드:
1.업로드 파일 선택:
2.업로드 시작,진행 표시 줄 표시:
3.업로드 일시 정지:
4.일시 정지 후 계속 업로드:
5.업로드 완료:
6.대상 폴 더 아래 에 해당 하 는 파일 이 있 음:
7.업로드 과정 에서 의 네트워크 요청,블록 업로드 구현:
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Struts 는 plplplpload 를 사용 하여 다 중 파일 업 로드 를 실현 합 니 다.plploproad,괜 찮 은 js 프레임 워 크 입 니 다.그 때 는 공식 demo 에서 phop 서버 코드 만 제공 되 었 다. 다음은 제 가 개인 적 으로 수정 한 것 으로 Struts 를 통 해 다 중 파일 ...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
