Question

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

例如，第一个单词可能是“Bob”，因此我希望将其输入我的输入文本“First_name”。我一直在尝试使用JQuery或Ajax在线搜索，但我似乎无法找到解决方案。

可以使用前面提到的两种方法完成吗？如果是这样，如果没有，有人可以指向我链接或我可以学习如何做到这一点？我找到的实例包括使用JQuery上传文件并显示大小而不刷新（这不是我想要的）。

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

感谢。

Answer 1

Firefox有一种方法可以执行此操作，File和FileList API提供了一种获取文件输入元素所选文件并使用文本检索方法的方法。

一个非常基本的例子：

<强> NB。并非所有浏览器都支持此代码。

[我认为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上传。不幸的是，iframes不符合xhtml 1.0。

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

如何上传和阅读text / csv文件而不提交？

2 个答案: