如何在不提交的情况下上传和读取文本/csv文件？

Question

我有这个表格，我想阅读上传的文件，然后使用此阅读信息填写表格，而无需刷新页面。

例如，第一个单词可能是“Bob”，所以我希望它出现在我的输入文本“First_name”中。我一直在尝试在线搜索使用 JQuery 或 Ajax 执行此操作的方法，但似乎找不到解决方案。

这可以使用前面提到的两种方法来完成吗？如果是这样，如果不是，有人可以指向我的链接或我可以学习如何执行此操作的地方吗？我发现的实例包括使用 JQuery 上传文件并在不刷新的情况下显示大小（这不是我想要的）。

我还发现了如何使用 iFrame 但这又不是我想要的。我想我总是可以提交包含文本文件相关信息的页面部分，并显示相同的表单，但包含已填写的信息。但是我觉得这有点草率，我想知道是否有更好的方法。

谢谢。

Answer 1

Firefox 有一种方法可以做到这一点，APIFile和FileListAPI 提供了一种方法来获取由文件输入元素选择的文件并具有文本检索方法。

一个非常基本的例子：

注意。并非所有浏览器都支持此代码。

[在撰写本文时，我认为 Chrome、Firefox 和 Opera 是这样。]

HTML：

<form>
    <input type="file" name="thefile" id="thefile" />
</form>

<div id="text"></div>

JS（使用 jQuery）：

$(document).ready(function() {
    $('#thefile').change(function(e) {
        if (e.target.files != undefined) {
            var reader = new FileReader();

            reader.onload = function(e) {
                $('#text').text(e.target.result);
            };

            reader.readAsText(e.target.files.item(0));
        }

        return false;
    });
});

演示：http : //jsfiddle.net/FSc8y/2/

如果所选文件是 CSV 文件，则可以直接在 javascript 中处理它。

.split() 在这种情况下，分割线和字段会很有用。

Answer 2

我知道的唯一方法是将表单提交到隐藏的 iframe。这将上传文件而不刷新页面。然后您可以使用 javascript 使用任何返回的信息。这就是他们用于伪造 ajax风格图像上传的方法，让您在上传之前预览图像。事实上，它已经通过隐藏的 iframe 上传。不幸的是，iframe 不兼容 xhtml 1.0。

\n

像这篇文章可能会有所帮助：\n http://djpate.com/2009/05/24/form-submit-via-hidden-iframe-aka-fake-ajax/

\n

\n

您可能会问的问题是：

\n

为什么我应该使用这个方法而不是真正的ajax？

\n

好吧，他们\xe2\x80\x99re 对此有很多答案，但有一个很好的理由\n 不需要任何类型的ajax 库，并且你可以开始使用它\n即使你以前从未使用过ajax。

\n

所以就这样了。

\n

<form method=\xe2\x80\x9dpost\xe2\x80\x9d action=\xe2\x80\x9dformProcess.php\xe2\x80\x9d target=\xe2\x80\x9dhiddenIFrame\xe2\x80\x9d>\n<input type=\xe2\x80\x9dtext\xe2\x80\x9d name=\xe2\x80\x9dtest\xe2\x80\x9d /> </form>

\n

<iframe style=\xe2\x80\x9dwidth:0px;height:0px;border:0px;\xe2\x80\x9d name=hiddenIFrame />

\n

这只是一个普通的表单，但您\xe2\x80\x99会注意到表单中的目标\n标记，这告诉表单在 iframe 中而不是在当前页面中提交\n。

\n

它\xe2\x80\x99s 的工作方式与 A 标记上的目标属性完全相同。

\n

此外，iframe 对用户隐藏\nstyle=\xe2\x80\x9dwidth:0px;height:0px;border:0px;\xe2\x80\x9d

\n

现在文件 formProcess.php 与您的正常表单\n处理文件没有什么不同，但如果您想在主页上执行某些操作，\n您必须\n使用这样的 JS ：

\n

window.parent.whatEverYouWannaDoInParentForm();

\n

您也可以使用此方法上传文件！

\n

请查看 formphp 以获取完整示例。

\n

干杯！

\n

注意：您会看到状态栏的行为就像页面正在重新加载，但\nit\xe2\x80\x99s 实际上没有。

\n

\n