H5頁面,注入式多文件選擇功能

// 注入式多文件選擇功能 - 僅保留triggerAllFileSelect相關(guān)邏輯
(function() {
    // 避免重復(fù)注入
    if (document.getElementById('inject-file-selector')) return;

    // 1. 創(chuàng)建并注入DOM元素
    function createDOM() {
        // 容器
        const container = document.createElement('div');
        container.id = 'inject-file-selector';
        container.style.cssText = `
            position: fixed;
            top: 20px;
            right: 20px;
            z-index: 99999;
            background: #fff;
            padding: 15px;
            border: 1px solid #ccc;
            border-radius: 8px;
            min-width: 300px;
        `;

        // 標(biāo)題
        const title = document.createElement('h4');
        title.textContent = '多文件選擇測(cè)試';
        title.style.margin = '0 0 10px 0';
        title.style.fontSize = '16px';

        // 選擇按鈕
        const btn = document.createElement('button');
        btn.id = 'inject-select-btn';
        btn.textContent = '選擇任意文件(多文件)';
        btn.style.padding = '8px 16px';
        btn.style.background = '#007bff';
        btn.style.color = '#fff';
        btn.style.border = 'none';
        btn.style.borderRadius = '4px';
        btn.style.cursor = 'pointer';
        btn.style.marginBottom = '10px';

        // 隱藏的文件輸入框
        const fileInput = document.createElement('input');
        fileInput.id = 'inject-file-input';
        fileInput.type = 'file';
        fileInput.multiple = true;
        fileInput.style.display = 'none';

        // 信息展示區(qū)域
        const infoArea = document.createElement('div');
        infoArea.id = 'inject-file-info';
        infoArea.style.fontSize = '12px';
        infoArea.style.maxHeight = '200px';
        infoArea.style.overflowY = 'auto';
        infoArea.style.marginTop = '10px';
        infoArea.innerHTML = '未選擇任何文件';

        // 組裝DOM
        container.appendChild(title);
        container.appendChild(btn);
        container.appendChild(fileInput);
        container.appendChild(infoArea);
        document.body.appendChild(container);

        return {
            btn: btn,
            fileInput: fileInput,
            infoArea: infoArea
        };
    }

    // 2. 核心函數(shù):觸發(fā)多文件選擇
    function triggerAllFileSelect() {
        const dom = createDOM();
        
        // 按鈕點(diǎn)擊觸發(fā)文件選擇
        dom.btn.addEventListener('click', function() {
            dom.fileInput.click();
            log('用戶點(diǎn)擊選擇文件按鈕', dom.infoArea);
        });

        // 處理文件選擇結(jié)果
        dom.fileInput.addEventListener('change', function() {
            const files = Array.from(this.files);
            if (files.length === 0) {
                log('用戶取消了文件選擇', dom.infoArea);
                dom.infoArea.innerHTML = '未選擇任何文件';
                return;
            }

            // 展示文件信息
            log(`成功選擇 ${files.length} 個(gè)文件`, dom.infoArea);
            let infoHtml = `<strong>共選擇 ${files.length} 個(gè)文件:</strong><br><br>`;
            files.forEach((file, index) => {
                const size = (file.size / 1024).toFixed(2) + 'KB';
                infoHtml += `文件${index+1}:<br>
                            ? 名稱:${file.name}<br>
                            ? 大?。?{size}<br>
                            ? 類型:${file.type || '未知'}<br><br>`;
            });
            dom.infoArea.innerHTML = infoHtml;

            // 清空input值,支持重復(fù)選擇同一文件
            this.value = '';
        });
    }

    // 輔助函數(shù):日志記錄
    function log(message, infoArea) {
        const time = new Date().toLocaleTimeString();
        console.log(`[${time}] ${message}`); // 控制臺(tái)日志
        // 可選:在頁面信息區(qū)域也顯示日志
        // infoArea.innerHTML += `<br>[${time}] ${message}`;
    }

    // 3. 執(zhí)行注入
    triggerAllFileSelect();

    // 暴露全局函數(shù)(可選,方便手動(dòng)調(diào)用)
    window.triggerAllFileSelect = triggerAllFileSelect;
})();
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容