Автоматическая загрузка файлов на сервер

@s88s · Регистрация: 23.01.2015

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

Доброго времени суток!

Подскажите как можно реализовать автоматическую загрузку файлов на сервер.
Я нашел вот такой вариант

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<script type="text/javascript">
$(function(){
var btnUpload=$('#upload');
var status=$('#status');
new AjaxUpload(btnUpload, {
action: 'upload-file.php',
name: 'uploadfile',
onSubmit: function(file, ext){
if (! (ext && /^(jpg|png|jpeg|gif)$/.test(ext))){ 
// extension is not allowed 
status.text('Поддерживаемые форматы JPG, PNG или GIF');
return false;
}
status.text('Загрузка...');
},
onComplete: function(file, response){
//On completion clear the status
status.text('');
//Add uploaded file to list
if(response==="success"){
$('<li></li>').appendTo('#files').html('<img src="./uploads/'+file+'" alt="" /><br />'+file).addClass('success');
} else{
$('<li></li>').appendTo('#files').text(file).addClass('error');
}
}
}); 
});
</script>

PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<?php
$uploaddir = './uploads/'; 
$file = $uploaddir.basename($_FILES['uploadfile']['name']); 
 
$ext = substr($_FILES['uploadfile']['name'],strpos($_FILES['uploadfile']['name'],
'.'),strlen($_FILES['uploadfile']['name'])-1); 
$filetypes = array('.jpg','.gif','.bmp','.png','.JPG','.BMP','.GIF','.PNG','.jpeg','.JPEG');
 
if(!in_array($ext,$filetypes)){
echo "<p>Данный формат файлов не поддерживается</p>";
}
else{ 
if (move_uploaded_file($_FILES['uploadfile']['tmp_name'], $file)) { 
echo "success"; 
} else {
echo "error";
}
}
?>

HTML5
1
2
3
4
5
6
<div id="mainbody">
<!-- Upload Button, use any id you wish-->
<div id="upload"><span>Выбрать файл<span></div><span id="status"></span>
 
<ul id="files"></ul>
</div>

Вот только не могу понять как возможно ограничить по максимальному размеру по МБ и как проверить безопасен ли вообще файл. Мне нужно загрузить на сервак изображения и музыку в формате mp3 ... вот как проверить что именно изображение или mp3 загружается а не что то другое?

Перерыл много сайтов так ответа и не нашел на свой вопрос =(

@andyj · 05.01.2019, 02:39

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

... вот как проверить что именно изображение или mp3 загружается а не что то другое?

Скорее всего никак. Логично что вы должны "пропарсить" файл на стороне клиента. Если mp3, то теоретически его можно загрузить в скрытый медиаплеер (долго если большой файл) и получить из него характеристики (битность/качество и длину трека). То-же с картинкой - можно попробовать загрузить в скрытый <img> и дождаться успешной загрузки методами js (возможно получите ошибку если не картинка). Встречал более сложные методы, основанные на "редакторах" звука/фото. Там файл буквально разбирают по пикселам и частотным всплескам...

@s88s · 05.01.2019, 02:42 **[ТС]**

а как сделать ограничение по размеру файла?

@andyj · 05.01.2019, 02:48

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

а как сделать ограничение по размеру файла?

учитесь гуглить! "input file size limit"

Попробуйте это: https://stackoverflow.com/ques... html-input

вроде разумный пример:

JavaScript
1
2
3
4
5
6
7
8
var uploadField = document.getElementById("file");
 
uploadField.onchange = function() {
    if(this.files[0].size > 2097152){
       alert("File is too big!");
       this.value = "";
    };
};

Сам этим не занимался, но когда-то тоже задумывался как ограничивать типы отправляемых файлов (zip). Проще оказалось сделать это средствами сервера.

@s88s · 05.01.2019, 02:55 **[ТС]**

Этот вариант да я видел но он если используется
<input type="file" id="file">

У меня же кнопкой используется

<div id="upload"><span>Выбрать файл<span></div>

Как в этом случае быть ... пробовал прикрутить не получилось =(

@andyj · 05.01.2019, 03:00

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

Как в этом случае быть ... пробовал прикрутить не получилось

а твой код на сервер отправляет хоть что-нибудь? (или только "холостой выбор" работает?)
(я ДАВНО не загружал файлы, просто тема "зацепила" необоходимостью проверки - когда-то кучу часов убил на гугл)

По сути, когда выбираешь файл/ы, то он/они грузятся в особую input-переменную и отправляются при submit (или имитацию). Вот на изменение этого input и надо вешать js-обработчик.

@s88s · 05.01.2019, 03:03 **[ТС]**

Да всё загружается и даже в БД записи делает для вывода на экран ... вот только проверок нет и мне это не нравится =( а они нужны

@andyj · 05.01.2019, 03:13

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

AjaxUpload

все у вас есть! просто вы пользуетесь ЧУЖИМ модулем не понимая его теории... (без input html ПРИНЦИПИАЛЬНО не может выбрать и отправить файл)
(предположу) https://gist.github.com/harpreetsi/3369391
в момент нажатия кнопки модуль создает input

JavaScript
1
2
3
4
_createInput: function(){ 
            var self = this;
                        
            var input = document.createElement("input");

делает все что нужно для отправки и потом его удаляет.
решения 2:
1) выдрать из этого модуля только то что вам нужно и встроить в него ваши проверки
2) изучить модуль и надеяться что в него можно вмешаться так чтобы встроить необходимые проверки!
(дальше сами)

@Fedor Vlasenko · 05.01.2019, 04:17

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

без input html ПРИНЦИПИАЛЬНО не может выбрать и отправить файл

js позволяет создавать файлы налету data, blob
файлы можно засунуть затем в FormData
Drag and Drop позволяет так-же обойтись без input
привожу эти строки, чтобы убрать "ПРИНЦИПИАЛЬНО" так как выбрать и кинуть это уже противоречит вашим утверждениям

Для Т.С. небольшой пример для демонстрации ограничений при выборе файлов
Не забываем делать проверку и на сервере. Так как обойти ее можно легко на клиенте

@s88s · 05.01.2019, 12:52 **[ТС]**

в примере тоже используется input

буду дальше разбираться со своим вопросом.

с JS не дружу пока что ...

Новые блоги и статьи Все статьи Все блоги /
PhpStorm 2025.3: WSL Terminal всегда стартует в ~ and_y87 14.12.2025 PhpStorm 2025. 3: WSL Terminal всегда стартует в ~ (home), игнорируя директорию проекта Симптом: После обновления до PhpStorm 2025. 3 встроенный терминал WSL открывается в домашней директории. . .	Access VikBal 11.12.2025 Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.	Новый ноутбук volvo 07.12.2025 Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro	Музыка, написанная Искусственным Интеллектом volvo 04.12.2025 Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .	От async/await к виртуальным потокам в Python IndentationError 23.11.2025 Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .
Поиск "дружественных имён" СОМ портов Argus19 22.11.2025 Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .	Сколько Государство потратило денег на меня, обеспечивая инсулином. Programma_Boinc 20.11.2025 Сколько Государство потратило денег на меня, обеспечивая инсулином. Вот решила сделать интересный приблизительный подсчет, сколько государство потратило на меня денег на покупку инсулинов. . . .	Ломающие изменения в C#.NStar Alpha Etyuhibosecyu 20.11.2025 Уже можно не только тестировать, но и пользоваться C#. NStar - писать оконные приложения, содержащие надписи, кнопки, текстовые поля и даже изображения, например, моя игра "Три в ряд" написана на этом. . .	Мысли в слух kumehtar 18.11.2025 Кстати, совсем недавно имел разговор на тему медитаций с людьми. И обнаружил, что они вообще не понимают что такое медитация и зачем она нужна. Самые базовые вещи. Для них это - когда просто люди. . .	Создание Single Page Application на фреймах krapotkin 16.11.2025 Статья исключительно для начинающих. Подходы оригинальностью не блещут. В век Веб все очень привыкли к дизайну Single-Page-Application . Быстренько разберем подход "на фреймах". Мы делаем одну. . .

@s88s 4 / 4 / 0 Регистрация: 23.01.2015 Сообщений: 108
	05.01.2019, 02:42 [ТС]
	а как сделать ограничение по размеру файла? 0

@s88s 4 / 4 / 0 Регистрация: 23.01.2015 Сообщений: 108
	05.01.2019, 02:55 [ТС]
	Этот вариант да я видел но он если используется <input type="file" id="file"> У меня же кнопкой используется <div id="upload"><span>Выбрать файл<span></div> Как в этом случае быть ... пробовал прикрутить не получилось =( 0

@s88s 4 / 4 / 0 Регистрация: 23.01.2015 Сообщений: 108
	05.01.2019, 03:03 [ТС]
	Да всё загружается и даже в БД записи делает для вывода на экран ... вот только проверок нет и мне это не нравится =( а они нужны 0

@s88s 4 / 4 / 0 Регистрация: 23.01.2015 Сообщений: 108
	05.01.2019, 12:52 [ТС]
	в примере тоже используется input буду дальше разбираться со своим вопросом. с JS не дружу пока что ... 0