Загрузка нескольких файлов с проверкой размера без отправки на сервер

@wladim · Регистрация: 03.09.2013

Студворк — интернет-сервис помощи студентам

Здравствуйте
Нашел такой код:

HTML5
1
2
3
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
<input id="my_file" type="file" name="upfile" />

PHP
1
2
$post_max_size = 2; // In Mb
$maxInByte = $post_max_size * 1048576; // в байтах

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
<script>
    // https://sweetalert.js.org/guides/
    // https://sweetalert.js.org/guides/
    // https://stackoverflow.com/questions/3717793/javascript-file-upload-size-validation
    // https://**********************/questions/468741/Как-проверить-размер-и-расширение-файла-до-загрузки-на-сервер
    $("#my_file").on("change", function(){
        var file = this.files[0];
        $fileSize = file.size;
        if (file.size > <?= $maxInByte ?>) {
            swal("Размер файла превышает установленный лимит", "файл не будет загружен");
        }
    });
</script>

Как сделать проверку если несколько файлов?:

HTML5
1
2
3
<input id="my_file" type="file" name="upfile" />
<input id="my_file" type="file" name="upfile" />
<input id="my_file" type="file" name="upfile" />

@server_net · 05.08.2019, 19:01

Сообщение от wladim

<?= $maxInByte ?>

Зачем вам проверять внутри js файл, если вы будете его все ровно отправлять асинхроно на сторону сервера???
Нужно создать цикл и в цикле проверить, но в подобных ситуациях на сторону сервера отправляется массив файлов и там же они и проверяются.

@wladim · 05.08.2019, 19:58 **[ТС]**

Сообщение от server_net

но в подобных ситуациях на сторону сервера отправляется массив файлов и там же они и проверяются

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

@server_net · 06.08.2019, 13:01

Сообщение от wladim

ДО загрузки

вы можете всего лишь узнать размер, узнать ширину и высоту, и использовать их в конструкции чтобы проверить.

Сообщение от wladim

что файл не будет загружен

Это только на стороне сервера, так как файл хранится на стороне сервера и чтобы узнать загружен файл или нет в PHP используется is_uploaded_file()

@Mr_Sergo · 06.08.2019, 14:21

Сообщение от wladim

чтобы пользователь ДО загрузки какого-либо из полей файла знал, что файл не будет загружен

https://codepen.io/Mr_Sergo/pe... itors=1010

HTML5
1
<input type="file" name="files[]" multiple>

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
let input = document.querySelector('[name="files[]"]');
input.addEventListener('change',()=> {
    let err = 0;
    [...input.files].forEach(currentFile => {
        if( (currentFile.size/1024).toFixed() > 1024 ){     // если размер текущего файла больше 1мб (1024кб)
            alert(`Файл ${currentFile.name} больше 1мб`);   // то вывести на экран имя файла
            err++;  // плюсуем единицу в переменную
        }
    });
    if(!err){   // если переменная равна нулю
        alert(`Все ОК - грузим на сервер`);  // грузим файлы на сервер
    }
});

@wladim · 06.08.2019, 23:37 **[ТС]**

Mr_Sergo, спасибо, уже ближе
я встречал где-то решение с "multiple", но отказался от него, т.к.:
пользователи в возрасте далеко не все понимают принцип загрузки и выделения нескольких файлов, поэтому и хотелось бы, чтобы пользователь видел не одно поле, а к примеру, два-три - это и визуально удобнее для них
многие встречаются такие, вот именно и для них
может, добъем тему?

Сообщение от server_net

в PHP используется is_uploaded_file()

спасибо за участие. Это понятно, что на сервере- вопросов/возражений нет.

Сообщение от server_net

вы можете всего лишь узнать размер

- это как раз то что и нужно. Нормальный пользователь отреагирует на сообщение до загрузки.
Копался конечно еще с File API, но все равно возвращаюсь в JS с той же проблемой.

@Mr_Sergo · 07.08.2019, 00:18

Сообщение от wladim

может, добъем тему?

добьем, чуть позже покажу пример

Добавлено через 36 минут
wladim,
Как-то так можно -> https://codepen.io/Mr_Sergo/pen/RXQpEG

HTML5
1
2
3
4
5
<input type="file" class="upfile" /><br><br>
<input type="file" class="upfile" /><br><br>
<input type="file" class="upfile" /><br><br><br>
 
<button class="submit">Отправить файлы</button>

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
let upfile = document.querySelectorAll('.upfile');
 
document.querySelector('.submit').addEventListener('click',()=> {
    [...upfile].forEach(e => {
        if(e.value && (e.files[0].size/1024).toFixed() > 1024){
            alert(`Файл ${e.files[0].name} больше 1мб`);
        }
    });
    if(confirm(`Загрузить остальные файлы на сервер?`)){
        [...upfile].forEach(e => {
            if(e.value && (e.files[0].size/1024).toFixed() <= 1024){
                alert(`Файл ${e.files[0].name} успешно отправлен`);
            }
        });
    }
});

@wladim · 07.08.2019, 19:55 **[ТС]**

Mr_Sergo, Спасибо дружище. То что нужно.

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .	SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .

@wladim 4 / 3 / 2 Регистрация: 03.09.2013 Сообщений: 141
	07.08.2019, 19:55 [ТС]
	Mr_Sergo, Спасибо дружище. То что нужно. 0

Загрузка нескольких файлов с проверкой размера без отправки на сервер

Решение