Título: Utilizando upload de imagen con drag & drop
Publicado por: Feedeex 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.
Título: Re: Utilizando upload de imagen con drag & drop
Publicado por: madpitbull_99 en 6 Julio 2011, 09:03 am
Si pusieras el código que has hecho sería más fácil ayudarte. <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í (https://github.com/gokercebeci/droparea/blob/master/upload.php).
Título: Re: Utilizando upload de imagen con drag & drop
Publicado por: Feedeex en 6 Julio 2011, 17:28 pm
Si, perdona por el descuido mad. El codigo es: index.html<!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><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> <p><script><br/>$('.droparea').droparea({'post' : 'upload.php'});<br/></script></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.
Título: Re: Utilizando upload de imagen con drag & drop
Publicado por: madpitbull_99 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.
Título: Re: Utilizando upload de imagen con drag & drop
Publicado por: Feedeex en 8 Julio 2011, 17:40 pm
Uso todo original, solo que cambié la carpeta por 'images' (y la creé). Pero queda acá: (http://s2.subirimagenes.com/imagen/previo/thump_6635605draganddrop.png) (http://www.subirimagenes.com/imagen-draganddrop-6635605.html)
Título: Re: Utilizando upload de imagen con drag & drop
Publicado por: madpitbull_99 en 8 Julio 2011, 19:13 pm
¿Que navegador estás usando? Porque solo ha sido probado en Chrome 11 y Mozilla 3.6.
Título: Re: Utilizando upload de imagen con drag & drop
Publicado por: Feedeex en 8 Julio 2011, 19:29 pm
Mozilla 5.0
Título: Re: Utilizando upload de imagen con drag & drop
Publicado por: madpitbull_99 en 14 Julio 2011, 22:12 pm
Prueba si te pasa lo mismo con este otro plugin: JQuery HTML5 Uploader (http://www.igloolab.com/jquery-html5-uploader/). Lo he probado personalmente y funciona.
|