在没有FileReader API的情况下，使用IE的JavaScript在本地读取CSV文件

Question

我正在尝试在客户端上读取CSV文件，我的代码在具有FileAPI的现代浏览器上可以正常工作，但是我需要找出一种支持IE8和IE9的方法。 任何帮助表示赞赏。

使用的上传控件：

<input type="file" id ="uplaodFile"/>

JS：对于Firefox：

var reader = new FileReader();
./.......
 reader.readAsText(e.target.files.item(0));

对于IE：?????

Answer 1

“您能否详细说明将文件上传到服务器并回显它的Ajax方法，因为这就是我正在查看的内容，因此不会引起任何安全问题。” -user428747

给定一个.csv文件，例如，来自Wikipedia的逗号分隔值-示例

CSV

Year,Make,Model,Description,Price
1997,Ford,E350,"ac, abs, moon",3000.00
1999,Chevy,"Venture ""Extended Edition""","",4900.00
1999,Chevy,"Venture ""Extended Edition, Very Large""",,5000.00
1996,Jeep,Grand Cherokee,"MUST SELL!
air, moon roof, loaded",4799.00

html

<pre></pre>

js

$(function () {
    var url = "file.csv";

    $.getJSON("https://query.yahooapis.com/v1/public/yql?q=select" 
      + "* from csv where url='" + url + "?'" 
      + "&format=json&diagnostics=true&callback=?")
    .then(function (data, textStatus, jqxhr) {
        var arr = [];
        var len = data.query.count;
        $.each(data.query.results.row, function (k, v) {
            $.map(v, function (val) {
                if (val === null) {
                    val = '""';
                };
                arr.push(val)
            });    
        });

        var rebuild_csv = function () {
            $.when(
              $("pre")
              .append(
                arr.splice(0, len).join(",") + "\r\n"))
            .done(function () {
                if (arr.length) {
                    rebuild_csv()
                };
            });
        };
        rebuild_csv();

    }, function (jqxhr, textStatus, errorThrown) {
        console.log(textStatus, errorThrown)
    });
});

jsfiddle http://jsfiddle.net/guest271314/2oLmxb0g/

另请参见，以及如何使用jQuery获取附件文件的内容

Answer 2

没有FileReader API支持，您将无法在本地读取文件。 您必须按照@Donal的建议使用Activex脚本，或者使用基于Flash / Java的解决方案，这些解决方案都有自己的问题。

或者，您可以切换到基于服务器端的解决方案。 服务器端解决方案包括将文件发布到服务器端API，然后该服务器端API可以解析文件并发回内容。 您可以使用基于AJAX / iFrame的方法将其包装起来，以使其在幕后发生而用户无需注意。

您可以从头开始（DIY）构建它，也可以使用filepicker.io之类的解决方案为您完成。

读取本地文件

因此您可以调用filepicker.read（）并直接获取文件的内容。 在较新的浏览器中，我们包装了HTML5 File API，但在IE8中，我们并不是那么幸运。

相反，我们让服务器读取文件并以可读格式将其发送回去。 我们使用上面的过程将文件发送到我们的服务器。 iframe，新表格等。 然后，让服务器读取内容，如果需要，将其转换为base64，然后将其发送回客户端。

DIY版本：

// grab your file object from a file input
$('#fileInput').change(function () {
  uploadFile(this.files[0]);
});

function uploadFile(file) {
  $.ajax({
    type: 'post',
    url: '/csvProcessorUrl?file=' + file.fileName,
    data: file,
    processData: false,
    contentType: 'text/csv'
  })
  .done(function(csvData) {
      // process csv data
  });
}

注意： csvProcessorUrl只是我为实际服务器csvProcessorUrl点组成的虚拟名称。 一定要用合适的替换它。

Answer 3

您可以使用第三方库，例如： http : //blog.filepicker.io/post/33906205133/hacking-a-file-api-onto-ie8

如果不是使用IE8，IE9，则必须使用： ActiveXObject("Scripting.FileSystemObject");

例如：

var fso = new ActiveXObject("Scripting.FileSystemObject");

f = fso.OpenTextFile("c:\\foobar.txt", 1);

while (!f.AtEndOfStream)
{
    var line = f.ReadLine();
    // do stuff
}

f.Close();

请注意（从此处获取 ）：

ActiveX对象可能会出现安全问题。 若要使用ActiveXObject，您可能需要在Internet Explorer中调整相关安全区域的安全设置。 例如，对于本地Intranet区域，通常需要将自定义设置更改为“初始化并标记未标记为安全脚本编写的ActiveX控件并对其编写脚本”。

IE 10+具有FileReader 。