проверить загруженный формат файла на стороне клиента

Question

Я создаю веб-портал, где конечный пользователь загрузит файл csv, и я сделаю некоторые манипуляции с этим файлом на стороне сервера (python). Существует некоторая латентность и отставание на стороне сервера, поэтому я не хочу отправлять сообщение от сервера к клиенту относительно плохого формата загруженного файла. Есть ли способ сделать тяжелую работу на стороне клиента, может использовать js или jquery, чтобы проверить, является ли загруженный файл «запятой» отделенной или нет и т. Д. И т. Д.?

Я знаю, что мы можем сделать «accept = .csv» в html, чтобы расширение файла имело формат csv, но как это сделать с содержанием.

Answer 1

Доступ к локальным файлам из Javascript возможен только с помощью Файлового API (https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications) - с помощью этого вы можете проверить содержимое, соответствует ли оно вашим ожиданиям или нет.

Answer 2

Вот несколько битов кода, которые я использовал для отображения клиента изображения предварительного просмотра при выборе файла. Вы должны использовать это как отправную точку, чтобы делать что-то еще с данными файла. Определение того, зависит ли ваш csv от вас.

Очевидное предостережение:
Вам по-прежнему необходимо проверить серверную сторону. Любой может изменить ваш javascript для вашего клиента, чтобы притвориться плохим файлом.

Еще один оговорка: Я уверен, что вы можете иметь скрытые символы запятой в действительном файле csv. Я думаю, что экранирующий символ может отличаться по некоторым реализациям тоже ...

// Fired when the user chooses a file in the OS dialog box 
// They will have clicked <input id="fileId" type="file"> 
document.getElementById('fileId').onchange = function (evt) { 
    if(!evt.target.files || evt.target.files.length === 0){ 
    console.log('No files selected'); 
    return; 
    } 
    var uploadTitle = evt2.target.files[0].name; 
    var uploadSize = evt2.target.files[0].size; 
    var uploadType = evt2.target.files[0].type; 

    // To manipulate the file you set a callback for the whole contents: 
    var FR = new FileReader(); 
    // I've only used this readAsDataURL which will encode the file like data:image/gif;base64,R0lGODl... 
    // I'm sure there's a similar call for plaintext 
    FR.readAsDataURL($('#file')[0].files[0]); 
    FR.onload = function(evt2){ 
    var evtData = { 
     filesEvent: evt, 
    } 
    var uploadData = evt2.result 
    console.log(uploadTitle, uploadSize, uploadType, uploadData); 
    } 
}