文件上传后如何直接调用 JavaScript 函数处理 OCR 识别任务

作者：袖梨 2026-07-27

本文介绍如何优化 php 文件上传流程，避免冗余 ajax 请求，在服务端完成变量传递后直接触发前端 tesseract.js ocr 处理逻辑，确保异步函数按序执行且上下文可控。

本文介绍如何优化 php 文件上传流程，避免冗余 ajax 请求，在服务端完成变量传递后直接触发前端 tesseract.js ocr 处理逻辑，确保异步函数按序执行且上下文可控。

在实际开发中，常见误区是：先用 PHP 输出 <script>prepareforconvert(...)</script>，再由该 JS 函数发起一次额外的 AJAX POST 请求到 prepare.php——这不仅增加 HTTP 往返开销，更导致执行链断裂：prepare.php 中无法可靠控制 readFile() 的调用时机，且因缺少 DOM 环境和脚本加载上下文，<script> 标签内执行 readFile() 极易失败（如 Tesseract 未定义、document.getElementById 报错等）。

✅ 正确做法是：服务端直连、前端专注执行
即在 upload.php 成功保存文件后，直接 require 或 include prepare.php，让其在当前响应中输出必要的 HTML/JS，并确保 prepare.js 已提前加载、readFile() 在页面就绪后安全调用。

✅ 重构后的推荐结构

1. upload.php（精简逻辑，消除冗余 JS 调用）

<?php$target_dir = "uploads/";$target_file = $target_dir . basename($_FILES["uploadedFile"]["name"]);if (move_uploaded_file($_FILES["uploadedFile"]["tmp_name"], $target_file)) {    echo "File " . basename($_FILES["uploadedFile"]["name"]) . " uploaded successfully.<br>";    // 直接引入 prepare.php，传入 $target_file 作为上下文变量    $filename_js = addslashes($target_file); // 防止 JS 字符串注入    require "prepare.php";} else {    echo "Upload failed.";}?>

2. prepare.php（纯服务端逻辑 + 安全 JS 注入）

<script src="scripts/prepare.js"></script><script>// 确保 DOM 加载完成后执行，避免 getElementById 失败document.addEventListener('DOMContentLoaded', function() {    // 将 PHP 变量安全注入 JS 字符串    const fileName = <?php echo json_encode($target_file); ?>;    if (fileName && typeof readFile === 'function') {        readFile(fileName)            .then(result => {                console.log('OCR completed:', result);                return parseDataFromTextAndPropertyNames(result.data.text, ['نقطة الخدمة', 'رقم العداد']);            })            .then(data => {                document.getElementById("dvjson").innerHTML = JSON.stringify(data, undefined, 4);                constructTable('#table', [data]);                $("#table").excelexportjs({                    containerid: "table",                    datatype: 'table',                    dataset: data,                    columns: getColumns(data)                });                return writeParsedTextDataAsJSON('output.json', data);            })            .catch(err => console.error('Pipeline error:', err));    }});</script><div id="dvjson"></div><table id="table"></table>

⚠️ 关键注意事项：

立即学习“Java免费学习笔记（深入）”；

永远使用 json_encode() 向 JS 注入 PHP 变量（而非字符串拼接），避免 XSS 和语法错误；

readFile() 等异步函数必须在 DOMContentLoaded 或 window.onload 后调用，确保 DOM 元素存在；

prepare.js 必须通过 <script src> 提前加载（放在 </head> 或 <body> 开头），不可延迟动态插入；

Tesseract.recognize() 需要浏览器环境支持 WebAssembly，确保部署在 HTTPS 或 localhost，否则会静默失败。