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

＆＃34;请详细说明将文件上传到服务器的Ajax方法并回应它，因为这是我正在看的，所以我不会导致任何安全问题。＆＃34; -user428747

给出.csv文件，例如来自Wikipedia - Comma-separated values - Example

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/

另见How to get attachment file content with jQuery

Answer 2

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

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

您可以从头开始构建（DIY）或使用filepicker.io之类的解决方案为您做到这一点。

Reading local files

所以你可以调用filepicker.read（）并直接获取文件的内容。在较新的浏览器中，我们包装HTML5文件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只是我为实际服务器端端点编写的虚拟名称。请用合适的替换它。

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();

请注意（取自here）：

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

IE 10+有FileReader。

使用JavaScript for IE本地读取CSV文件而不使用FileReader API

3 个答案: