Utilizando upload de imagen con drag & drop

Feedeex · 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.

madpitbull_99 · 6 Julio 2011, 09:03 AM

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

Código [Seleccionar]

<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í.

Feedeex · 6 Julio 2011, 17:28 PM

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

index.html

Código [Seleccionar]

<!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.

madpitbull_99 · 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.

Feedeex · 8 Julio 2011, 17:40 PM

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

madpitbull_99 · 8 Julio 2011, 19:13 PM

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

Feedeex · 8 Julio 2011, 19:29 PM

Mozilla 5.0

madpitbull_99 · 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.