PHP + AJAX 實作類 Windows 檔案管理系統（八）js.js 重命名與編輯模式完整解析

PHP + AJAX 實作類 Windows 檔案管理系統（八）js.js 重命名與編輯模式完整解析

本篇解析 js.js 中的 edit()（進入編輯模式）、CreateAjax()（複用）、Re_name()（驗證與送出重命名）三大函式。

1. 進入編輯模式 edit(e, path)

function edit(e, path) {
    var text = e.innerHTML; // 目前檔名
    var eT = document.createElement("input");
    e.innerHTML = "";
    e.appendChild(eT);
    eT.value = text;
    eT.select();
    e.onclick = ""; // 移除原本 onclick 避免重複觸發

    eT.onblur = function() {
        CreateAjax();
        if (text == this.value) { // 未修改
            e.innerHTML = this.value;
            e.onclick = function() { edit(this, path); };
            return false;
        } else {
            e.innerHTML = this.value; // 先更新畫面
            Re_name(path, this.value, e); // 送出 AJAX
            e.onclick = function() { edit(this, path); };
        }
    };
}

• 將 <p> 內文字替換為 <input>，自動選取內容方便使用者直接輸入。
• onblur 失焦時判斷是否實際修改，未修改則還原；修改則呼叫 Re_name。

2. 重命名驗證與送出 Re_name(o_name, n_name, e)

function Re_name(o_name, n_name, e) {
    // 從完整路徑擷取舊檔名
    var name = o_name.replace(/.*\/(.+)$/i, "$1");

    // 檔案：含點，禁止改副檔名
    if (name.match(/^\w{1,255}\.\w{1,8}$/i)) {
        if (!n_name.match(/^\w{1,250}\.\w{1,8}$/i)) {
            e.innerHTML = name;
            showTempMsg("對不起,不能修改文件的擴展名...");
            return false;
        }
    }
    // 資料夾：無點，禁止改成檔案格式
    else if (name.match(/^\w{1,255}$/i)) {
        if (!n_name.match(/^\w{1,250}$/i)) {
            e.innerHTML = name;
            showTempMsg("對不起,不能把文件夾重命名為文件名...");
            return false;
        }
    } else {
        alert('非法操作');
        e.innerHTML = name;
        return false;
    }

    var url = "rename.php?path=" + encodeURI(o_name.replace("/", "\\/")) + "&nname=" + encodeURI(n_name) + "&rd=" + Math.random();
    Senddata('GET', url, ReturnValue, null);
}

function showTempMsg(msg) {
    document.getElementById("t").innerHTML = "<div id='info' style='position:absolute; height:20px; z-index:1; left:245px; top:121px;display:block'>" + msg + "</div>";
    setInterval("func()", 3000); // func() 需自行定義以隱藏訊息
}

• 前端同步後端正則：檔案名必須含點且副檔名 1-8 字元；資料夾名不可含點。
• 違規時還原舊名並顯示暫時訊息（需配合 func() 隱藏）。
• 路徑同樣做 replace("/", "\\/")，實際上應改用 encodeURIComponent。

3. 缺失與改進

1. 缺少 func() 定義：程式碼呼叫 setInterval("func()", 3000) 但未見 func 函式，會導致 JS 錯誤。應改用 setTimeout(() => { hideMsg(); }, 3000)。
2. 編碼問題：encodeURI 不編碼 & =，參數值必須用 encodeURIComponent。
3. 正則限制中文：\w 不包含中文，導致中文檔名無法重命名。建議改用 ^[\u4e00-\u9fa5\w\-]{1,255}$ 等 Unicode 友善模式。
4. 同步更新 UI 再送 AJAX：若伺服器端失敗，畫面已改名，造成不一致。建議等伺服器回應成功後再更新 DOM，或提供回滾機制。