Send javascript FILE to php

Asked

Viewed 56 times

0

I’ve been reading a lot about it and I’m getting more confused.

I have the form below:

<div class="plano">

  <h1 class="titulos">Cadastro de Plano</h1>

  <form method="post" class="planoCadastrar">

    <input type="text" name="nomePlano" id="nomePlano" class="typeTextMedio" placeholder="Nome"  required /><br /><br />

    <textarea placeholder="Descrição" class="textarea" name="descricao" id="descricao" cols="93" rows="15" required></textarea><br /> <br />

    <div id="multiple_upload">
        <input type="hidden" id="arquivos" name="arquivos" onChange="alert(this.value)" />
        <input type="file" multiple id="fotos"  name="fotos[]" />
        <div id="message">Selecionar fotos</div> 
        <div id="lista"></div>
    </div>          

    <img class="spinner" src="../_img/_bannerImgs/spinner.gif" />          
    <input type="submit" class="btnAcesso" value="Enviar" />

    <label class="resposta"></label>

  </form><br /><br />

  <script> 
    $('.elevate-image').ezPlus({
        zoomType: 'inner',
        cursor: 'crosshair'     
    });
  </script>  

</div>  

In it I have a field FILE for sending of files.

I’m using $.post() of jQuery to send this form one-page php without refresh.

All’s well and I can take php but the field FILE will not.

I’m trying kind of gabiarra but I still had to stop and ask for help.

The jQuery:

// JavaScript Document
$(document).ready(function(e) {

    $("div.conteudo div.plano form.planoCadastrar").on("submit", function() {

        var nomePlano = $("form.planoCadastrar input[type=text]#nomePlano").val();
        var descricao = $("form.planoCadastrar textarea#descricao").val();
        var arquivos  = $("form.planoCadastrar input[type=hidden]#arquivos").val();
        var fotosPost = $("form.planoCadastrar input[type=file]")[0].files;

        fotos = new Array();
             for (var i=0; i < fotosPost.length; i++) { 

                 fotos[i]["name"]     = fotosPost[i].name
                 fotos[i]["type"]     = fotosPost[i].type
                 fotos[i]["size"]     = fotosPost[i].size
                 fotos[i]["tmp_name"] = fotosPost[i].tmp_name

             }

             return false;

        if ( nomePlano == "" || 
             descricao == "") {

            alert("Algum campo está vazio!");

        } 


         $("div.conteudo div.plano form.planoCadastrar input[type=submit].btnAcesso").css('display', 'none');
         $("div.conteudo div.plano form.planoCadastrar img").css('display', 'block');

         $.post ("../_requeridos/cadastraPlano.php", {

             nomePlano   : nomePlano,
             descricao   : descricao,
             arquivos    : arquivos,
             fotos       : fotos

         }, function(retorno){

             $("div.conteudo div.plano form.planoCadastrar input[type=submit].btnAcesso").css('display', 'block');
             $("div.conteudo div.plano form.planoCadastrar img").css('display', 'none');

              if (retorno == 1) {
                resposta = "Plano cadastrado com sucesso!"; 
              } else {
                resposta = "Erro no cadastro do Plano";
              }
             $(".resposta").css("display", "block");
             $(".resposta").html(resposta);     

           }
          );

          return false;

    });

});

I tried to do the one gabiarra with the code below:

     for (var i=0; i < fotosPost.length; i++) { 

         fotos[i]["name"]     = fotosPost[i].name
         fotos[i]["type"]     = fotosPost[i].type
         fotos[i]["size"]     = fotosPost[i].size
         fotos[i]["tmp_name"] = fotosPost[i].tmp_name

     }

But when I get to

         fotos[i]["tmp_name"] = fotosPost[i].tmp_name

I can’t get the number.

Does there exist a recourse for that reason?

Or do I really have to submit the form.

The idea is to take the array of FILE and create a array javascript, send to the php and convert again in array php to see if I can do the upload of filing cabinet.

  • I think these posts can help you: https://answall.com/questions/9704/fazer-upload-de-arquivo-com-ajax https://stackoverflow.com/questions/10899384/uploading-both-data-and-files-in-one-formusing-ajax

  • What part? I’m having problems when you need to send more than one image because it only lists one

No answers

Browser other questions tagged

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