Javascript 处理表单提交时的文件解析和上载_Javascript_Jquery_Html_Excel

Javascript 处理表单提交时的文件解析和上载

javascript jquery html excel

Javascript 处理表单提交时的文件解析和上载,javascript,jquery,html,excel,Javascript,Jquery,Html,Excel,我正在用JavaScript将一个Excel文件解析为一个数组，我有一个带有文件上传和复选框的简单表单。我正在修改来自其他地方的代码，它在文件上传时会像预期的那样立即完美运行，但我希望它在单击提交时处理文件，而不是在addEventListener上进行“更改”。如何更改此JavaScript/jQuery，使其以与现在相同的方式执行handleFile，但在表单submit click上我尝试了多种方法，比如 document.getElementById('submit').addEven

我正在用JavaScript将一个Excel文件解析为一个数组，我有一个带有文件上传和复选框的简单表单。我正在修改来自其他地方的代码，它在文件上传时会像预期的那样立即完美运行，但我希望它在单击提交时处理文件，而不是在addEventListener上进行“更改”。如何更改此JavaScript/jQuery，使其以与现在相同的方式执行handleFile，但在表单submit click上

我尝试了多种方法，比如

document.getElementById('submit').addEventListener("click", handleFile(oFileIn));

并将设置下的所有内容封装在：

$('#submit').click(function(){ 
    var oFileIn; ...
});

HTML:

<html>
    <head> 
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.12.6/xlsx.full.min.js"></script>
    </head>
    <body>
        <form id="formid" action="form.php" method="POST" enctype="multipart/form-data">
          <label><input id="inputX1" type="checkbox" name="x1" value="x1">x1</label><br>
          <label><input id="inputX2" type="checkbox" name="x2" value="x2">x2</label><br>
          <label><input id="inputX3" type="checkbox" name="x3" value="x3">x3</label><br>
          <label><input id="inputX4" type="checkbox" name="x4" value="x4">x4</label><br>
          <input id="fileid" type="file" name="filename" />
          <input id="submit" type="button" value="submit"/> 
        </form>
    </body> 
</html>

因此，如果只想在按钮上加载数据，那么真正需要做的就是在按钮上放置一个单击侦听器，而不是在文件输入上放置一个更改事件

您的尝试已接近成功，但由于我们可以使用文件输入的ID，因此无需将任何内容传递到

handleFile（）

在我们继续阅读之前，我还做了一个检查，以确保文件确实存在

下面是一个使用jQuery的示例

function setup() {
    $("#submit").on("click", handleFile);

    var rABS = true;
    function handleFile() {
        var files = $("#fileid").prop("files");
        if(files.length === 0){
            alert("Please select a file first");
            return;
        }
        var f = files[0];
        var reader = new FileReader();
        reader.onload = function(e) {
            var data = e.target.result;
            //continue on with data
        }
        reader.readAsText(f);
    }
}

您希望将文件提交到某种服务器吗？您希望在提交表单时发生什么情况？这通常意味着向服务器发送请求，然后将用户发送到另一个页面。您的意思是只希望文件操作在单击按钮时发生，而不一定是提交操作吗？在提交作为文本文件下载的数组时，也可以正常工作。它可以在任何按钮点击，不必特别提交。

function setup() {
    $("#submit").on("click", handleFile);

    var rABS = true;
    function handleFile() {
        var files = $("#fileid").prop("files");
        if(files.length === 0){
            alert("Please select a file first");
            return;
        }
        var f = files[0];
        var reader = new FileReader();
        reader.onload = function(e) {
            var data = e.target.result;
            //continue on with data
        }
        reader.readAsText(f);
    }
}