{% extends "main_base.html" %}
{%block head%}
{{super()}}
<style type="text/css">
    input[type="file"] {
        display: none;
    }
    .custom-file-upload {
        border: 1px solid #ccc;
        display: inline-block;
        cursor: pointer;
    }
</style>
{%endblock%}
{% block title%}Upload|COVID-19 Detector{% endblock %}
{% block mycontent%}
<section class="page-header">
</section><!-- /.page-header -->
<section class="prevention-one prevention-one__prevention-page">
    <div class="container">
        <div class="block-title text-center" style="margin-bottom: 40px;">
            <h3>上传图片 </h3>
            <br>
            <p style="font-size: 25px;">请选择一张你想要诊断的图片</p>
        </div><!-- /.block-title text-center -->
        <div class="row">
            <div class="col-lg-6" style="padding-left: 100px;">
                <div class="card" style="width: 25rem;">
                    <p class="card-title"
                        style="text-align: center; padding-top: 10px;padding-bottom: 10px;color:white; background-color:#112559;">
                        X光胸片</p>
                    <img class="card-img-top" src="{{ url_for('static', filename='images/x-ray2.jpg')}}" height="240px" alt="Card image cap">
                    <div class="card-body">
                        <p class="card-text"></p>
                        <div class="text-center">
                            <form action="/uploaded_chest/{{current_user.id}}" method="post" enctype="multipart/form-data">
                                <label for="file-upload_1" id="label_1" class="custom-file-upload btn btn-primary"
                                    style="margin-top: 8px; margin-right: 10px;">
                                    选择图片
                                </label> <!--点击label->焦点转移到input元素上 -->
                                <input type="file" name="file" id="file-upload_1" onchange="showname()" />
                                <input type="submit" value="上传" class="btn btn-success">
                            </form>
                        </div>
                    </div>
                </div>
            </div><!-- /.col-lg-6 -->
            <div class="col-lg-6">
                <div class="card" style="width: 25rem;">
                    <p class="card-title"
                        style="text-align: center; padding-top: 10px;padding-bottom: 10px;color:white; background-color:#112559;">
                        CT扫描</p>
                    <img class="card-img-top" src="{{ url_for('static', filename='images/ct-scan.png')}}" height="240px" alt="Card image cap">
                    <div class="card-body">
                        <p class="card-text"></p>
                        <div class="text-center">
                            <form action="/uploaded_ct/{{current_user.id}}" method="post" enctype="multipart/form-data"> <!--支持文件上传-->
                                <label for="file-upload_2" id="label_2" class="custom-file-upload btn btn-primary"
                                    style="margin-top: 8px; margin-right: 10px;">
                                    选择图片 <!--关联file_upload_2-->
                                </label>
                                <input type="file" name="file" id="file-upload_2" onchange="showname_2()" />
                                <input type="submit" value="上传" class="btn btn-success">
                            </form>
                        </div>
                    </div>
                </div>
            </div><!-- /.col-lg-6 -->
        </div><!-- /.row -->
    </div><!-- /.container -->
</section><!-- /.prevention-one -->
<script type="text/javascript">
    function showname() {
        var name_1 = document.getElementById('file-upload_1');
        document.getElementById('label_1').innerHTML = name_1.files.item(0).name;
    };
    function showname_2() {
        var name_2 = document.getElementById('file-upload_2');
        document.getElementById('label_2').innerHTML = name_2.files.item(0).name;
    };
</script>
{%endblock%}