FIC_Solar/SolarPower/Views/PowerStation/_UploadImage.cshtml

<div class="row mb-5">
    <div class="card border mb-5 w-100">
        <!-- notice the additions of utility paddings and display properties on .card-header -->
        <div class="card-header bg-fusion-50 pr-3 d-flex align-items-center flex-wrap justify-content-between">
            <!-- we wrap header title inside a div tag with utility padding -->
            <div class="card-title font-weight-bold">圖片上傳</div>
            <div class="text-right">
                <a href="javascript:;" class="btn btn-sm btn-success ml-auto waves-effect waves-themed" id="upload-station-image">
                    <span class="fal fa-plus mr-1"></span> 上傳圖片
                </a>
            </div>
        </div>
        <div class="card-body" id="power-station-image-card">
            <div class="row d-flex justify-content-between">
                @*<div class="col-xl">
                    <div class="card border m-auto m-lg-0" style="padding: 9.5px;">
                        <img src="~/img/card-backgrounds/cover-3-lg.png" class="card-img-top" alt="...">
                        <a href="javascript:void(0);" class="btn btn-danger btn-lg btn-icon rounded-circle waves-effect waves-themed position-absolute pos-top pos-right">
                            <i class="fal fa-times"></i>
                        </a>
                        <div class="card-body">
                            <div class="custom-control custom-checkbox">
                                <input type="checkbox" class="custom-control-input" id="defaultUnchecked">
                                <label class="custom-control-label" for="defaultUnchecked">卡片顯示圖</label>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xl">
                    <div class="card border m-auto m-lg-0" style="padding: 9.5px;">
                        <img src="~/img/blank.gif" class="card-img-top" alt="...">
                        <div class="card-body">
                            <div class="custom-control custom-checkbox">
                                <input type="checkbox" class="custom-control-input" id="defaultUnchecked">
                                <label class="custom-control-label" for="defaultUnchecked">卡片顯示圖</label>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xl">
                    <div class="card border m-auto m-lg-0" style="padding: 9.5px;">
                        <img src="~/img/blank.gif" class="card-img-top" alt="...">
                        <div class="card-body">
                            <div class="custom-control custom-checkbox">
                                <input type="checkbox" class="custom-control-input" id="defaultUnchecked">
                                <label class="custom-control-label" for="defaultUnchecked">卡片顯示圖</label>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xl">
                    <div class="card border m-auto m-lg-0" style="padding: 9.5px;">
                        <img src="~/img/blank.gif" class="card-img-top" alt="...">
                        <div class="card-body">
                            <div class="custom-control custom-checkbox">
                                <input type="checkbox" class="custom-control-input" id="defaultUnchecked">
                                <label class="custom-control-label" for="defaultUnchecked">卡片顯示圖</label>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xl">
                    <div class="card border m-auto m-lg-0" style="padding: 9.5px;">
                        <img src="~/img/blank.gif" class="card-img-top" alt="...">
                        <div class="card-body">
                            <div class="custom-control custom-checkbox">
                                <input type="checkbox" class="custom-control-input" id="defaultUnchecked">
                                <label class="custom-control-label" for="defaultUnchecked">卡片顯示圖</label>
                            </div>
                        </div>
                    </div>
                </div>*@

            </div>
        </div>

        <hr>
        <div class="card-body">
            <form id="power-station-images-form" enctype="multipart/form-data" class="dropzone needsclick dz-clickable" style="min-height: 7rem;">
                <div class="fallback">
                    <input name="StationImage" type="file" multiple />
                </div>
                <div class="dz-message needsclick">
                    <i class="fal fa-cloud-upload text-muted mb-3"></i> <br>
                    <span class="text-uppercase">將圖片拖曳至這裡或點擊選擇圖片.</span>
                    <br>
                    <span class="fs-sm text-muted">僅供預覽，並未實際上傳。</span>
                </div>
            </form>
        </div>

    </div>
</div>

<div class="row mb-5">
    <div class="card border mb-g w-100" >
        <!-- notice the additions of utility paddings and display properties on .card-header -->
        <div class="card-header bg-fusion-50 pr-3 d-flex align-items-center flex-wrap justify-content-between">
            <!-- we wrap header title inside a div tag with utility padding -->
            <div class="card-title font-weight-bold">單線圖</div>
            <div class="text-right">
                <a href="javascript:;" class="btn btn-sm btn-success ml-auto waves-effect waves-themed"  id="upload-station-single-line">
                    <span class="fal fa-plus mr-1"></span> 上傳圖片
                </a>
            </div>
        </div>
        <div class="card-body" id="power-station-single-line-card">
            <div class="row d-flex justify-content-between">
                @*<div class="col-xl">
                    <div class="card border m-auto m-lg-0" style="padding: 9.5px;">
                        <img src="~/img/card-backgrounds/cover-3-lg.png" class="card-img-top" alt="...">
                        <a href="javascript:void(0);" class="btn btn-danger btn-lg btn-icon rounded-circle waves-effect waves-themed position-absolute pos-top pos-right">
                            <i class="fal fa-times"></i>
                        </a>
                        <div class="card-body">
                            <div class="custom-control custom-checkbox">
                                <input type="checkbox" class="custom-control-input" id="defaultUnchecked">
                                <label class="custom-control-label" for="defaultUnchecked">卡片顯示圖</label>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xl">
                    <div class="card border m-auto m-lg-0" style="padding: 9.5px;">
                        <img src="~/img/blank.gif" class="card-img-top" alt="...">
                        <div class="card-body">
                            <div class="custom-control custom-checkbox">
                                <input type="checkbox" class="custom-control-input" id="defaultUnchecked">
                                <label class="custom-control-label" for="defaultUnchecked">卡片顯示圖</label>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xl">
                    <div class="card border m-auto m-lg-0" style="padding: 9.5px;">
                        <img src="~/img/blank.gif" class="card-img-top" alt="...">
                        <div class="card-body">
                            <div class="custom-control custom-checkbox">
                                <input type="checkbox" class="custom-control-input" id="defaultUnchecked">
                                <label class="custom-control-label" for="defaultUnchecked">卡片顯示圖</label>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xl">
                    <div class="card border m-auto m-lg-0" style="padding: 9.5px;">
                        <img src="~/img/blank.gif" class="card-img-top" alt="...">
                        <div class="card-body">
                            <div class="custom-control custom-checkbox">
                                <input type="checkbox" class="custom-control-input" id="defaultUnchecked">
                                <label class="custom-control-label" for="defaultUnchecked">卡片顯示圖</label>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xl">
                    <div class="card border m-auto m-lg-0" style="padding: 9.5px;">
                        <img src="~/img/blank.gif" class="card-img-top" alt="...">
                        <div class="card-body">
                            <div class="custom-control custom-checkbox">
                                <input type="checkbox" class="custom-control-input" id="defaultUnchecked">
                                <label class="custom-control-label" for="defaultUnchecked">卡片顯示圖</label>
                            </div>
                        </div>
                    </div>
                </div>*@

            </div>
        </div>

        <hr>
        <div class="card-body">
            <form id="power-station-single-line-form" action="/upload" class="dropzone needsclick dz-clickable" style="min-height: 7rem;">
                <div class="fallback">
                    <input name="" type="file" multiple />
                </div>
                <div class="dz-message needsclick">
                    <i class="fal fa-cloud-upload text-muted mb-3"></i> <br>
                    <span class="text-uppercase">將圖片拖曳至這裡或點擊選擇圖片.</span>
                    <br>
                    <span class="fs-sm text-muted">僅供預覽，並未實際上傳。</span>
                </div>
            </form>
        </div>

    </div>

</div>