답변 3개
채택된 답변
+20 포인트
블랙캣77
2년 전
ajax 파일업로드 플러그인이 있습니다. 한번 알아보시고 파일 선택하고 나서 해당을 실행해서 파일만 미리 저장하시면 될거 같습니다.
로그인 후 평가할 수 있습니다
댓글을 작성하려면 로그인이 필요합니다.
2년 전
로그인 후 평가할 수 있습니다
댓글을 작성하려면 로그인이 필요합니다.
2년 전
Copy
<!DOCTYPE html>
<html lang="en">
<head>
<style>
#preview {
background-color: #eee;
height: 10em;
margin: 1em 0;
}
#preview img {
width: 100%;
height: 100%;
object-fit: contain;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function () {
const preview = document.getElementById('preview');
const attach = document.getElementById('attach');
const submit_ajax = document.getElementById('submit_ajax');
// preview
attach.addEventListener('change', function (evt) {
const [file] = this.files;
const url = URL.createObjectURL(file);
preview.innerHTML = '<img src="' + url + '" />';
});
// upload
submit_ajax.addEventListener('click', function (evt) {
const [file] = attach.files;
if (file != null) {
const action = location.pathname; // https://domain.com/path/file.php
const formData = new FormData();
formData.set('attach', file, file.name);
fetch(action, {
method: 'POST',
body: formData
})
.then(response => response.text())
.then(data => {
alert('upload complete');
});
}
});
}, false);
</script>
</head>
<body>
<div id="preview"></div>
<input type="file" accept="image/*" name="attach" id="attach" />
<button type="button" id="submit_ajax">Ajax submit</button>
</body>
</html>
로그인 후 평가할 수 있습니다
답변에 대한 댓글 1개
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인