반응형
2021.11.02 - [Front-end] - [Javascript / CSS / HTML ] 내 컴퓨터에 저장된 이미지 업로드 하기(화면에 업로드된 이미지 보여주기)
[Javascript / CSS / HTML ] 내 컴퓨터에 저장된 이미지 업로드 하기(화면에 업로드된 이미지 보여주기)
구현할 것 파일선택 버튼 클릭 -> 내 컴퓨터에서 이미지 파일 선택 -> 화면에 이미지, 파일 이름 띄우기 부분 form을 통한 파일 처리 이미지 파일을 받기 위해 enctype을 설정해준다. input 설정 accept="i
diddl.tistory.com
위 포스트와 이어서 해보자면..
코드는 젤 아래에 일괄 공개할 예정이다.
다음과 같이 레이아웃을 만들었다.
저장하기 버튼을 누르면 서버로 이미지가 업로드 된다.
이미지 다운 버튼을 누르면 이때까지 올렸던 이미지들이 다운된다.
flask, mongodb, ajax, jquery를 이용해 간단하게 만들어봤다.
app.py
from flask import Flask, render_template, jsonify, request
app = Flask(__name__)
from pymongo import MongoClient
client = MongoClient('localhost', 27017)
db = client.dbtest
# HTML 화면 보여주기
@app.route('/')
def homework():
return render_template('test.html')
# 저장하기(POST) API
@app.route('/api/uploading', methods=['POST'])
def image_upload():
# 클라이언트로 부터 정보 넘겨받기
img = request.form['img']
# mongodb에 이미지 넣기
doc = {'img': img} # key:value
db.test.insert_one(doc)
return jsonify({'msg': '저장되었습니다.'}) # 저장 완료됨을 알림
# 서버에서 이미지를 가져오는 부분
@app.route('/api/imgdown', methods=['GET'])
def image_download():
# 서버의 모든 이미지 리스트로 가져오기
data = list(db.test.find({}, {'_id': False}))
return jsonify({'downimg': data}) # 이미지 데이터 넘겨주기
if __name__ == '__main__':
app.run('0.0.0.0', port=5001, debug=True)
test.html
<!doctype html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>이미지, 서버전송</title>
<!-- jQuery를 import 합니다 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<style>
.addImage {
width: 400px;
height: 300px;
background-color: lightgray;
border-radius: 20px 20px / 20px 20px;
overflow: hidden;
margin: 0px 10px 10px 0px;
}
.inputImg {
width: 450px;
height: 350px;
}
</style>
<script>
function imgToBase64ByFileReader(url) {
return new Promise((resolve, reject) => {
let xhr = new XMLHttpRequest();
xhr.onload = () => {
let reader = new FileReader();
reader.onloadend = function () {
resolve(reader.result);
$('#img-id').attr("src", reader.result);
}
reader.readAsDataURL(xhr.response);
}
xhr.open('GET', url);
xhr.responseType = 'blob';
xhr.send();
});
}
function loadFile(input) {
let file = input.files[0]; // 선택된 파일 가져오기
let newImage = document.createElement("img"); //새 이미지 추가
//이미지 source 가져오기
newImage.src = URL.createObjectURL(file); //fakepath image url
newImage.id = "img-id"
newImage.style.width = "100%";
newImage.style.height = "100%";
newImage.style.objectFit = "cover";
//이미지를 image-show div에 추가
$('#image-show').appendChild(newImage);
//이미지를 base64 형태로 변환
imgToBase64ByFileReader($('#img-id').attr("src"));
}
function download_img() {
$.ajax({
type: "GET",
url: "/api/imgdown",
data: {},
success: function (response) { // 성공하면
let dwnImg = response['downimg'];
for (let i = 0; i < dwnImg.length; i++) {
// 새 이미지 만들기
let newImage = document.createElement("img");
newImage.src = dwnImg[i]['img'];
// div에 새 이미지 추가
let container = document.getElementById('addimg');
container.appendChild(newImage);
}
}
})
}
function upload_img() {
$.ajax({
type: "POST",
url: "/api/uploading",
data: { img: $('#img-id').attr("src") },
success: function (response) {
window.location.reload();
}
})
}
</script>
</head>
<body>
<form class="inputImg" method="post" enctype="multipart/form-data"> <!-- 이미지 파일 데이터에 알맞는 enctype 설정 -->
<div class="addImage" id="image-show"> <!-- 이미지 띄울 공간 -->
</div>
<input type="file" accept="image/*" onchange="loadFile(this)">
</form>
<button onclick="upload_img()" type="button">저장하기</button>
<!--서버에서 이미지를 가져와서 띄울 공간-->
<div id="addimg">
<button onclick="download_img()" , type="button">이미지 다운</button>
</div>
</body>
</html>
폴더구조
2021.11.03 - [Front-end] - [JavaScript] 로컬 디렉토리 이미지 Base64로 인코딩하기
[JavaScript] 로컬 디렉토리 이미지 Base64로 인코딩하기
2021.11.02 - [Front-end] - [Javascript / CSS / HTML ] 내 컴퓨터에 저장된 이미지 업로드 하기(화면에 업로드된 이미지 보여주기) 내 컴퓨터에서 이미지 파일 선택 -> 화면에 이미지, 파일 이름 띄우기 부분 fo
diddl.tistory.com
이미지 인코딩 방법은 다음 포스트를 참고!
이렇게 간단한 이미지 다운로드, 업로드 하는 웹 서비스를 만들어 보았다.
반응형
'기타 공부들' 카테고리의 다른 글
| [Jinja2] Jinja2 Flask를 이용한 템플릿 렌더링 하는 법 (0) | 2021.11.03 |
|---|---|
| [Flask] Flask란? Flask 예제 (0) | 2021.11.03 |
| [JavaScript] 로컬 디렉토리 이미지 Base64로 인코딩하기 (0) | 2021.11.03 |
| [Python] pymongo 라이브러리로 mongodb 사용하기, pymongo 예제 (0) | 2021.11.03 |
| [Git] Pycharm과 Git 연동하기 (0) | 2021.11.03 |