Оценки читателей
0 Лайк 0 Лавки 0 Ахахах! 0 Ого! 0 Восторг 0 Печаль 0 Грусняшь
Приветствуем Вас на сайте!
Авторизировавшись на сайте Вы получаете возможность заказывать эксклюзивные вещи для Вашего сайта, скачивать новинки, общаться с друзьями.
Если у Вас ещё нет аккаунта на BEST STUDIO, вы можете создать его потратив не более 10-ти секунд используя форму справа с заголовком "Вход на сайт"
Если у Вас ещё нет аккаунта на BEST STUDIO, вы можете создать его потратив не более 10-ти секунд используя форму справа с заголовком "Вход на сайт"
Вход на сайт
Логин:
Пароль:
Вход
Войти по Логину и Паролю
О нас
Cтудия скриптов и дизайна BEST STUDIO, как студия перспективных веб-разработок, была основана 1 июля 2009 г. Уже более 17000 зарегистрированых пользователей! С момента ее создания мы четко придерживаемся принципа: «Быстро, качествено, дорого».
Заказывая работу для вашего сайта у нас, вы экономите время...
Заказывая работу для вашего сайта у нас, вы экономите время...
Стремитесь к лучшему - в Best Studio!
Войти | Зарегистрироваться
Настройки
Перезагрузите страницу
- Главная
- Авторские работы
- Другие модули
- API - Загрузка фотографий
DEMO
+
Всем привет, мы сильно заняты и за частую без интернета. Но вот нашли время и сделали для вас скрипт, который позволит загружать Фотографии на Хостинг при добавление сообщений на сайт. Скрипт представлен как конструктор в 3 видах стандарта вывода - Поле ввода DIV, HTML Вывод и стандартное поле textarea....
Особенности:
1. Бесплатный хостинг на SSL
2. Не требует место на своем сайте.
3. Легко добавить в свой сайт.
Установка:
1. Добавим форму загрузки:
2. Рассмотрим вариант вывода из DEMO
3. Добавим js:
4. Базовое CSS вы можете взять из DEMO
P.s Рекомендуем создать свое Client-ID тут Перейти
Особенности:
1. Бесплатный хостинг на SSL
2. Не требует место на своем сайте.
3. Легко добавить в свой сайт.
Установка:
1. Добавим форму загрузки:
Код
<form id="upload-image" enctype="multipart/form-data"><input type="file" name="image" id="image"></form>
2. Рассмотрим вариант вывода из DEMO
3. Добавим js:
Код
$('#image').change(function(){
$('.foto-status').html('Загружаем').show();
var formData = new FormData();
formData.append("image", $("#image")[0].files[0]);
$.ajax({
url: "https://api.imgur.com/3/image",
type: "POST",
datatype: "json",
headers: {
"Authorization": "Client-ID 0e3c9522203ed9f"
},
data: formData,
success: function(response) {
var photo = response.data.link;
$('#foto-all').append('<div><img src="'+photo+'"><p>x</p></div>').show(); // Вывод в DIV html
$('#foto-div').append('<img src="'+photo+'">'); // Вывод в DIV поле ввода
$('#foto-textarea').val('[img]'+photo+'[/img]'); // Вывод в textarea поле ввода
$('.foto-status').html('Загружено').hide();
},
error: function(response){
$('div#foto-all, foto-status').html('').hide();
},
cache: false,
contentType: false,
processData: false
});
});
$('div#foto-all p').live( "click", function() {
$(this).parent().remove();
fotoHide = $('div#foto-all div').size();
if(fotoHide < 1) {$('div#foto-all').hide(); }
});
$('.foto-status').html('Загружаем').show();
var formData = new FormData();
formData.append("image", $("#image")[0].files[0]);
$.ajax({
url: "https://api.imgur.com/3/image",
type: "POST",
datatype: "json",
headers: {
"Authorization": "Client-ID 0e3c9522203ed9f"
},
data: formData,
success: function(response) {
var photo = response.data.link;
$('#foto-all').append('<div><img src="'+photo+'"><p>x</p></div>').show(); // Вывод в DIV html
$('#foto-div').append('<img src="'+photo+'">'); // Вывод в DIV поле ввода
$('#foto-textarea').val('[img]'+photo+'[/img]'); // Вывод в textarea поле ввода
$('.foto-status').html('Загружено').hide();
},
error: function(response){
$('div#foto-all, foto-status').html('').hide();
},
cache: false,
contentType: false,
processData: false
});
});
$('div#foto-all p').live( "click", function() {
$(this).parent().remove();
fotoHide = $('div#foto-all div').size();
if(fotoHide < 1) {$('div#foto-all').hide(); }
});
4. Базовое CSS вы можете взять из DEMO
P.s Рекомендуем создать свое Client-ID тут Перейти
Данный раздел авторский все работы являются собственностью ucods.3dn.ru любое коммерческое использование строго запрещено.
При копировании материала указываем источник ucods.3dn.ru
Для редактирования кода необходимо иметь хотя бы базовые знания в HTML, CSS и Js технологиях.
При копировании материала указываем источник ucods.3dn.ru
Для редактирования кода необходимо иметь хотя бы базовые знания в HTML, CSS и Js технологиях.
Добавил: Best_Studio
Дата добавления: 28.05.2018 в 21:01 по МСК
Категория: Другие модули
Просмотров: 1071
Комментариев: 1
Эмоций:
Дата добавления: 28.05.2018 в 21:01 по МСК
Категория: Другие модули
Просмотров: 1071
Комментариев: 1
Эмоций:
Теги:
|
| |