JavaScript中导入库的未定义函数

Question

I'm parsing a CSV file into arrays and using jquery.csv to do the grunt work. My script reads:

<script>
$(document).ready(function() {

// The event listener for the file upload
document.getElementById('txtFileUpload').addEventListener('change', upload, false);

// Method that checks that the browser supports the HTML5 File API
function browserSupportFileUpload() {
  var isCompatible = false;
  if (window.File && window.FileReader && window.FileList && window.Blob) {
    isCompatible = true;
  }
  return isCompatible;
}

// Method that reads and processes the selected file
function upload(evt) {
  if (!browserSupportFileUpload()) {
    alert('The File APIs are not fully supported in this browser!');
  } else {
    var data = null;
    var file = evt.target.files[0];
    var reader = new FileReader();
    reader.readAsText(file);
    reader.onload = function(event) {
      var csvData = event.target.result;
      data = $.csv.toArrays(csvData);
      if (data && data.length > 0) {
        alert('Imported -' + data.length + '- rows successfully!');
      } else {
        alert('No data to import!');
      }
    };
    reader.onerror = function() {
      alert('Unable to read ' + file.fileName);
    };
  }
}
});

My console reads that there is an "Uncaught TypeError: Cannot read property 'toArrays' of undefined". Also in the head section, I imported the library using <script src="jquery.csv-0.71.js"></script> , the JS file residing in the same folder. Any ideas why this error is occurring? Have I imported the library incorrectly, do I need to initialize something? Thanks!

Answer 1

Make sure you're importing jquery.csv-0.71.js after importing jQuery and that your script is running after both.

<script src="jquery.js"></script>
<script src="jquery-csv.js"></script>
<script>/* Your script */</script>