发布于2026-07-15 阅读(0)
扫一扫,手机访问
本文介绍如何优化 php 文件上传流程,避免冗余 ajax 请求,在服务端完成变量传递后直接触发前端 tesseract.js ocr 处理逻辑,确保异步函数按序执行且上下文可控。
在实际开发中,不少开发者会把整个流程拆得过于复杂——先在 PHP 里直接输出一段 ,再由这个 JS 函数发起一次额外的 AJAX POST 请求到 prepare.php。这么做不仅白白增加了一次 HTTP 往返,更严重的问题是执行链断了:prepare.php 里根本没法可靠控制 readFile() 的调用时机,而且由于缺少 DOM 环境和脚本加载上下文,直接在 标签里执行 readFile() 大概率会翻车——Tesseract 还没加载、document.getElementById 报错,各种问题接踵而至。
那正确解法是什么?一句话:服务端负责传递变量,前端专心执行逻辑。具体来说,在 upload.php 成功保存文件后,直接 require 或 include 引入 prepare.php,让它在当前响应中输出必要的 HTML 和 JS,同时确保 prepare.js 已经提前加载到位,readFile() 在页面就绪后安全调用。这样既不用额外发请求,又能保证上下文完整。
1. upload.php(精简逻辑,消除冗余 JS 调用)
";
// 直接引入 prepare.php,传入 $target_file 作为上下文变量
$filename_js = addslashes($target_file); // 防止 JS 字符串注入
require "prepare.php";
} else {
echo "Upload failed.";
}
?>
2. prepare.php(纯服务端逻辑 + 安全 JS 注入)
⚠️ 关键注意事项:
- 永远使用 json_encode() 向 JS 注入 PHP 变量(而非字符串拼接),避免 XSS 和语法错误;
- readFile() 等异步函数必须在 DOMContentLoaded 或 window.onload 后调用,确保 DOM 元素存在;
- prepare.js 必须通过