// 注入式多文件選擇功能 - 僅保留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;
})();
H5頁面,注入式多文件選擇功能
最后編輯于 :
?著作權(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ù)。
【社區(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)容
- 在微信服務(wù)號(hào)開發(fā)的時(shí)候經(jīng)常會(huì)遇到微信支付的功能實(shí)現(xiàn),通過實(shí)際經(jīng)驗(yàn)自己總結(jié)了一下,前端在H5頁面調(diào)起微信支付有兩種辦...
- 問題描述:App中嵌入h5頁面,調(diào)起app native之后返回h5頁面 此時(shí)刷新頁面(如支付點(diǎn)擊已完成未完成)注...
- 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML標(biāo)準(zhǔn)。 注意:講述HT...
- 1頁面鏈接檢查每一個(gè)鏈接是否都有對(duì)應(yīng)的頁面,并且頁面之間切換正確; 2相關(guān)性檢查刪除/增加一項(xiàng)會(huì)不會(huì)對(duì)其他項(xiàng)產(chǎn)生影...
- 1頁面鏈接檢查每一個(gè)鏈接是否都有對(duì)應(yīng)的頁面,并且頁面之間切換正確; 2相關(guān)性檢查刪除/增加一項(xiàng)會(huì)不會(huì)對(duì)其他項(xiàng)產(chǎn)生影...