Вход

Просмотр полной версии : Chrome не показывает тип файла .zip


Sigizmund2012
14.10.2015, 17:30
Начал писать заготовку скрипта для загрузки, выгрузки и удаления файлов .zip и столкнулся с багом: Хром не пишет в объект загружаемого файла его тип:

<h1>Upload or get or delete file</h1>

<form action="" id="file-upload" enctype="multipart/form-data" >
<input id="file" type="file">
<input type="submit" value="Send">
</form>
<button id="get">Get file</button><button id="delete">Delete file</button>
<script>
var form = document.getElementById('file-upload');
var file = document.getElementById('file');
var getFile = document.getElementById('get');
var deleteFile = document.getElementById('delete');
form.onsubmit = function( e ){
e.preventDefault();
var newFile = file.files[0];
console.log(newFile);
console.log(newFile.type);
var formData = new FormData();
}
</script>

Второй вывод в консоли даёт "application/zip" в Мозилле и пустую строку в Хроме. Получается, я не могу кроссбраузерно проверить тип файла .zip на клиенте. Кто-нибудь с этим сталкивался, и если да, то как решили? Можно конечно на сервер грузить всё подряд и там проверять, но на клиенте тоже хочется уведомить пользователя о неверном формате. Как вариант свойство name смотреть.

Decode
15.10.2015, 00:49
Получается, я не могу кроссбраузерно проверить тип файла .zip на клиенте.

Дак и не надо это делать. Попробуй .zip переименовать в .png. И у тебя свойство type будет выводить "image/png", что не верно.

Sigizmund2012
15.10.2015, 11:32
Decode,
Это понятно, защита не от злоумышленника, а от пользователя, загрузившего файл с неверным расширением. Сейчас код выглядит так:

<h1>Upload or get or delete file</h1>

<form action="" id="file-upload" enctype="multipart/form-data" >
<input id="file" type="file">
<input type="submit" value="Send">
</form>
<button id="get">Get file</button><button id="delete">Delete file</button>
<div id="message"></div>
<script>
var form = document.getElementById('file-upload');
var file = document.getElementById('file');
var getFile = document.getElementById('get');
var deleteFile = document.getElementById('delete');
var message = document.getElementById('message');
form.onsubmit = function( e ){
var newFile = file.files[0];
var formData = new FormData();
var xhr = new XMLHttpRequest();

message.innerHTML = '';
e.preventDefault();

if (!newFile.name.match('.zip')) {
message.innerHTML = 'Please, upload only ZIP files!';
return;
}

formData.append('zipfile', newFile);
xhr.open('POST', '/path/', true);
xhr.onload = function () {
if (xhr.status === 200) {
message.innerHTML = 'Uploaded!';
} else {
message.innerHTML = 'Error, please try later';
}
};
xhr.send(formData);
};
</script>