Разница в js и jQuery в плане чтения файлов

210

29 марта 2018, 07:55

Добрый день, пишу функцию для чтения файлов и пытаюсь сделать это через jQuery. Сам вопрос довольно шаткий и странный, но я не сдаюсь и нашел алгоритм наиболее подходящий для моей задачи. Однако есть одна проблема, которая заключается в ошибке. Прошу объясните мне в чем тут дело.

Если изменить строчку с

readFile(document.getElementById('file'));

На тоже самое только jQuery

readFile(($'#file'));

То выдает следующую ошибку

script.js:154 Uncaught TypeError: Cannot read property '0' of undefined

function readFile(object) { 
  var file = object.files[0] 
  var reader = new FileReader() 
  reader.onload = function() { 
    rawData = JSON.parse(reader.result); 
  } 
  reader.readAsText(file) 
  $('svg').remove(); 
} 
 
$('#file').change(function () { 
   readFile(document.getElementById('file'));  
}); 
 
 
// общая функция которая при нажатии на кнопку вызывает остальные функции 
 
$('.chart1').click(function () { 
    $('svg').remove(); 
    readFile(document.getElementById('file')); 
    console.log(rawData); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<input type="file" id="file"> 
<button class="chart1">Read!</button>

Answer 1

document.getElementById('file') возвращает HTML DOM Object.

$('#file') возвращает jQuery Object.

Думаю, надо readFile($('#file')[0]);

Answer 2

Для начала, запись

readFile(($'#file'));

содержит синтаксическую ошибку. Наверное, подразумевалось такое

readFile($('#file'));

Ну а дальше все просто. Функция readFile() ожидает в качестве параметра элемент DOM. А функция $() возвращает набор jQuery. Это совершенно различные объекты.

Для получения конкретного объекта DOM из набора существует метод get()