elhacker.net cabecera Bienvenido(a), Visitante. Por favor Ingresar o Registrarse
¿Perdiste tu email de activación?.

 

 


Tema destacado: Recopilación Tutoriales y Manuales Hacking, Seguridad, Privacidad, Hardware, etc


+  Foro de elhacker.net
|-+  Programación
| |-+  Desarrollo Web (Moderador: #!drvy)
| | |-+  Utilizando upload de imagen con drag & drop
0 Usuarios y 1 Visitante están viendo este tema.
Páginas: [1] Ir Abajo Respuesta Imprimir
Autor Tema: Utilizando upload de imagen con drag & drop  (Leído 7,014 veces)
Feedeex

Desconectado Desconectado

Mensajes: 173


Ver Perfil
Utilizando upload de imagen con drag & drop
« en: 6 Julio 2011, 06:41 am »

Hola, estoy intentando utilizar el siguiente efecto:

http://gokercebeci.com/dev/droparea

Arrastra la imágen pero nunca llega a cargar full, y no me muestra error.

¿Alguna ayuda?, gracias.


En línea

madpitbull_99
Colaborador
***
Desconectado Desconectado

Mensajes: 1.911



Ver Perfil WWW
Re: Utilizando upload de imagen con drag & drop
« Respuesta #1 en: 6 Julio 2011, 09:03 am »

Si pusieras el código que has hecho sería más fácil ayudarte.

Código:
<div class="droparea spot" data-width="460" data-height="345"
data-type="jpg" data-crop="true" data-quality="60" data-folder="sample"
data-something="stupid"></div>
<script>
$('.droparea').droparea({'post' : '/data/dev/droparea/upload.php'});
</script>


Cambia estos parámetros por los tuyos:

data-folder="sample" -> Carpeta donde se guardarán las imágenes.

{'post' : '/data/dev/droparea/upload.php'} -> La ruta del script que se encarga de guardar la imagen. El fichero upload.php que el autor usa en su demo lo tienes aquí.


En línea



«Si quieres la paz prepárate para la guerra» Flavius Vegetius

[Taller]Instalación/Configuración y Teoría de Servicios en Red
Feedeex

Desconectado Desconectado

Mensajes: 173


Ver Perfil
Re: Utilizando upload de imagen con drag & drop
« Respuesta #2 en: 6 Julio 2011, 17:28 pm »

Si, perdona por el descuido mad. El codigo es:

index.html
Código:
<!DOCTYPE HTML>
<html lang="en">
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <title>HTML5 Drag & Drop Uploader</title>
        <meta name="description" content="HTML5 Drag & Drop Uploader" />
        <meta name="keywords" content="html5, drag drop, uploader, sample" />
        <link type="text/plain" rel="author" href="http://gokercebeci.com/humans.txt" />
        <link rel="shortcut icon" href="http://gokercebeci.com/favicon.ico" type="image/x-icon" />
        <style>
            body { padding: 20px 10px; color:#333; font: normal 12px sans-serif; }
            #devcontainer { margin: 0 auto; width: 940px; }
        </style>
        <!-- jquery -->
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" type="text/javascript"></script>
    </head>
    <body>
        <div id="devcontainer">
            <!-- development area -->
            <script src="droparea.js" type="text/javascript"></script>
            <style>
                .droparea {
                    position:relative;
                    text-align: center;
                }
                .droparea div {
                    position: absolute;
                    top:0;
                    width: 100%;
                    height: 100%;
                }
                .droparea .instructions {
                    border: 2px dashed #ddd;
                    opacity: .8;
                }
                .droparea .instructions.over {
                    border: 2px dashed #000;
                    background: #ffa;
                }
                .droparea .progress {
                    position:absolute;
                    bottom: 0;
                    width: 100%;
                    height: 0;
                    color: #fff;
                    background: #6b0;
                }
                #areas { width: 480px; }
                .spot {
                    width: 460px;
                    height: 345px;
                }
                .thumb {
                    float: left;
                    margin:20px 20px 0 0;
                    width: 140px;
                    min-height: 105px;
                }
                .desc {
                    float:right;
                    width: 460px;
                }
                .signature a { color:#555; text-decoration:none; }
                .signature img { margin-right:5px; vertical-align: middle; }
            </style>

            <div class="desc">
                <p><b>droparea</b> is a HTML5 drag and drop image file uploader jQuery plug-in and a php script for server-side.</p>
                <p>I developed it to use on my <a href="http://edirne.in" title="edirne">Edirne</a> project.</p>
                <p>I've only tested it on Google Chrome (11.0.696.65) and Mozilla Firefox (3.6.17) and it works enough for me for now!</p>
                <p class="signature"><a href="http://gokercebeci.com/dev/" title="developer">
                        <img src="http://geticon.org/of/gokercebeci.com" alt="developer" />
                        goker.cebeci, the developer</a></p>
                <p class="signature"><a href="https://github.com/gokercebeci/droparea">
                        <img src="http://geticon.org/of/github.com" alt="github" />
                        download or fork it on github</a></p>
                <p class="signature"><a href="http://plugins.jquery.com/project/droparea">
                        <img src="http://geticon.org/of/jquery.com" alt="jquery" />
                        jquery plugin page</a></p>
                <br/>
                <h3>USAGE</h3>
                <div class="codeblock">
                    <code>&lt;div class="droparea spot" data-width="460" data-height="345" data-type="jpg" data-crop="true" data-quality="60" data-folder="sample" data-something="stupid"&gt;&lt;/div&gt;
                        <p>&lt;script&gt;<br/>$('.droparea').droparea({'post' : 'upload.php'});<br/>&lt;/script&gt;</p></code>
                </div>
            </div>

            <div id="areas">
<div class="droparea spot" data-width="460" data-height="345" data-type="jpg" data-crop="true" data-quality="60" data-folder="imagenes_perfil" data-something="stupid"></div>
            </div>

            <script>
                // Calling jQuery "droparea" plugin
                $('.droparea').droparea({
                    'post' : 'upload.php',
                    'init' : function(r){
                        //console.log('my init',r);
                    },
                    'start' : function(r){
                        //console.log('my start',r);
                    },
                    'error' : function(r){
                        //console.log('my error',r);
                    },
                    'complete' : function(r){
                        //console.log('my complete',r);
                    }
                });
            </script>

            <!-- /development area -->
        </div>
    </body>
</html>

Tanto el upload.php como el droparea.js, utilizo los codigos por defecto. Cargo imágenes y algunas cargan hasta %90, otras %78, %92. No se que sucede porque no finaliza nunca. Quizás podrias probarlo para verificarlo.

Muchas gracias por la ayuda, aclaro que también cambie sample por "imagenes_perfil" que ya la cree, y el upload.php lo puse en la misma carpeta.
En línea

madpitbull_99
Colaborador
***
Desconectado Desconectado

Mensajes: 1.911



Ver Perfil WWW
Re: Utilizando upload de imagen con drag & drop
« Respuesta #3 en: 6 Julio 2011, 20:03 pm »

Acabo de probar el script y el plugin con los ficheros que vienen por defecto, sin tocar nada, y funciona perfectamente.
En línea



«Si quieres la paz prepárate para la guerra» Flavius Vegetius

[Taller]Instalación/Configuración y Teoría de Servicios en Red
Feedeex

Desconectado Desconectado

Mensajes: 173


Ver Perfil
Re: Utilizando upload de imagen con drag & drop
« Respuesta #4 en: 8 Julio 2011, 17:40 pm »

Uso todo original, solo que cambié la carpeta por 'images' (y la creé). Pero queda acá:

En línea

madpitbull_99
Colaborador
***
Desconectado Desconectado

Mensajes: 1.911



Ver Perfil WWW
Re: Utilizando upload de imagen con drag & drop
« Respuesta #5 en: 8 Julio 2011, 19:13 pm »

¿Que navegador estás usando? Porque solo ha sido probado en Chrome 11 y Mozilla 3.6.
En línea



«Si quieres la paz prepárate para la guerra» Flavius Vegetius

[Taller]Instalación/Configuración y Teoría de Servicios en Red
Feedeex

Desconectado Desconectado

Mensajes: 173


Ver Perfil
Re: Utilizando upload de imagen con drag & drop
« Respuesta #6 en: 8 Julio 2011, 19:29 pm »

Mozilla 5.0
En línea

madpitbull_99
Colaborador
***
Desconectado Desconectado

Mensajes: 1.911



Ver Perfil WWW
Re: Utilizando upload de imagen con drag & drop
« Respuesta #7 en: 14 Julio 2011, 22:12 pm »

Prueba si te pasa lo mismo con este otro plugin: JQuery HTML5 Uploader. Lo he probado personalmente y funciona.
En línea



«Si quieres la paz prepárate para la guerra» Flavius Vegetius

[Taller]Instalación/Configuración y Teoría de Servicios en Red
Páginas: [1] Ir Arriba Respuesta Imprimir 

Ir a:  

Mensajes similares
Asunto Iniciado por Respuestas Vistas Último mensaje
Drag&Drop (SOS SOS SOS)
Programación Visual Basic
CsarGR 2 2,090 Último mensaje 21 Diciembre 2005, 15:05 pm
por Kizar
Drag and Drop
Programación Visual Basic
NDEVIL 0 1,326 Último mensaje 5 Abril 2007, 09:17 am
por NDEVIL
Drag & Drop de un texto « 1 2 »
Programación Visual Basic
aaronduran2 10 3,067 Último mensaje 6 Agosto 2008, 19:17 pm
por aaronduran2
drag & drop
.NET (C#, VB.NET, ASP)
_katze_ 2 3,393 Último mensaje 23 Octubre 2010, 06:57 am
por 43H4FH44H45H4CH49H56H45H
html5 drag and drop ayuda (imagen dentro de div)
Desarrollo Web
Kase 0 1,825 Último mensaje 6 Mayo 2013, 11:13 am
por Kase
WAP2 - Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines