lession07 2024-11-05 09:20 采纳率: 20%
浏览 2

PHP前端点击上传表格到后端读取，首次点击有效果，二次点击后不进入后端接口

PHP前端点击上传表格到后端读取，首次点击有效果，二次点击后不进入后端接口

  <a href="#" id="fileUpload" class="am-btn am-btn-success"><span class="am-icon-cloud-download"></span> 导入数据</a>
                    <form id="fileForm" action="<?= $label->url('Ticket-material-importMaterial'); ?>" method="post" enctype="multipart/form-data">
                        <input type="file" name="file" style="display:none;" onchange="uploadFile(this)">
                    </form>

// 引用
  document.getElementById('fileUpload').onclick = function(e) {
        console.log("000000")
        e.preventDefault();
        document.getElementById('fileForm').querySelector('input[type=file]').click();
        console.log("DIANJI")
    };

    function uploadFile(input) {
        console.log("aaaaa")
        var file = input.files[0];
        var formData = new FormData();
        console.log(file)
        formData.append('file', file);
      /*  $.ajax({
            url: '?g=Ticket&m=material&a=importMaterial',
            type: 'POST',
            data: formData,
            success: function(response){
                console.log(response);
            }
        });*/
        fetch('?g=Ticket&m=material&a=importMaterial', {
            method: 'POST',
            body: formData
        })
    }
  • 写回答

1条回答 默认 最新

  • 月下独码 Java领域新星创作者 2024-11-05 10:37
    关注

    本答案参考 多次询问 ChatGPT-3.5 后选择的最佳回答，若是满意，还请采纳，谢谢

    1. 问题分析
      • 首次点击有效而二次点击无效可能是由于多种原因。一种可能是表单或文件输入元素的状态没有正确重置，导致第二次点击时无法触发预期的行为。
      • 另一个可能是在JavaScript代码中存在逻辑错误，例如事件绑定问题或者变量状态在第一次操作后没有正确恢复。
    2. 解决方案
      • 重置表单
        • 在uploadFile函数成功上传文件后，添加代码来重置表单。这样可以确保下次点击时表单处于初始状态。
        • 修改uploadFile函数如下：
    function uploadFile(input) {
    console.log("aaaaa");
    var file = input.files[0];
    var formData = new FormData();
    console.log(file);
    formData.append('file', file);
    fetch('?g=Ticket&m=material&a=importMaterial', {
        method: 'POST',
        body: formData
    }).then(function(response) {
        return response.json();
    }).then(function(data) {
        console.log(data);
        // 重置表单
        document.getElementById('fileForm').reset();
    }).catch(function(error) {
        console.error('Error:', error);
    });
}
    • 检查事件绑定
      • 确保每次点击#fileUpload时，事件处理程序都能正确执行。目前代码中的事件绑定方式可能会存在一些潜在问题。可以考虑使用事件委托来绑定事件，以确保事件的一致性。
      • 例如，可以将点击事件绑定到一个父元素（假设存在一个父元素parentElement），并且在事件处理程序中检查点击的目标是否是#fileUpload：
        document.getElementById('parentElement').addEventListener('click', function(e) {
if (e.target && e.target.id === 'fileUpload') {
 console.log("000000");
 e.preventDefault();
 document.getElementById('fileForm').querySelector('input[type=file]').click();
 console.log("DIANJI");
}
});
    • 检查后端处理逻辑
      • 虽然问题看起来像是前端的交互问题，但也有可能是后端在处理第一次上传后处于某种状态，导致第二次上传请求被拒绝或者无法正确处理。检查后端代码中是否存在对同一资源（例如临时文件存储、数据库记录等）的重复处理限制。
      • 例如，如果后端在第一次上传后没有正确清理临时文件或者释放相关资源，可能会导致第二次上传失败。
    1. 完整代码示例（包含修改后的JavaScript部分）
    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF - 8">
    <title>File Upload</title>
</head>

<body>
    <a href="#" id="fileUpload" class="am - btn am - btn - success"><span class="am - icon - cloud - download"></span> 导入数据</a>
    <form id="fileForm" action="<?= $label->url('Ticket - material - importMaterial');?>" method="post" enctype="multipart/form - data">
        <input type="file" name="file" style="display:none;" onchange="uploadFile(this)">
    </form>
    <script>
        document.getElementById('parentElement').addEventListener('click', function (e) {
            if (e.target && e.target.id === 'fileUpload') {
                console.log("000000");
                e.preventDefault();
                document.getElementById('fileForm').querySelector('input[type=file]').click();
                console.log("DIANJI");
            }
        });


        function uploadFile(input) {
            console.log("aaaaa");
            var file = input.files[0];
            var formData = new FormData();
            console.log(file);
            formData.append('file', file);
            fetch('?g=Ticket&m=material&a=importMaterial', {
                method: 'POST',
                body: formData
            }).then(function (response) {
                return response.json();
            }).then(function (data) {
                console.log(data);
                document.getElementById('fileForm').reset();
            }).catch(function (error) {
                console.error('Error:', error);
            });
        }
    </script>
</body>

</html>

    请注意，上述代码中的<?= $label->url('Ticket - material - importMaterial');?>是PHP代码部分，在实际完整的环境中需要确保PHP部分正确生成有效的上传处理URL。并且parentElement需要替换为实际存在的包含#fileUpload元素的父元素的ID。

    评论

报告相同问题？

问题事件

  • 创建了问题 11月5日

悬赏问题

  • ¥100 需要跳转番茄畅听app的adb命令
  • ¥50 寻找一位有逆向游戏盾sdk 应用程序经验的技术
  • ¥15 请问有用MZmine处理 “Waters SYNAPT G2-Si QTOF质谱仪在MSE模式下采集的非靶向数据” 的分析教程吗
  • ¥50 opencv4nodejs 如何安装
  • ¥15 adb push异常 adb: error: 1409-byte write failed: Invalid argument
  • ¥15 nginx反向代理获取ip，java获取真实ip
  • ¥15 eda：门禁系统设计
  • ¥50 如何使用js去调用vscode-js-debugger的方法去调试网页
  • ¥15 376.1电表主站通信协议下发指令全被否认问题
  • ¥15 物体双站RCS和其组成阵列后的双站RCS关系验证