Send input file value via ajax without form

Asked

Viewed 957 times

1

I need to upload images inside a form. I wonder if it is possible to pass the parameters of the image upload form via ajax outside the general form? If yes, how would I do? I tried some ways, but none worked.

OBS: I am using validate.js to treat the other forms, when I insert a form inside another the validate returns "Settings" problems (the image form does not have btn Submit, occurs through the btn of choice of files). Follow the code of the upload part below:

  $(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

    View this post:&#xD; http://answall.com/questions/42823/fazer-upload-apenas-com-jquery-ajax-e-php

No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.