Question

我正在尝试使用handleFileSelect方法从用户指定的文件中读取一些内容，然后使用其内容来执行java操作。

handleFileSelect方法：

function handleFileSelect(evt) {
        var files = document.getElementById('files').files;
        if (!files.length) {
            alert('Please select a file!');
            return;
        }
        var file = files[0];
        var reader = new FileReader();
        reader.onloadend = function(evt) {
            if (evt.target.readyState == FileReader.DONE) {
                var text = evt.target.result;
                var lines = text.split(/[\r\n]+/g);
                document.getElementById('lines').value = lines;
            }
        };
        reader.readAsText(file,"UTF-8");
    }

如果我在var行之后发出警报，它确实显示文件中的内容是每行一个登录名（它在警报中显示为逗号分隔的字符串）。这告诉我，至少到目前为止，文件的读取是好的。

此外，如果您在Chrome中打开开发人员工具，我可以看到带有id行的隐藏元素设置为逗号分隔登录列表。甜。然而，现在，在我尝试使用以下jsp后，但它从未做任何事情：

<%
    if (request.getParameter("lines") != null) {
        String line = request.getParameter("lines");
        System.out.println("line: " + line);
        %>
            <script type="text/javascript">
                alert("line: here");
            </script>
        <%
    }
    %>

我猜它没有做任何事情，因为我没有包裹输入的表格。所以，我提出了一个表格：

<form method="post" id="ADD" name="ADD" action="">

现在，它命中了request.getParameter if..then部分，但隐藏的元素行为空。

我很困惑如何完成我需要做的事情。如果我使用表单，为什么隐藏的元素行为空？有什么其他方法可以将javascript var行放到我的java端吗？

handleFileSelector由windows.onload = init;

调用

function init() {
        if (window.File && window.FileReader && window.FileList && window.Blob) {
            if (window.requestFileSystem) {
                initFS();
                document.querySelector('.readButton').addEventListener('click',
                        function(evt) {
                            alert("Here in readbutton with " + evt.target.tagName.toLowerCase());
                            if (evt.target.tagName.toLowerCase() == 'input') {
                                handleFileSelect(evt);
                            }
                        }, false);
            }
        } else {
            alert('The File APIs are not fully supported in this browser.');
        }
}

如果我没有表单元素，但更改handleFileSelect（evt）以使用window.location.replace，我可以获取文件行，但这看起来很糟糕，因为文件可能很大。替换更改如下：

function handleFileSelect(evt) {
        var files = document.getElementById('files').files;
        if (!files.length) {
            alert('Please select a file!');
            return;
        }
        var file = files[0];
        var reader = new FileReader();
        reader.onloadend = function(evt) {
            if (evt.target.readyState == FileReader.DONE) {
                var text = evt.target.result;
                var lines = text.split(/[\r\n]+/g);
                //var form_lines = document.getElementById("lines");
                window.location.replace("adduserroles.jsp?lines="+lines.toString());
                //form_lines.value = lines.toString();
            }
        };
        reader.readAsText(file,"UTF-8");
    }

通过此更改，我按如下方式修改了jsp部分：

<%
    if(request.getParameter("lines") != null && !request.getParameter("lines").equals("")) {
        String[] lines = request.getParameter("lines").split(",");
        for (String line : lines) {

            System.out.println("line: " + line);
        }
        %>
        <script type="text/javascript">
            alert("line: here");
        </script>
        <%
    }

%>

我还将按钮更改为：

<tr>
            <td>
                <span class="readButton">
                    <p>
                        <input class="blue" type="submit" name="submitbtn" id="submitbtn" value="&nbsp;Submit&nbsp;" />
                    </p>
                </span>
            </td>
        </tr>

这显示了我想要的每一行信息。然后我可以继续做我正在计划的事情，但是再次看起来似乎是一种可怕的方式来通过传入的潜在巨大的链线来做到这一点我想在点击提交按钮后的默认GET。

Answer 1

好，

这是一个愚蠢的问题，耗费了大量时间。如果你使用

<button>

它默认为提交按钮，这导致了一个问题，因为handleFileSelect是异步进程，如果您使用的是小文件，它会在完成其工作之前离开该方法。就我而言，我的文件只有100行。这意味着它在行变量具有文件行之前完成了提交。解决方法是改变

<button> to <button type="button">.

我还在漫游中发现了一个更好的handleFileSelect，可以更好地报告错误：

function handleFileSelect(evt) {
        var files = document.getElementById('files').files;
        if (!files.length) {
            alert('Please select a file!');
            return;
        }
        var file = files[0];
        var reader = new FileReader();

        reader.onloadend = function(evt) {
            var contents = evt.target.result,
                error    = evt.target.error;

            if (error !== null) {
                switch (error.code) {
                    case error.ENCODING_ERR:
                        console.error("Encoding error!");
                        break;

                    case error.NOT_FOUND_ERR:
                        console.error("File not found!");
                        break;

                    case error.NOT_READABLE_ERR:
                        console.error("File could not be read!");
                        break;

                    case error.SECURITY_ERR:
                        console.error("Security issue with file!");
                        break;

                    default:
                        console.error("I have no idea what's wrong!");
                }
            } else {
                var mylines = contents.split(/[\r\n]+/g);
                document.getElementById('lines').value = mylines.toString();
                //window.location.replace("adduserroles.jsp?lines="+lines.toString());
            }
        };
        reader.readAsText(file,"UTF-8");
   }

Javascript到java并发布表单和隐藏元素

1 个答案: