Staff en línea

[javascript] Utilizar imgur como alojamiento de imagenes
Tema iniciado por y Añadir a favoritos

staff
[codebox][info]Hola,
Normalmente el alojamiento de imagenes de los foros de Foro Activo se hace con servimg o tynipic, pero con este codigo JavaScript podran implementar en sus foros el servicio de imgur.
[/info]

Primero que nada tenemos que loguearnos en imgur(o registrarnos), y nos vamos a la siguiente pagina: https://api.imgur.com/oauth2/addclient


Ingresamos los siguientes datos en el Formulario:
Application Name: Un nombre cualquiera
Authorization type: Anonymous usage without user authorization
Authorization callback URL: El url de su foro, comenzando con http://
Application website (optional): El url de su foro, comenzando con http://
Email: Su correo electronico
Description: Una breve descripcion(no importa)

Ingresamos el captcha y le damos submit,


En el codigo que proporcionare a continuación, reemplazar 'Su ID de cliente aqui' por el codigo Client ID generado.

¡Listo!

Ventajas
Puede hacer el envío de la imagen más rápido
Puede enviar varias imágenes a la vez,
Le permite enviar también el formato de archivo APNG, PDF y xcf además de bmp, jpg, png, gif, tiff (archivos tiff, bmp, pdf y xcf se Convierten en png, gif y jpg)
Al quitar de la url la extencion (por ejemplo, .jpg, .png, .gif) lo llevara a una página donde se puede ver el número de puntos de vista, las estadísticas y diversos códigos de diferentes dimensiones de imagen
No tiene que andar copiando la url, ya que la inserción del codigo bbcode se hace de manera automatica

[/codebox]

[hidecode]
Código:
    ;window['FormData'] && $(function(){$(function(){
   
      var imgur_client_id = 'Su ID de cliente aqui';
      var current = 0, uploaded, xhrs, file_selector, button = $('.sceditor-button-servimg').off().click(function(){
        if(current) return finish();
        if(!file_selector) file_selector = $('<input type="file" multiple/ accept="image/*">').css({position:'absolute', top:-100}).appendTo('body').change(function (e) {
          var files = e.target.files, fd, len;
          uploaded = [], xhrs = [];
          for (var i = 0, len = files.length; i < len; i += 1) {
            if (files[i].type.indexOf('image/') && files[i].type !== 'application/pdf') continue;
            current++;
            fd = new FormData();
            fd.append('image', files[i]);
            (function(xhr){
              var num = i, xhr = jQuery.ajaxSettings.xhr();
              xhrs.push(xhr);
              xhr.open('POST', 'https://api.imgur.com/3/image');
              xhr.setRequestHeader('Authorization', 'Client-ID '+imgur_client_id);
              xhr.onreadystatechange = function () {
                if (xhr.readyState !== 4) return;
                current--;
                if (xhr.status === 200) {
                  var res = JSON.parse(xhr.responseText);
                  uploaded[num] = res.data.link;
                }
                if(!current) finish();
              };
              xhr.send(fd);
            })();
          }
          if(current) button.css({background:'url(http://i.imgur.com/EMsOJtZ.gif) no-repeat'});
        });
        file_selector.click();
        return false;
      }).children();
      var finish = function(){
        for(var i=0; i < xhrs.length; i++) {
            if(xhrs[i].readyState == 4) continue;
            xhrs[i].onreadystatechange = function(){};
            xhrs[i].abort();
        }
        for(var i=0; i < uploaded.length; i++) {
          if(uploaded[i] === undefined) continue;
          $('body').find('.sceditor-button-image').click().end().find('.sceditor-insertimage').find('#image').val(uploaded[i]).end().find('input.button').click();
          $('#text_editor_textarea').sceditor('instance').insertText('\n');
        }
        button.removeAttr('style');
        current = 0;
        file_selector.wrap('<form>').closest('form').get(0).reset();
        file_selector.unwrap();
        return false;
      };
    })}); 
[/hidecode]
Fibo
avatar

¿Que estoy pensando? :

Estamos en Open, Estamos en Familia [table class=fecha_up][td]Se modifico:1/02/17 - 19:06 hrs.[/td][/table]


Banner en temas :

https://i.imgur.com/R9vnOcf.jpg


Color de titulos :

#fff


Sombra titulo :

1px 1px 1px #fff


Mensajes :

409


Puntos :

618


Me gusta :

121


ingreso :

11/09/2015


Sexo :

Masculino

Plataforma :

PhpBB3


Navegador :

Chrome


Ver perfil de usuario https://www.opensourcephpbb3.com

Volver arriba Ir abajo

Mmm... a ver
gracias por el codigo

edito. no funciona adecuadamente
Redline
avatar

¿Que estoy pensando? :

Escribe lo que tienes en mente [table class=fecha_up][td]Se modifico:10/7/15 - 15:25 hrs.[/td][/table]


Banner en temas :

http://i64.tinypic.com/2i8tzma.jpg


Color de titulos :

#333


Sombra titulo :

1px 1px 1px #fff


Mensajes :

44


Puntos :

55


Me gusta :

7


ingreso :

13/09/2016


Sexo :

Masculino

Plataforma :

punbb


Navegador :

chrome


Ver perfil de usuario

Volver arriba Ir abajo

Thanks you .
Eu quero ver el codigo
muykay
avatar

¿Que estoy pensando? :

Escribe lo que tienes en mente [table class=fecha_up][td]Se modifico:10/7/15 - 15:25 hrs.[/td][/table]


Banner en temas :

http://i64.tinypic.com/2i8tzma.jpg


Color de titulos :

#333


Sombra titulo :

1px 1px 1px #fff


Mensajes :

67


Puntos :

69


Me gusta :

2


ingreso :

07/09/2017


Sexo :

Masculino

Plataforma :

punBB


Navegador :

Chrome


Ver perfil de usuario

Volver arriba Ir abajo

 En la misma categoria


Permisos de este foro:
No puedes responder a temas en este foro.