첫째, 파일 업로드
설명 : 파일 업로드 전통적인 방법은 파일을 참조하고 응용 프로그램은 동일한 서버에 우리의 업로드 존재를 방문하십시오.
업로드가 완료되고, 브라우저가 점프 할 수 있습니다.
1. 1 단계 : 받는다는 프로젝트를 만들고 공유지 - 파일 업로드 좌표를 가져
1 <의존성> 2 <의 groupId> 몬즈 파일 업로드 </의 groupId> 3 <artifactId를> 몬즈 파일 업로드 </ artifactId를> 4 <버전> 1.3.1 </ 버전> 5 </ 의존성>
2. 2 단계 : 쓰기 JSP 페이지
간단한 사례 발표 : 1 <form 조치 = "/ 파일 업로드"METHOD = "POST"에 enctype = "multipart / form-data"로> 2图片: <input 타입 = "파일"NAME = " 이미지 "/> <BR/> 3 <input 타입 값 = '제출'= "上传"/> 4 </ 양식
제품 케이스 프리젠 테이션의 사진을 업로드 :
1 <양식 액션 = "$ {pageContext.request.contextPath} / 제품 / 저장"
방법 2 = "후"에 enctype = "multipart / form-data"로>
3 <! - 신체 영역 ->
4 <섹션 클래스 = "내용"> <! - 제품 ->
5
6 <DIV 클래스 = "패널 패널 기본">
7 <DIV 클래스 = "패널 제목"> 제품 </ DIV>
8 <div 클래스 = "로우 데이터 타입">
9
10 <DIV 클래스 = "COL-MD-2 제목"> 제품 </ DIV>
11 <div 클래스 = "COL-MD-4 데이터">
12 <input 타입 = "텍스트"클래스 = "폼 제어 '이름 ="이름 "
13 자리 = "이름"값 = "">
14 </ div>
(15)
16 <DIV 클래스 = "COL-MD-2 제목"> 가격 </ DIV>
17 <div 클래스 = "COL-MD-4 데이터">
18 <input 타입 = "텍스트"클래스 = "폼 제어"자리 = "产品 价格"
19 명 = "가격"값 = "">
20 </ div>
(21)
22 <DIV 클래스 = "COL-MD-2 제목"> 사진 </ DIV>
23 <div 클래스 = "COL-MD-4 데이터">
24 <input 타입 = "파일"NAME = "이미지">
25 </ div>
(26)
27 <DIV 클래스 = "COL-MD-2 제목"> 카테고리 </ DIV>
28 <div 클래스 = "COL-MD-4 데이터">
29 <SELECT 클래스 = "폼 제어 선택 2"스타일 = "폭 : 100 %"
30 명 = "CID"ID = "카테고리">
(31)
(32)
33 </ 선택>
34 </ div>
(35)
36 <div 클래스 = "COL-MD-2 표제 rowHeight2x"> 설명 </ div>
37 <div 클래스 = "COL-MD-10 데이터 rowHeight2x">
38 <TextArea 클래스 = "폼 제어"행 = "3"자리 = "其他 信息"
39 명 = "DESC"> </ 텍스트 영역>
40 </ div>
(41)
42 </ div>
43 </ div>
44 <! - 주문 정보 / -> <! - 도구 모음 ->
45 <DIV 클래스 = "상자 도구 텍스트 센터">
46 <버튼형 = 클래스 "제출"= "BTN BG 적갈색"> 保存 </ 버튼>
47 <버튼 유형 = "버튼"클래스 = "BTN BG-기본"
48 οnclick = "history.back (-1) ;"> 리턴 </ 버튼> <- 돌아 가기 ->!
49 </ div>
그리고 한 페이지에 작성된 코드의 상단은 코드가 자동으로 요청을 보낼 때 페이지가로드, 쿼리 카테고리
1 <script의 SRC = "../ WEB-INF / JS / jquery.min.js"> </ script>
2 <스크립트 유형 = "텍스트 / 자바 스크립트">
3 / * 드롭 다운 목록을 조회 할 수 아약스 요청을 보낼 새로 만들기 버튼을 클릭 * /
4 window.οnlοad = 함수 () {
5 $ 아약스 ({
6 URL : "/ 카테고리 / 선택"
7 유형 : "POST",
8 dataType와 "JSON"
성공 9 : 함수 (데이터) {
10 // 경고 (데이터);
11 (VAR I = 0; I <data.length입니다; 나는 ++) {
12 VAR 옵션 = "<옵션 값 = \ ''+ (I + 1) +"\ "를 선택 = \"선택 \ ">"데이터 + [I] .cname + "</ 옵션>";
13 $ ( "# 카테고리") APPEND (옵션).;
14}
15}
16})
(17)
18}
(19)
20 </ script>
3. 세 번째 단계 : 제품 클래스의 제조, 및 제어기
제품 카테고리
1 개 공용 클래스 제품 {
이
INT 3 개인 아이디;
4 개인 문자열 이름;
5 개인 이중 가격;
6 개인 문자열 이미지;
7 개인 문자열 내림차순;
INT는 8 개인 식별자;
9
(10)
11 공용 INT getId () {
(12) 반환 아이디;
13}
(14)
15 공공 무효 setId (INT ID) {
16 this.id = ID;
17}
(18)
(19)
(20) 공공 문자열 getName () {
(21) 반환 이름;
22}
(23)
(24) 공공 무효에서는 setName (문자열 이름) {
25 this.name = 이름;
26}
(27)
(28)
(29) 공공 더블 getPrice () {
30 리턴 가격;
31}
(32)
(33) 공공 무효 setPrice (이중 가격) {
34 this.price = 가격;
35}
(36)
(37)
(38) 공공 문자열 된 GetImage () {
창 (39)의 이미지;
40}
(41)
42 공공 무효 setImage (문자열 이미지) {
43 this.image = 이미지;
44}
(45)
(46)
47 공공 문자열 getDesc () {
48 리턴 DESC;
49}
(50)
51 공공 무효 setDesc (문자열 내림차순) {
DESC = 52 this.desc;
53}
(54)
(55)
공공 (56) INT getCid () {
57은 창 시드;
58}
(59)
60 공공 무효 setCid (INT CID) {
61 this.cid = CID;
62}
(63)
64 @Override
(65) 공공 문자열 toString () {
66 복귀 "제품 {"+
67 "ID ="+ 아이디 +
68 ", 이름 = '"+ 이름 +'\ ''+
69 "가격 ="+ 가격 +
70 "이미지 = '"+ 영상 +'\ '+
71 "DESC =" "+ DESC + '\'+
72 "CID ="+ CID +
(73) "}";
74}
75}
제어 장치
1 @Controller
2 @RequestMapping ( "/ 제품")
3 개 공용 클래스 ProductController {
4 @Autowired
5 개인 ProductService productService;
6 @RequestMapping ( "/ 저장")
(7) 공공 문자열 (HttpServletRequest의 요청의 MultipartFile 저장 이미지 ) {
8지도지도 = request.getParameterMap ();
// 9에서 System.out.println ( "이미지 ="+ 이미지);
10 제품의 제품은 새로운 제품을 () =;
11 시도 {
12 BeanUtils.populate (제품 MAP);
(13)
(14)
15 // 정의 파일 이름
16 문자열 fileName에 = "";
17 일 //하면 원래 파일 이름을 가져옵니다
18 = 문자열 uploadFileName image.getOriginalFilename ();
19 // 2. 차단 파일 확장자
20 = 문자열 extendName uploadFileName.substring (uploadFileName.lastIndexOf () + 1 uploadFileName.length () ".");
21 // 3. 임의의 숫자와 파일, 중복 된 파일을 방지하기 위해
.. 22 문자열 UUID = UUID.randomUUID의 toString () () ( "-", "") 교체 .toUpperCase를 ();
23 개 // 4 결정하는 파일 이름 여부
(24)
25 만약 (! StringUtils.isEmpty (이미지)) {
fileName에 UUID = 26 + "_"+ + + 화상 extendName ".";
27} 다른 {
fileName에 UUID = 28 + "_"+ uploadFileName;
29}
30에서 System.out.println (파일 이름);
31 // 2. 가져 오기 파일 경로
. (32)의 ServletContext 컨텍스트 request.getSession ()를 getServletContext () =;
33 문자열 basePath = context.getRealPath ( "/ IMG는"); // 업로드 위치 후 설정 파일 저장이 대상 / gongcheng / IMG 의미
// 3. 34 폴더에 너무 많은 파일 같은 문제를 해결
. (35) // 문자열 datePath 새로운 SimpleDateFormat의 ( "YYYY-MM-DD") 형식 (새로운 날짜 ()) =;
(36)
// 37 (4)은 경로가 있는지 여부를 판정한다
38 파일 파일은 새로운 파일 (basePath) = // 파일 파일 = 새 파일 (basePath +를 "/"+ datePath ()) (단계 3 datePath 사용된다면, 백 애노테이션 파일에서이 단계)
39 만약 (!의 file.exists ()) {
40 file.mkdirs ();
41}
(42)
43 // 5. MulitpartFile 사용 인터페이스 방법, 지정된 위치에 기록 된 파일을 업로드
44 image.transferTo (새 파일 (파일, fileName에));
45 product.setImage (파일 이름); // 데이터베이스에 사용자 정의 파일 이름
(46)
47 productService.save (제품);
(48)
캐치 (49)} (예외 E) {
50 e.printStackTrace ();
51}
(52)
(53)
(54)
55 복귀 "제품 목록";
56}
57
(58)
59 @RequestMapping ( "/ findall은")
60 @ResponseBody
(61) 공개 목록 <제품 소개> findall은 () {
(62)
(63) 목록 <제품 정보> 제품 = productService.findAll ();
6465
(66 개) 반환 제품;
67}
(68)
69
70}
제 4 단계 : 스프링 mvc.xml의 구성 파일 파서
1 <! - 업로드 구성 파일 파서 -> 2 <빈 ID = "multipartResolver"<! - ID 값은 고정 -> 3 급 = "org.springframework.web.multipart.commons.CommonsMultipartResolver"> 4 <! - 업로드 5메가바이트의 최대 크기를 파일 -> 5 <속성 명 = "maxUploadSize"> 6 <값> 5242880 </ 값> 7 </ 속성> 8 </ 콩> 주 9 : 10 업로드 된 파일 파서 ID는 고정되어 다른 이름을, 그렇지 않으면 바인드 요청 매개 변수를 얻을 수없는 것입니다 재생할 수 없습니다. (다만 파일, 기타 필드 (11)가 결합되지 않음)
둘째, 데이터베이스 이미지가 페이지에 표시
1 <script의 SRC = "../ WEB-INF / JS / jquery.min.js"> </ script>
2 <스크립트 유형 = "텍스트 / 자바 스크립트">
페이지 로딩 자동 새로 고침 (또는 window.οnlοad = 기능 (과) {$ 아약스 ({URL :. ...})})
3 $ (함수 () {
4
5 $ 아약스 ({
6
7 URL : "/ 제품 / findall은"
8 방법 : "POST",
9 dataType와 "JSON"
성공 10 : 함수 (데이터) {
(11)
12 CONSOLE.LOG (데이터);
(13)
14 (VAR I = 0; I <data.length입니다; 나는 ++) {
(15)
VAR (16)의 TR = "<TR> \ n '+
17 "\ t <TD> <input 이름 = \"IDS \ "TYPE = \"체크 박스 \ "> </ TD> \ n '+
18 "\ t <TD>"+ (ⅰ + 1) + "</ TD> \ n '+
19 "\ n"+
20 "\ t <TD>"데이터 + [I] + .name과 "</ TD> \ n '+
21 "\ t <TD> \ n '+ 다음과 같다
22 "\ t \ t <IMG 폭 = \"40px \ "SRC = \"$ {} pageContext.request.contextPath / IMG / "데이터 + [I] + 이미지입니다"\ "ALT = \"\ "> \ n "+
23 "\ t </ TD> \ n '+
24 "\ t <TD>"데이터 + [I] .price + "</ TD> \ n '+
25 "\ t <TD>"데이터 + [I] .cid + "</ TD> \ n '+
26 "</ TR> \ n"
27 $ ( "# 목록") APPEND (TR).;
28}
29}
30})
31})
32 </ script>
밖으로 절반을 월, 반환은 여전히 십대입니다!
이 문제는 분산 환경에서 발생 달성 springmvc 파일 업로드 기능 분류기 있습니다 :
함께 사용자와 재 배포 웹 응용 프로그램, 제거 (삭제) 기존의 웹 응용 프로그램이 함께 삭제 파일을 업로드합니다. 다시로드 새로운 웹 사용자 업로드 된 파일은 자동으로 이전 신청 후 복원되지 않습니다.
위험 요약 : 웹 응용 프로그램의 재배치는 업로드 파일에 사용자가없는 이어질 것입니다.
위험 요약 : 동기화 메커니즘 파일이없는 경우, 업로드 된 파일은 파일을 다른 서버 업로드에 액세스 할 수 없습니다 클러스터 사용자에 액세스 할 선도 클러스터의 한 서버에 업로드 할 수 있습니다.
사용자 데이터 파일의 양이 매우 큰 볼륨에 치명적 업로드 한 경우, 그것은 심각하게 톰캣의 효율성에 영향을 미칠 것입니다.
위험 요약 : 서버 확장을위한 매뉴얼, 프로젝트가 연대 변경 될 수 있습니다 다른 곳에서 필요했다.
솔루션 소개
자신의 파일 서버를 구축 ①
예를 들면 : FastDFS
장점 : 서버가 자신의 정의를 스스로 관리 할 수 있습니다.
단점 : 많은 인적, 물적 자원을 투자해야합니다.
응용 프로그램 : 대규모 프로젝트는 대규모 파일을 저장합니다.
② 타사 클라우드 서비스를 사용하여
예를 들어 : OSS 알리 클라우드 오브젝트 스토리지 서비스를 제공합니다.
장점 : 자신의 서버 하드웨어 및 소프트웨어 자원을 유지하는 데. API 호출을 직접 운영, 경량 관련.
단점 : 데이터가 자신의 손에 있지 않습니다. 서버 유지 관리 자신을 도울 수 없습니다.
응용 프로그램 : 소규모 애플리케이션, 파일 데이터는 절대 개인 정보 보호하지 않습니다.
