本文介绍如何优化 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 注入）
Java项目代码review工具。分析Git变更+完整调用链路上下文，推断业务需求，进行多维度评分和分类汇总，生成完整PRD文档。包含细粒度Java代码审查清单（Null安全、异常处理、Streams、并发、equals/hashCode、资源管理、API设计、性能、MyBatis/ORM、事务边界、SQL/DD...
<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，否则会静默失败。
✅ 总结：为什么这样更健壮？
- 零额外请求：省去一次 AJAX round-trip，提升响应速度与可靠性；
- 上下文统一：readFile() 在完整 HTML 页面中执行，可访问 DOM、全局变量及已加载库；
- 错误可追踪：所有异步链路（OCR → 解析 → 渲染 → 导出）在前端集中捕获 catch，便于调试；
- 安全合规：json_encode() 防止脚本注入，addEventListener 保证执行时序。
最终，你获得的是一条清晰、可控、可维护的 OCR 处理流水线：上传 → 服务端确认 → 前端自动识别 → 结构化提取 → 可视化展示 → 导出下载。
