ВХОД
НАЗАД

Пример использования сервиса для загрузки файлов на свой сайт

Вариант 1

ПРИМЕР:

КОД:

<!DOCTYPE html> <html lang="ru"> <head> <title></title> <script src="https://storage4u.ru/inc/frame_v2.js"></script> </head> <body> <div> Ссылка на изображение 1 <input id="image1" name="image1" type="text"> <a class="waves-effect waves-light btn modal-trigger upload-file" href="#image1"><svg fill="none" height="24" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" x2="12" y1="15" y2="3"/></svg></a> </div> <div> Ссылка на изображение 2 (только разрешенные форматы) <input id="image2" name="image2" type="text" data-type="image/jpeg,image/png" data-error="Неверный тип файла. Можно загружать изображения JPG и PNG"> <a class="waves-effect waves-light btn modal-trigger upload-file" href="#image2"><svg fill="none" height="24" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" x2="12" y1="15" y2="3"/></svg></a> </div> </body> </html>
<!DOCTYPE html> <html lang="ru"> <head> <title></title> <script src="https://storage4u.ru/inc/frame_v2.js"></script> </head> <body> <div class="input-field col s12" style="position: relative;"> <input id="image" name="image" type="text"> <label for="image">Ссылка на изображение 1</label> <div style="position: absolute; right: 0px; top: 0"><a class="waves-effect waves-light btn modal-trigger upload-file" href="#image"><svg fill="none" height="24" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" x2="12" y1="15" y2="3"/></svg></a></div> </div> <div class="input-field col s12" style="position: relative;"> <input id="image2" name="image2" type="text" data-type="image/jpeg,image/png" data-error="Неверный тип файла. Можно загружать изображения JPG и PNG"> <label for="image2">Ссылка на изображение 2 (только разрешенные форматы)</label> <div style="position: absolute; right: 0px; top: 0"><a class="waves-effect waves-light btn modal-trigger upload-file" href="#image2"><svg fill="none" height="24" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" x2="12" y1="15" y2="3"/></svg></a></div> </div> </body> </html>

Вариант 2

ПРИМЕР:

КОД:

<!DOCTYPE html> <html lang="ru"> <head> <title></title> <script src="https://storage4u.ru/inc/frame_v2.js"></script> </head> <body> <input id="image3" name="image3" type="hidden" data-type="image/jpeg,image/png" data-error="Неверный тип файла. Можно загружать изображения JPG и PNG" onchange="$('#img').attr('src','').attr('src',$(this).val())"> <img id="img" src="https://storage4u.ru/images/placeholder.jpg" style="max-height: 185px; max-width: 300px; border-radius: 5px; "/> <div><a class="upload-file" href="#image3">Загрузить изображение</a></div> </body> </html>
<!DOCTYPE html> <html lang="ru"> <head> <title></title> <script src="https://storage4u.ru/inc/frame_v2.js"></script> </head> <body> <div class="col s12" style="position: relative;" align="center"> <div> <input id="image3" name="image3" type="hidden" data-type="image/jpeg,image/png" data-error="Неверный тип файла. Можно загружать изображения JPG и PNG" onchange="$('#img').attr('src','').attr('src',$(this).val())"> <img id="img" src="https://storage4u.ru/images/placeholder.jpg" style="max-height: 185px; max-width: 300px; border-radius: 5px; "/> <div><a class="waves-effect waves-light btn-small upload-file" href="#image3">Загрузить изображение</a></div> </div> </div> </body> </html>


Разрешенные форматы файлов

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

ПРИМЕР:

<script> accessible_types="image/jpeg,image/png"; </script>

Задать разрешенные типы файлов можно также атрибутами в кнопке или ссылке (см. ниже)


Дополнительные атрибуты Кнопки или ссылки

href для тега <a> или data-targetid для любого тега указывают на ID поля INPUT, куда будет вставлена ссылка.
Пример: <a href="#target" class="upload-file" >Добавить файл</a>

data-type - Через запятую можно перечислить значения разрешенных file-type.
Пример: <button class="upload-file" data-filetypes="image/*">Добавить файл</button>

data-resize - Можно указать размер файла, к которому нужно привести исходное изображение. Размер указывается в формате "ШИРИНА:ВЫСОТА"

ПРИМЕР:
data-resize="1920:1080"

Если у кнопки или ссылки указан тег id - этот ID будет возвращен в Callback-функции - это удобно когда несколько кнопок на странице.



Также это можно сделать атрибутами в поле INPUT (см. ниже)




Дополнительные атрибуты поля INPUT

У поля INPUT можно прописать дополнительные атрибуты, которые расширяют возможности сервиса

Формат файлов

data-type - Через запятую можно перечислить значения разрешенных file-type

ПРИМЕР:
data-type="image/jpeg,image/png"
data-error="Неверный тип файла. Можно загружать изображения JPG и PNG"

Изменение размера изображения

data-resize - Можно указать размер файла, к которому нужно привести исходное изображение. Размер указывается в формате "ШИРИНА:ВЫСОТА"

ПРИМЕР:
data-resize="1920:1080"



Ссылка на страницу скачивания файла

Чтобы предоставить пользователю возможность комфортного скачивания можно заменить в ссылке слово file на слово download - в этом случае откроется страница на которой будет краткая информация о файле и кнопка "скачать"

ПРИМЕР:

Оригинальная ссылка непосредственно на файл:
https://storage4u.ru/file/2022/03/07/73b431f9407a5bd524fbff5d4c5963aa.jpg

Ссылка на страницу загрузки файла:
https://storage4u.ru/download/2022/03/07/73b431f9407a5bd524fbff5d4c5963aa.jpg



Callback-функция

При успешной загрузке будет вызвана функция file_loaded(link,file_name,file_type,source_id) - если ее определить в Javascript можно повесить свою обработку события. В параметрах передается ссылка, имя файла, тип (расширение) загруженного файла и ID кнопки (полезно если несколько кнопок на странице)


ПРИМЕР:

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script> <script src="https://storage4u.ru/inc/frame_v2.js"></script> </head> <body> <div id="files"></div> <button id="image" class="upload-file" data-type="image/*">Добавить фото</button> <a href="?" id="video" class="upload-file" data-type="video/*">Добавить видео</a> <script> function file_loaded(link,file_name,type,source_id){ let html = '<div><input class="ready" name="files[]" type="text"></div>'; $("#files").append(html); $(".ready").val(link).removeClass("ready"); alert("Файл: "+file_name+"\nТип: "+type+"\nСсылка: "+link+"\nID кнопки: "+source_id); } </script> </body> </html>