// 하나의 사진을 업로드
HTML :
<DIV 클래스 = "azwoo"> </ DIV>
<DIV 클래스 = "azwot">
<input 타입 = "파일"NAME = ""클래스 = "fileinput13"데이터 ID = "9"다중 = "복수">
<스팬> 화상 </ 스팬>을 선택
</ DIV>
JS 코드 :
설명 : 여러 = "복수": 우리는이 코드 줄의 배경을보고, HTML5는 여러 속성 및 할당을 추가 할 수 있습니다 여러 속성, 즉 <= "파일"입력 형식을> 지원
즉, <input 타입 = "파일"다중 = "복수">이고, 일회성이 너무 길의 사진을 얻기 위해, 동시에 여러 개의 이미지를 업로드하는 것은 : $ ( 'XX') [0] .files [0]
$ ( ".fileinput13"). 변화 (함수 () {
var 파일 this.files = [0];
ReadFile을 (파일, $ (이) .parent () 형제 (). "azwoo.");
image_id = $ (이) .attr ( "데이터 ID");
});
= document.querySelector에 VAR ( ". azwoo");
// 시작하는 요청을 보낼
함수에서 ReadFile (파일, 요소) {
새로운 리더를 작성합니다 //
VAR 리더 = 새을 FileReader ();
// 파일 형식 선택 모드 읽기
스위치 (file.type) {
경우 '이미지 / JPG'
경우 '이미지 / PNG로'
경우 '이미지 / JPEG'
경우 '이미지 / GIF'
reader.readAsDataURL (파일);
단절;
};
방법은 읽은 파일의 종료 후 실행 // 때
reader.addEventListener ( '부하', 함수 () {
우리의이 문서가 보여 읽게 말하면 // 다음, 여전히 당신은 라벨에 의해 다른 유형의 파일을 작성해야
스위치 (file.type) {
경우 '이미지 / JPG'
경우 '이미지 / PNG로'
경우 '이미지 / JPEG'
경우 '이미지 / GIF'
VAR의 IMG = document.createElement ( "IMG");
img.src = reader.result;
CONSOLE.LOG (image_id img.src +);
element.append (IMG);
element.show ();
$ 아약스 ({
유형 : "POST",
URL : "http://192.168.0.171:8080/WSHD/jiekou7/ADImage"
dataType와 "JSON"
데이터:{
이미지 : img.src,
스타일 : 4,
ID : image_id
},
성공 : 기능 (고해상도) {
CONSOLE.LOG는 ( "성공 !!!!!!!!! 업로드");
}
}); // 종료 요청
단절;
}
});
} //에서 ReadFile 함수 종료