Question

我在Excel中将Excel文件解析为数组，我有一个带有文件上传和复选框的简单表单。我正在调整其他地方的代码，它在文件上传时会立即按预期运行，但是我希望它在单击提交时处理文件，而不是在addEventListener上处理＆＃34;更改＆＃34;。我如何改变这个JavaScript / jQuery，使它以与现在相同的方式执行handleFile，但是在表单上提交点击。

我尝试过多种方法，比如

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>

JavaScript的：

$(document).ready(function() {
    setup();
});

function setup() {
    var oFileIn;

    $(function() {
        oFileIn = document.getElementById('fileid');
        if(oFileIn.addEventListener) {
            oFileIn.addEventListener('change', handleFile, false);
        }
    });

    var rABS = true;
    function handleFile(e) {
      var files = e.target.files, f = files[0];
      var reader = new FileReader();
      reader.onload = function(e) {
        var data = e.target.result;
        if(!rABS) data = new Uint8Array(data);
        var workbook = XLSX.read(data, {type: rABS ? 'binary' : 'array'});
        // DO STUFF WITH THE FILE HERE AND CHECK BOXES HERE

Answer 1

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

您的尝试已接近但由于我们可以使用文件输入的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);
    }
}

处理文件解析并上传表单提交

1 个答案: