如何将文件从文件对话框发送到外部JS

How to send files from a file dialog to an external JS?

本文关键字:文件 外部 JS 对话框      更新时间:2023-09-26

所以我的问题是这样的:
1.我有一个html页面,它使用JQuery文件对话框,并要求用户上传CSV文件
2.我在一个外部js文件中有一个名为dialogCalled()的函数,名为chart_edit.js

我的代码的功能如下:
1.在文件对话框上成功上传文件后,单击"确定"按钮,我希望调用另一个对话框(我们称之为对话框2),该对话框显示用户上传的CSV数据转换为表格格式并显示在对话框2上。
2.因此,在下面给出的代码中,按下OK按钮后,我希望调用外部js文件中的dialogCalled()函数。但是,我无法将在文件对话框中选择的文件发送到外部js。我总是收到一个错误,说"未捕获引用:dialogCalled未定义"

我应该如何将文件对话框中的文件发送到外部js函数,或者有其他方法吗?

代码:
1.我的html文件中的文件对话框:

    $.FileDialog({multiple: false}).on('files.bs.filedialog', function(ev) {
          files = ev.files;
          if(files.length>1){
            alert('More than 1 file not allowed');
            }
            else { 
              var text = "";
              files.forEach(function(f) {
                  text += f.name + "<br/>";
              });
              $("#output").html(text);
              //DRAWING CHART AFTER CLICK OK
              $('#chartArea').empty();
              var apiData = new FormData();
              apiData.append( 'file', files[0]);
              $("#loading").show();
              $("#myModal").css("display","block");    
              dialogCalled(files);      
            }
            //.DRAWING CHART AFTER CLICK OK

        }).on('cancel.bs.filedialog', function(ev) {
            $("#output").html("Cancelled!");
        });
}

id"myModal"是包含dialog2的div。

  1. 存储在外部JS文件中的函数dialogCalled():

    function dialogCalled(object f){
    var files = f;
    d3.text(files, function(datasetText) {
    
        var parsedCSV = d3.csv.parseRows(datasetText);
        var tbl = d3.select(".modal1-body")
                    .append("table")
                    .attr("class","data-table")
                    .attr("id","data-table");
                // headers
                tbl.append("thead").append("tr")
                    .selectAll("th")
                    .data(parsedCSV[0])
                    .enter().append("th")
                    .attr("class",function(d,i){return "col"+(i+1);})
                    .attr("id",function(d,i){return i+1})
                    .text(function(d) {
                        return d+" ";
                    })
                    .append("input").attr("type","checkbox").attr("class","form-checkbox").attr("id",function(d,i){return "col" + (i+1)});
    
                // data
                tbl.append("tbody")
                    .selectAll("tr").data(parsedCSV.slice(1))
                    .enter().append("tr")
                    .attr("id",function(d,i){return "row"+(i+1);})
                    .selectAll("td")
                    .data(function(d){return d;})
                    .enter().append("td")
                    .text(function(d){return d;})
                    .attr("class",function(d,i){return "col" + (i+1)})
    
            });
    }
    

有人能帮帮我吗?

请检查Js文件的顺序

首先应该加载chart_edit.js,然后加载您编写代码的js。