회원사진 업로드시 미리보기 또는 바로 저장방법은 어떻게 해야하나요?
본문
그누보드 회원사진의 경우 업로드시 파일명만 기재되고 따로 저장버튼을 클릭해야 업로드가 되는데요
혹시 이걸 업로드시 미리보기와 함께 자동저장하려면 어떤방법으로 사용해야할까요?
답변 3
ajax 파일업로드 플러그인이 있습니다. 한번 알아보시고 파일 선택하고 나서 해당을 실행해서 파일만 미리 저장하시면 될거 같습니다.
<!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>
답변을 작성하시기 전에 로그인 해주세요.
