❤️개발자
Search…
WEB 서비스에서 사용
아래 함수를 사용해서 구현하시면 편합니다.
1
2
// elm : 클릭할 수 있는 html element 예를 들면, 파일첨부버튼
3
// key : api-key
4
// callback : url을 받아올때 실행되는 함수, 사용자에게 표시하는 로직을 구현하면 됨
5
// 예) makeFilekiwiButton( document.getElementById("btn"), "keykeyekyefwefwefsfadf"
6
// , url=>alert(url));
7
8
9
function makeFilekiwiButton(elm, key, callback) {
10
11
elm.addEventListener("click", function() {
12
13
var w = 500;
14
var h = 500;
15
var dualScreenLeft = window.screenLeft != undefined ? window.screenLeft : screen.left;
16
var dualScreenTop = window.screenTop != undefined ? window.screenTop : screen.top;
17
var width = window.innerWidth ? window.innerWidth : document.documentElement.clientWidth ? document.documentElement.clientWidth : screen.width;
18
var height = window.innerHeight ? window.innerHeight : document.documentElement.clientHeight ? document.documentElement.clientHeight : screen.height;
19
var left = ((width / 2) - (w / 2)) + dualScreenLeft;
20
var top = ((height / 2) - (h / 2)) + dualScreenTop;
21
var win = window.open("", "_blank", 'menubar=yes,location=yes,resizable=yes,scrollbars=yes, width=' + w + ', height=' + h + ', top=' + top + ', left=' + left);
22
23
24
const url = 'https://api.file.kiwi/v1/webfolder';
25
const options = {
26
method: 'POST',
27
// mode:'cors',
28
headers: {
29
//Accept: 'application/json',
30
'Content-Type': 'application/json',
31
'x-api-key': key
32
},
33
body: '{}'
34
};
35
36
fetch(url, options)
37
.then(res => res.json())
38
.then(json => {
39
40
var url = json.url;
41
42
43
callback(url);
44
win.document.write("파일을 업로드할 웹폴더가 생성중입니다. 잠시만 기다려주세요.");
45
win.document.write("<","script",">");
46
win.document.write('alert("* 파일업로드는 10분내에 시작되야 합니다.(그때까지 완료될 필요는 없음)\\n* 업로드중에는 현재창을 닫지 말고 유지해야 하지만,\\n* 링크전달을 기다릴 필요는 없습니다. 웹폴더 링크는 바로 전달해도 됩니다.");');
47
win.document.write("location.href='" + url + "'");
48
49
win.document.write("<","/script",">");
50
51
52
//win.location.href = url;
53
if (window.focus) {
54
win.focus();
55
}
56
})
57
.catch(err => console.error('error:' + err));
58
59
60
61
62
});
63
64
65
};
66
67
68
Copied!
1.채팅창에 대용량 파일첨부 기능을 추가하는 예제
하단 파일첨부 버튼을 클릭하세요.
1
Copied!
2. 게시판에 대용량 파일 첨부 기능 추가
Last modified 4mo ago
Copy link