Use HTML5 File Reader and send it to Leaflet Omnivore

问题

I'm using Leaflet JavaScript and following this tutorial:

https://www.html5rocks.com/en/tutorials/file/dndfiles/

I'm building a tool for my work. It allows the user to upload a CSV file with lat/long info and plot it on a map via Leaflet Omnivore.

I am able to get the html5 examples to work. But, when do I do with the data it reads in? Leaflet Omnivore requires the local path to the file being uploaded like this:

         var testCSV = omnivore.csv('path/to/file.csv').addTo(map).on('error', function(error) {
                                console.log(error);
                            });

As far as I know, that's not possible to get for security reasons.

Is there any other way to go about getting file path? Or am I going about this totally wrong?

回答1:

For the case where you do not need to retrieve your file remotely through an AJAX call (e.g. using omnivore.csv), but you already have the CSV content as string, you can directly use the omnivore.csv.parse function:

var layer = omnivore.csv.parse(csvStringContent).addTo(map);
// Executed synchronously, so no need to use the .on('ready') listener.
map.fitBounds(layer.getBounds());

Demo: https://jsfiddle.net/3v7hd2vx/358/

来源：https://stackoverflow.com/questions/45359618/use-html5-file-reader-and-send-it-to-leaflet-omnivore