到今天，題目查詢功能基本都完成了，接下來就要開始處理編輯模式。編輯模式是為了讓使用者能直接在系統介面上修改題目，而不用再手動去改 JSON 檔案。這樣一來，不論是新增、刪除還是更新，都能透過前端完成，再交給後端同步存檔，今天將pdf檔從前端新增至題庫。

▍程式碼

1. 加入edit頁面來做編輯模式

<!-- edit.html -->

<main>
    <!-- 加入上傳檔案按鈕 -->
    <input type="file" id="fileinput" name="files" accept=".pdf" multiple>
    <button class="btn btn-primary" onclick="uploadFile();">上傳</button>

    <!-- 顯示所有題目 -->
    <div class="row">
        <div id="search-results">
            {% for result in results %}
            <div class="all_questions">
                <p><strong>題目：</strong> {{ result.question_text }}</p>
                <div class="question-info">
                    來源：
                    {% for source in result.source_filename %}
                    <a href={{ source_path }} / {{ source }} target="_blank">
                        {{ source }}</a>
                    {% endfor %}
                    &nbsp;{{ result.book_source }}
                    &nbsp;p.{{ result.page_number }}
                </div>
                <ul class="list-unstyled" style="margin: 0px;">
                    {% set labels = ['A', 'B', 'C', 'D'] %}
                    {% for option in result.options %}
                    {% if option == result.answer %}
                    <li class="answer_highlight">
                        ({{ labels[loop.index0] }}) {{ option }}
                    </li>
                    {% else %}
                    <li>({{ labels[loop.index0] }}) {{ option }}</li>
                    {% endif %}
                    {% endfor %}
                </ul>
            </div>
            {% endfor %}
        </div>
    </div>
</main>

2. 將選擇檔案傳至後端

<script>
    function uploadFile() {
        // 獲取 #fileinput 上傳的檔案
        const files = $('#fileinput')[0].files; 

        if (files.length === 0) {
            alert('請先選擇一個或多個 PDF 檔案！');
            return;
        }
        
        // 將所有檔案並加入到FormData
        const formData = new FormData();
        for (let i = 0; i < files.length; i++) {
            formData.append('files', files[i]);
        }

        // 傳至後端處理
        $.ajax({
            url: '/upload_file',       // 後端 API 路由
            type: 'POST',              // 請求方法
            data: formData,            // 傳送的資料 (FormData物件)

            // 告訴jquery不要處理資料和內容類型，傳送FormData的原始格式
            processData: false,
            contentType: false,

            // 上傳成功
            success: function (data, textStatus, jqXHR) {
                alert('檔案上傳成功！');
            },

            // 失敗
            error: function (jqXHR, textStatus, errorThrown) {
                console.error('上傳時發生錯誤。HTTP 狀態:', jqXHR.status);
                console.error('錯誤詳情:', errorThrown);

                let errorMessage = '上傳時發生錯誤。';
                try {
                    const errorData = jqXHR.responseJSON;
                    if (errorData && errorData.error) {
                        errorMessage = '處理失敗: ' + errorData.error;
                    }
                } catch (e) {
                    // 如果回傳的不是json，保持通用錯誤訊息
                }
                alert(errorMessage);
            }
        });
    }

3. 後端獲取題目詳情

@app.route('/upload_file', methods=['POST'])
def upload_file():
    file_path = os.path.join( "存檔資料夾路徑" )
    files = request.files.getlist("files")
    uploaded_paths = []

    # 存檔
    for file in files:
        save_path = os.path.join(file_path, file.filename)
        file.save(save_path)
        uploaded_paths.append(save_path)

    # 處理新加入的檔案
    import projectname.pdftojson

    return jsonify({
        'message': f'成功上傳 {len(uploaded_paths)} 個檔案並呼叫處理函式。',
        'processed_files_count': len(uploaded_paths)
    }), 200

上傳檔案測試，成功上傳後可以在指定資料夾找到。