1

Preciso realizar o upload de imagens porem dentro de um formulário. Eu gostaria de saber se é possível passar os parâmetros do formulário de upload da imagem via ajax por fora do formulário geral? Se sim, como eu faria? tentei algumas formas, mas nenhuma deu certo.

OBS: estou usando o validate.js pra tratar os demais formulários, quando insiro um form dentro de outro o validate retorna problemas "Settings" (o form da imagem não tem btn submit, ocorre através do btn de escolha de arquivos). Segue o código da parte de upload abaixo:

  $(document).ready(function() {

    $('.photoimg').off('click').on('change', function() {
      //$("#preview").html('');

      $(this).parent().parent().parent().find(".imageform").ajaxForm({
        target: $(this).parent().parent().parent().find('.preview'),
        beforeSubmit: function() {
          console.log('Antes de enviar');
          $(this).find(".imageloadstatus").show();
          $(this).find(".imageloadbutton").hide();
        },
        success: function() {
          console.log('Envio com sucesso');
          $(this).find(".imageloadstatus").hide();
          $(this).find(".imageloadbutton").show();
        },
        error: function() {
          console.log('Erro ao realizar operação');
          $(this).find(".imageloadstatus").hide();
          $(this).find(".imageloadbutton").show();
        }
      }).submit();
    });
  });
    body {
      font-family: sans-serif;
    }
    .preview {
      color: #cc0000;
      font-size: 12px
    }
    .imgList {
      max-height: 150px;
      margin-left: 5px;
      border: 1px solid #dedede;
      padding: 4px;
      float: left;
    }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class='conteudo'>
  <div class='preview'></div>

  <form class="imageform" method="post" enctype="multipart/form-data" action='ajaxImageUpload.php' style="clear:both">
    <h1>Escolha as imagens a carregar</h1>
    <div class='imageloadstatus' style='display:none'>
      <img src="loader.gif" alt="A carregar....">
    </div>
    <div class='imageloadbutton'>
      <input type="hidden" name="indice" value="a1z">
      <input type="file" name="photos[]" class="photoimg" multiple="true">
    </div>
  </form>
</div>
<br>
<br>
<br>
<br>
<div class='conteudo'>
  <div class='preview'></div>

  <form class="imageform" method="post" enctype="multipart/form-data" action='ajaxImageUpload.php' style="clear:both">
    <h1>Escolha as imagens a carregar</h1>
    <div class='imageloadstatus' style='display:none'>
      <img src="loader.gif" alt="A carregar....">
    </div>
    <div class='imageloadbutton'>
      <input type="hidden" name="indice" value="2">
      <input type="file" name="photos[]" class="photoimg" multiple="true">
    </div>
  </form>
</div>

<?php
error_reporting(0);
session_start();

define("MAX_SIZE","9000");

function getExtension($str) {

    $i = strrpos($str,".");

    if (!$i) {
        return "";
    }

    $l = strlen($str) - $i;

    $ext = substr($str,$i+1,$l);

    return $ext;
}

$valid_formats = array("jpg", "png", "gif", "bmp","jpeg");

if (isset($_POST) and $_SERVER['REQUEST_METHOD'] == "POST") {

    $uploaddir = "uploads/"; // directoria que vai receber os ficheiros

    foreach ($_FILES['photos']['name'] as $name => $value) {

        $filename = stripslashes($_FILES['photos']['name'][$name]);

        $size=filesize($_FILES['photos']['tmp_name'][$name]);

        /* Recolhe extensão do ficheiro em caixa baixa (lowercase)
         */
        $ext = getExtension($filename);
        $ext = strtolower($ext);

        if (in_array($ext,$valid_formats)) {

            if ($size < (MAX_SIZE*1024)) {

                $image_name=$_POST['indice'].'_'.$filename;

                $newname=$uploaddir.$image_name;

                if (move_uploaded_file($_FILES['photos']['tmp_name'][$name], $newname)) {

                    /* ficheiro carregado com sucesso,
                     * envia HTML com imagem para apresentar ao visitante
                     */
                    echo "<img src='".$uploaddir.$image_name."' class='imgList'>";

                } else {
                    echo '<span class="imgList">Ficheiro não foi carregado!</span>';
                }
            } else {
                echo '<span class="imgList">Limite de tamanho atingido!</span>';
            }
        } else {
            echo '<span class="imgList">Extensão do ficheiro desconhecida!</span>';
        }
    }
}

?>
1

0

Você deve fazer log-in para responder a esta pergunta.

Pesquise outras perguntas com a tag .