Приветствуем Вас на сайте!
      Авторизировавшись на сайте Вы получаете возможность заказывать эксклюзивные вещи для Вашего сайта, скачивать новинки, общаться с друзьями.

      Если у Вас ещё нет аккаунта на BEST STUDIO, вы можете создать его потратив не более 10-ти секунд используя форму справа с заголовком "Вход на сайт"
Вход на сайт
Логин:

Пароль:
Вход
Войти по Логину и Паролю
О нас
Cтудия скриптов и дизайна BEST STUDIO, как студия перспективных веб-разработок, была основана 1 июля 2009 г. Уже более 17000 зарегистрированых пользователей! С момента ее создания мы четко придерживаемся принципа: «Быстро, качествено, дорого».

Заказывая работу для вашего сайта у нас, вы экономите время...

Стремитесь к лучшему - в Best Studio!
Войти | Зарегистрироваться
Настройки
Анимация Шапки
Анимация Меню
Анимация Футера
Автообновление Чата
Автообновление Статистики
Звуковые Оповещения
Авто Подгрузка Материалов

Перезагрузите страницу
API - Загрузка фотографий
DEMO +
Всем привет, мы сильно заняты и за частую без интернета. Но вот нашли время и сделали для вас скрипт, который позволит загружать Фотографии на Хостинг при добавление сообщений на сайт. Скрипт представлен как конструктор в 3 видах стандарта вывода - Поле ввода DIV, HTML Вывод и стандартное поле textarea....

Особенности:
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(); }
});


4. Базовое CSS вы можете взять из DEMO

P.s Рекомендуем создать свое Client-ID тут Перейти
Данный раздел авторский все работы являются собственностью BS (mybeststudio.ru) любое коммерческое использование строго запрещено.

При копировании материала указываем источник MyBeststudio.ru.

Для редактирования кода необходимо иметь хотя бы базовые знания в HTML, CSS и Js технологиях.
Поделиться новостью в социальной сети.
Добавил: Best_Studio
Дата добавления: 28.05.2018 в 21:01 по МСК
Категория: Другие модули
Просмотров: 82
Комментариев: 0
Эмоций:
Теги: imgur, best, hosting, free, woobl, API, img, IMAGE, SSL, Host
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]