토이프로젝트 | 스파르타 커뮤니티

커뮤니티

포인트

쿠폰

내 강의실

국비 신청 내역

증명서

계정

로그아웃

학습 질문

개발 일지

나의 활동

답변 완료

토이프로젝트

undefined주차

이*완

・

추천

・

조회수

답변 완료

토이 프로젝트 하는 중에

이런 사진을 올리고 글을 써서 db에 보내 저장하는 페이지를 만들었는데 이때 날짜는 페이지에 안보이지만 db에는 나타나게 코드를 짤려고 해서

밑에 처럼 코드를 짰는데 저장하기 버튼을 눌러도 실행이 안되어서요

app.py 코드

from flask import Flask, render_template, request, jsonify
app = Flask(__name__)

from pymongo import MongoClient
client = MongoClient('mongodb+srv://test:sparta@cluster0.dlmjsn4.mongodb.net/Cluster0?retryWrites=true&w=majority')
db = client.dbsparta


@app.route('/')
def home():
    return render_template('write.html')

@app.route("/write", methods=["POST"])
def write_post():
        image_receive = request.form['image_give']
        comment_receive = request.form['comment_give']
        day_receive = request.form['day_give']

        doc = {

             'image':image_receive,
             'comment':comment_receive,
             'day': day_receive
        }
        db.write.insert_one(doc)
        return jsonify({'msg': '저장 완료!'})


@app.route("/write", methods=["GET"])
def write_get():
    return jsonify({'msg': 'GET 연결 완료!'})

if __name__ == '__main__':
    app.run('0.0.0.0', port=5000, debug=True)

html 코드입니다
<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
          integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
            integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
            crossorigin="anonymous"></script>

    <title>writing</title>
    <link href="https: //fonts.googleapis.com/css2? family= 노토+산스+KR:wght@100;300 &family= Noto+Serif & display=swap" rel="stylesheet">
    <style>
        * {
            font-family: 'Noto Serif', serif;
        }

        .write_title {

            max-width: 2000px;
            width: 100%;
            height: 150px;

            background-image: url("data:image/jpeg;base64,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");
            background-position: center;
            background-size: cover;

            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }

        .write_box {
            max-width: 1200px;
            width: 95%;
            width: 500px;

            margin: 100px auto 0px auto;

            box-shadow: 0px 0px 3px 0px gray;

            padding: 20px;
        }

        .preview{
           width: 460px;
            height: 200px;
            margin: 10px 0px 10px 0px;
        }
        .btn-light{
            margin: 10px auto 0px 150px;
        }

        .t

    </style>
<script src="http://madalla.kr/js/jquery-1.8.3.min.js"></script>

<script >
    $(function() {
        $("#myFile").on('change', function(){
        readURL(this);
        });
    });
    function readURL(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();
            reader.onload = function (e) {
            $('#View').attr('src', e.target.result);
            }
            reader.readAsDataURL(input.files[0]);
        }
    }




    function save_write() {
            let image = $('#myFile').val()
            let comment = $('#comment').val()
            let day = new Date().val()

        $.ajax({
                type: "POST",
                url: "/write",
                data: { image_give:image, comment_give:comment, day_give:day.toLocaleString(),},
                success: function (response) {
                    alert(response["msg"])
                    window.location.reload()
                }
            });
        }
</script>

</head>

<body>
<div class="write_title">
    <h1>Instargram</h1>
</div>
<div class="write_box">


    <input type='file' id="myFile" />
    <img  src="#" alt="이미지 미리보기" class="preview" id="View" />



    <textarea class="form-control" placeholder="20 글자 이상 작성 해주세요." id="comment"
                  style="height: 100px"></textarea>
    <label for="comment"></label>


    <a onclick="save_write()" type="button" class="btn btn-light" id="" >저장하기</a>




</div>

</body>

</html>

댓글 알림