2018. 7. 18. 15:25 프로그래밍/java script
파일 업로드
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ajax 파일 업로드</title>
</head>
<body>
<h1>AJAX 멀티파트 전송 - 파일 선택 즉시 전송하기</h1>
<pre>
1) jQuery의 파일 업로드 관련 플러그인을 설치한다.
> npm init
> npm install jquery@1.12.4 --save
> npm install bootstrap --save
> npm install blueimp-file-upload --save
2) HTML에 업로드 관련 자바스크립트 라이브러리 추가
3) input 태그 추가
- form 태그와 submit 타입의 버튼은 필요 없다.
- 대신 input 태그에 서버측 URL를 지정한다.
- 여러 개를 선택하고 싶다면 multiple 속성을 추가한다.
4) jquery.fileupload() 함수를 이용하여 서버에 비동기 요청하기
- 여러 개의 파일을 선택했을 때, 각 파일마다 따로 비동기 요청을 수행함.
- 각각의 파일에 대해 업로드가 완료되면 done() 함수가 호출된다.
</pre>
<input id="fileupload" type="file" name="files"
data-url="/control/controller24/upload2.do" multiple>
<script src="node_modules/jquery/dist/jquery.js"></script>
<script src="node_modules/blueimp-file-upload/js/vendor/jquery.ui.widget.js"></script>
<script src="node_modules/blueimp-file-upload/js/jquery.iframe-transport.js"></script>
<script src="node_modules/blueimp-file-upload/js/jquery.fileupload.js"></script>
<script>
"use strict"
$('#fileupload').fileupload({
dataType: 'json',
done: function (e, data) {
console.log('done()...');
console.log(data.result); // 서버가 보낸 JSON 객체는 data.result 에 보관되어 있다.
var file = data.result.fileList[0];
$('<p/>').text(file.filename + " : " + file.filesize).appendTo(document.body);
}
});
</script>
</body>
</html>
'프로그래밍 > java script' 카테고리의 다른 글
| javascript에서 배열을 json화 하기 (0) | 2019.11.07 |
|---|---|
| 디비 값 출력하기 (0) | 2018.08.01 |
| 데이터베이스에 데이터를 보내는 부분 (스크립트) (0) | 2018.07.25 |
| 페이지 이동하는 스크립트 (0) | 2018.07.25 |
| scroll의 이동 (top,bottom) (0) | 2018.07.17 |
