功能介紹批量上傳一次性拖入多個文件自動識別中文文件名。拼音轉(zhuǎn)換實時生成拼音首字母大寫多音字精準匹配。本地打包轉(zhuǎn)換完成后一鍵下載。效果展示源碼!DOCTYPE html html langzh-CN head meta charsetUTF-8 / meta nameviewport contentwidthdevice-width, initial-scale1.0 / title文件名批量轉(zhuǎn)拼音工具/title style * { margin: 0; padding: 0; box-sizing: border-box } body { font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif; background: linear-gradient(135deg,#667eea 0%,#764ba2 100%); min-height: 100vh; padding: 20px } .container { max-width: 900px; margin: 0 auto; background: #fff; border-radius: 18px; overflow: hidden; box-shadow: 0 20px 40px rgba(0,0,0,.15) } header { background: linear-gradient(135deg,#667eea 0%,#764ba2 100%); color: #fff; padding: 30px; text-align: center } header h1 { font-size: 2.2em; font-weight: 300; margin-bottom: 8px } header p { font-size: 1em; opacity: .9 } .content { padding: 30px } .upload-box { border: 3px dashed #ddd; border-radius: 12px; padding: 50px 20px; text-align: center; cursor: pointer; transition: .3s; background: #fafafa; margin-bottom: 25px } .upload-box:hover, .upload-box.dragover { border-color: #667eea; background: #f0f4ff; transform: translateY(-2px) } .upload-icon { font-size: 3em; color: #667eea; margin-bottom: 15px } .upload-txt { font-size: 1.2em; color: #555; margin-bottom: 8px } .upload-hint { color: #999; font-size: .9em } #fileInput { display: none } .stats { display: flex; justify-content: space-around; padding: 15px 0; background: #f7f9fc; border-radius: 10px; margin-bottom: 20px } .stat { text-align: center } .stat .num { font-size: 1.8em; font-weight: bold; color: #667eea } .stat .label { color: #666; font-size: .85em; margin-top: 4px } .file-list .empty { text-align: center; padding: 50px; color: #bbb } .file-item { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border: 1px solid #eee; border-radius: 10px; margin-bottom: 10px; background: #fff; transition: .3s } .file-item:hover { box-shadow: 0 5px 15px rgba(0,0,0,.08); transform: translateY(-1px) } .file-info { display: flex; align-items: center; gap: 12px; flex: 1 } .file-icon { font-size: 1.6em; color: #667eea } .name-box { flex: 1 } .orig { font-weight: 500; color: #333; margin-bottom: 4px } .pinyin { color: #667eea; font-size: .95em } .actions { display: flex; gap: 8px } .btn { padding: 7px 14px; border: none; border-radius: 6px; font-size: .9em; cursor: pointer; transition: .3s } .btn-primary { background: #667eea; color: #fff } .btn-primary:hover { background: #5a6fd8 } .btn-danger { background: #dc3545; color: #fff } .btn-danger:hover { background: #c82333 } .batch-bar { display: flex; gap: 12px; margin-top: 20px } .progress-bar { width: 100%; height: 6px; background: #e0e0e0; border-radius: 3px; overflow: hidden; margin-top: 15px; display: none } .progress-fill { height: 100%; background: linear-gradient(90deg,#667eea,#764ba2); width: 0; transition: .3s } media(max-width:600px) { .file-item { flex-direction: column; align-items: flex-start } .actions { width: 100%; justify-content: flex-end; margin-top: 10px } } /style !-- 瀏覽器版 pinyin-pro -- script srchttps://unpkg.com/pinyin-pro3.20.0/dist/index.js/script /head body div classcontainer header h1 文件名批量轉(zhuǎn)拼音工具/h1 p每個漢字拼音首字母大寫可批量下載/p /header div classcontent div classupload-box iduploadBox div classupload-icon/div div classupload-txt點擊或拖拽文件到此處/div div classupload-hint支持同時上傳多個文件/div input typefile idfileInput multiple /div div classstats idstats styledisplay:none div classstatdiv classnum idtotalFiles0/divdiv classlabel總文件數(shù)/div/div div classstatdiv classnum idreadyFiles0/divdiv classlabel可下載/div/div /div div classfile-list idfileList div classempty idemptyTips暫無文件請上傳后開始處理/div /div div classbatch-bar idbatchBar styledisplay:none button classbtn btn-primary iddownloadAllBtn 打包下載全部/button button classbtn btn-danger idclearBtn? 清空列表/button /div div classprogress-bar idprogressBar div classprogress-fill idprogressFill/div /div /div /div script class FileManager { constructor() { this.files []; this._dom(); this._events(); } _dom() { this.uploadBox document.getElementById(uploadBox); this.fileInput document.getElementById(fileInput); this.fileList document.getElementById(fileList); this.emptyTips document.getElementById(emptyTips); this.stats document.getElementById(stats); this.batchBar document.getElementById(batchBar); this.progressBar document.getElementById(progressBar); this.progressFill document.getElementById(progressFill); this.totalFiles document.getElementById(totalFiles); this.readyFiles document.getElementById(readyFiles); } _events() { // 點擊上傳 this.uploadBox.addEventListener(click, () this.fileInput.click()); this.fileInput.addEventListener(change, e this._handleFiles(e.target.files)); // 拖拽上傳 this.uploadBox.addEventListener(dragover, e { e.preventDefault(); this.uploadBox.classList.add(dragover) }); this.uploadBox.addEventListener(dragleave, () this.uploadBox.classList.remove(dragover)); this.uploadBox.addEventListener(drop, e { e.preventDefault(); this.uploadBox.classList.remove(dragover); this._handleFiles(e.dataTransfer.files) }); // 批量操作 document.getElementById(downloadAllBtn).addEventListener(click, () this._downloadAll()); document.getElementById(clearBtn).addEventListener(click, () this._clearAll()); } _handleFiles(fileList) { const arr Array.from(fileList); if (!arr.length) return; this._showProgress(); arr.forEach((file, i) { setTimeout(() { this._process(file); this._setProgress((i 1) / arr.length * 100); if (i arr.length - 1) setTimeout(() this._hideProgress(), 300); }, i * 120) }) } _process(file) { const orig file.name; const py this._toPinyin(orig); const item { id: Date.now() Math.random(), file, orig, pinyin: py, downloaded: false }; this.files.push(item); this._renderItem(item); this._updateStats(); } /* 關(guān)鍵每個漢字拼音首字母大寫其余小寫非漢字保留 */ _toPinyin(filename) { const ext filename.slice(filename.lastIndexOf(.)); const name filename.slice(0, filename.lastIndexOf(.)); // 1. 先拿到帶空格的拼音每個漢字一段 const pyArr pinyinPro.pinyin(name, { toneType: none, nonZh: consecutive, separator: }).split( ); // 2. 每段首字母大寫后再拼在一起 const py pyArr.map(s s.charAt(0).toUpperCase() s.slice(1).toLowerCase()).join(); return py ext; } _renderItem(item) { if (this.emptyTips.style.display ! none) this.emptyTips.style.display none; this.stats.style.display flex; this.batchBar.style.display flex; const div document.createElement(div); div.className file-item; div.innerHTML div classfile-info div classfile-icon/div div classname-box div classorig${item.orig}/div div classpinyin${item.pinyin}/div /div /div div classactions button classbtn btn-primary />