[AYUDA] Script subir imagenes sin hacer POST, sin que el formulario se recargue

[JorgeEMX]

Usa un formulario aparte. Quizá debajo o antes de tu form principal, usa target para mandarlo a un frame y de ahí ocupa la información como mejor te plazca (con JS claro).

Si quieres usar forzosamente AJAX: https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest#Using_nothing_but_XMLHttpRequest

[6666]

Si por supuesto, esto se hace con javascript, una vez que tienes la imagen cargada en el input de file, lo pasas a base64 y con esa string usas para lo que quieras.

test.htm

Código [Seleccionar] Expandir


<style>
  .thumb {
    height: 75px;
    border: 1px solid #000;
    margin: 10px 5px 0 0;
  }

</style>

<input type="file" id="files" name="files[]" multiple />
<output id="list"></output>

<script>
  function handleFileSelect(evt) {
    var files = evt.target.files; // FileList object

    // Loop through the FileList and render image files as thumbnails.
    for (var i = 0, f; f = files[i]; i++) {

      // Only process image files.
      if (!f.type.match('image.*')) {
        continue;
      }

      var reader = new FileReader();

      // Closure to capture the file information.
      reader.onload = (function(theFile) {

        return function(e) {
          // Render thumbnail.
          var span = document.createElement('span');
          span.innerHTML = ['<img class="thumb" src="', e.target.result,
                            '" title="', escape(theFile.name), '"/><p><textarea>', e.target.result,'<textarea>'].join('');
          document.getElementById('list').insertBefore(span, null);
        };
      })(f);

      // Read in the image file as a data URL.
      reader.readAsDataURL(f);
    }
  }

  document.getElementById('files').addEventListener('change', handleFileSelect, false);
</script>





[Graphixx]

No encontre en internet ni un solo ejemplo de un upload dinamico de fotos en AJAX, asi que dejo el que hice yo...

EL QUE YO MISMO DESARROLLE:
http://www.4shared.com/rar/RIqTGpcTce/imageupload18.html

Conste habia muchas paginas que decian como subirlas , pero no como modificarlas ni borrarlas, eso fue lo que me toco hacer.

[JorgeEMX]

EL QUE YO MISMO DESARROLLE:

Tu actitud es siempre la misma. Propones un tema como desesperado, después de alguna respuestas y de ponerle peros a todo; regresas a presumir lo que seguramente ya tenías hecho.

Yo sinceramente tomo eso como spam, por no colocarte una etiqueta más despectiva. En fin., propongo que te creas un tema y vayas colocando todas tus creaciones!

[Graphixx]

Tu actitud es siempre la misma. Propones un tema como desesperado, después de alguna respuestas y de ponerle peros a todo; regresas a presumir lo que seguramente ya tenías hecho.

Yo sinceramente tomo eso como spam, por no colocarte una etiqueta más despectiva. En fin., propongo que te creas un tema y vayas colocando todas tus creaciones!

No es SPAM  , ojala fueran mis creaciones, a lo mucho son "adaptaciones", no presumo por que de que voy a presumir, si lo que hice lo hice leyendo tutoriales de internet que crearon verdaderos cracks. Perdona si la forma mia de tratar el tema te incomodo, no era mi intencion trollear por aca, de verdad necesitaba con ancias ese ejemplo y no se si es que estaba buscando por los terminos que no eran pero no logre encontrarlo por ningun lado, habia dos polos opuestos en una cara estaban los ejemplos que solo enseñaban como subir las imagenes mediante ajax y nada mas, sin eliminar.... y en la otra cara estaban los gestores de archivos ya demasiado robustos que se salian de las necesidades basicas que buscaba suplir.

Y el ejemplo que puse es el ejemplo sencillo de como SUBIR, ELIMINAR o MODIFICAR una sola imagen por usuario mediante AJAX. Me falta la parte de que si la imagen es demasiado grande el mismo sistema la vuelva thumbnail osea que la reduzca a algo aceptable y elimine la imagen grande y guarde solo la pequeña, esas modificaciones las subo el fin de semana.

[dantemc]

[#!drvy]

Código (php,3,4,7,13,14) [Seleccionar] Expandir

<?php 
include("../mysqli.inc.php");
$qr = $_POST['qr'];
$nombreImagen = $_POST['imgNombre'];

$conexion=mysqli_connect ($cfg_servidor,$cfg_usuario,$cfg_password,$cfg_basephp1);
 $sentencia="update datos_basicos set foto = '' where qr = '".$qr."'"; 
if(mysqli_query($conexion,$sentencia)){
              echo "<li><img src='imagenes/Sinimagen.jpg' width='180px' height='120px' /></li>";
              echo "<li><input type='file' name='btnAgregar' id='btnAgregar'  onchange='agregar(btnAgregar);' /></li>";
            }

$Eliminar = "imagenes/" .$nombreImagen;
$do = unlink($Eliminar);
 
if($do != true){
 echo "Se produjo un error al eliminar la imagen" .$nombreImagen. "<br />";
 }
?>

Pfff xD

Saludos

[Graphixx]

Esa parte no la he incluido en el ejemplo, por lo que se supone que el codigo que estamos trabajando es solo el de subir, modificar y eliminar las imagenes asincronicamente mediante AJAX, ya lo estoy compilando ya que le he agregado la opcion de que si la imagen es demasiado pesada (mas de 1mb) el sistema la redimenciona a 50KB por lo de que la imagen es nada mas un avatar en el sistema, ahorita en 1 hora lo monto todo.