0

estou precisando da ajuda com a seguinte situação

Tenho varios campos input files com o mesmo nome e que são usados para fazerem varios uploads de arquivos.

<form>
<label> Foto 3*4</label>
<input type="file" name="file[]" data-name="foto34">
<input type="submit">

<br/>

<label> Foto 16*9</label>
<input type="file" name="file[]" data-name="foto169">
<input type="submit">
</form>

E gostaria de pegar os do data atributo para que eu possa identificar qual o nome do arquivo que esta sendo enviado por upload via ajax Ja tentei pegar com

this.getAtributte("name")
ou
this.dataset.name

neste ultimo caso me retorna undefined. A chamada ajax esta sendo feita assim:

  $(document).ready(function(e){
        $("#form").on('submit', function(e){
           e.preventDefault();
            $.ajax({
                type: 'POST',
                url: 'upload.php',
                data: new FormData(this), //PRECISO PASSAR o DATA_ATRIBUTTE AQUI
                contentType: false,
                cache: false,
                processData:false,
                success: function(msg){
                    $(".btn").removeAttr("disabled");
                }
            });
    });

});

Alguém saberia me auxiliar?

$(document).ready(function(e){
   $("#form").on('submit', function(e){
      e.preventDefault();
      var formulario = new FormData(this);

      var files = $(":file");
  		console.log(files[0].value);	
	  	console.log(files[1].value);			
      // percorre os campos
      files.each(function(i, e){
         if($(e).val()){
	formulario.append('data-name'+i, $(e).data("name"));
}else{
	formulario.append(i, null);
}
      });

      $.ajax({
         type: 'POST',
         url: 'upload.php',
         data: formulario, 
         contentType: false,
         cache: false,
         processData:false,
         success: function(msg){
            $(".btn").removeAttr("disabled");
         }
      });
   });
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 <style>
    
input[type='file'] {
 display: none
}

    </style>
<form enctype="multipart/form-data" id="form">
 
        <div class="col-md-4">
            <div class="panel panel-info">
                <div class="panel-heading">
                    <h3 class="panel-title">Foto 3x4</h3>
                </div>
                <div class="panel-body">
                    Panel content
                    <br />
                    
                    <label for="file" class="bootstrap btn btn-info btn-xs" ><i class="fa fa-upload"></i> Selecionar Arquivo</label>
                            <input type="file" name="file[]" id="file" class="inputfile" data-name="foto34" >    
                            <button type="submit" class="bootstrap btn btn-primary btn-xs"> Enviar</button>
                            
                </div>
            </div>
        </div>
           
		<div class="col-md-4">
			<div class="panel panel-info">
				<div class="panel-heading">
					<h3 class="panel-title">Foto 16x9</h3>
				</div>
				<div class="panel-body">
					Panel content
					<br />
					<label for="file" class="bootstrap btn btn-info btn-xs"><i class="fa fa-upload"></i> Selecionar Arquivo</label>
						<input type="file" name="file[]" id="file" class="inputfile" data-name="foto169">    
						<button type="submit" class="bootstrap btn btn-primary btn-xs"> Enviar</button>
				</div>
			</div>
		</div>
    </form>

15
  • se puder postar a função inteira de onde está tentando capturar essa informação
    – JrD
    Commented 27/03/2019 às 14:13
  • adicionado a duvida
    – tkmtts
    Commented 27/03/2019 às 14:19
  • Pegar o atributo data-name você diz?
    – LeAndrade
    Commented 27/03/2019 às 14:25
  • Exatamente isso
    – tkmtts
    Commented 27/03/2019 às 14:49
  • Por que vc usa vários botões submit no mesmo form?
    – Sam
    Commented 27/03/2019 às 15:30

1 Resposta 1

1

Você pode percorrer os campos tipo file e adicionar ao FormData() uma array com os valores dos data-name usando .append(). É só atribuir o FormData() a uma variável e usar .each para ir adicionando os valores. Será criada uma array neste formado, na ordem dos índices dos campos file, começando em 0:

Array
(
    [data-name0] => foto34
    [data-name1] => foto169
)

No PHP você irá pegar os arquivos normalmente com $_FILES['file'], já a array acima você irá pegar com $_POST.

O código do Ajax ficará assim:

$(document).ready(function(e){
   $("#form").on('submit', function(e){
      e.preventDefault();

      // atribui o FormData a uma variável
      var formulario = new FormData(this);

      // seleciona os campos tipo file
      var files = $(":file");

      // percorre os campos
      files.each(function(i, e){
         // adiciona os valores no FormData
         formulario.append('data-name'+i, $(e).data("name"));
      });

      $.ajax({
         type: 'POST',
         url: 'upload.php',
         data: formulario, //PRECISO PASSAR o DATA_ATRIBUTTE AQUI
         contentType: false,
         cache: false,
         processData:false,
         success: function(msg){
            $(".btn").removeAttr("disabled");
         }
      });
   });
});

Ou você nem precisa enviar um nome para os itens da array, bastaria enviar apenas o índice, assim:

formulario.append(i, $(e).data("name"));

Resultando assim no PHP:

Array
(
    [0] => foto34
    [1] => foto169
)

Pelo índice da array você saberá no PHP para qual file é associado, porque o $_FILES['file'] também resulta numa array:

array(5) {
  ["name"]=>
  array(2) {
    [0]=>
    string(0) ""
    [1]=>
    string(0) ""
  }
  ["type"]=>
  array(2) {
    [0]=>
    string(0) ""
    [1]=>
    string(0) ""
  }
  ["tmp_name"]=>
  array(2) {
    [0]=>
    string(0) ""
    [1]=>
    string(0) ""
  }
  ["error"]=>
  array(2) {
    [0]=>
    int(4)
    [1]=>
    int(4)
  }
  ["size"]=>
  array(2) {
    [0]=>
    int(0)
    [1]=>
    int(0)
  }
}
6
  • Muito bom @Sam vou fazer uns testes com seu codigo, valeu
    – tkmtts
    Commented 28/03/2019 às 21:11
  • Entendi, mas como faco o relacionamento entre eles? pq se for por posicao não daira certo, poderia apenas fazer o upload de um arquivo apenas e como saberia a qual foto ele pertenceria? Por exemplo, fazendo o upload apenas de foto169 o arquivo cairia no array de posicao zero, enquanto que a posicao zero em data-name0 equivale a foto34
    – tkmtts
    Commented 5/04/2019 às 16:32
  • Pode verificar se o campo file está com arquivo para fazer o .append
    – Sam
    Commented 5/04/2019 às 17:05
  • E como poderia fazer isso? Atraves do value? mas ao clicar em outro input mesmo sem arquivo no primeiro ele nao vai inserir o arquivo 2 na primeira posicao? Não entendi a logica Sam, poderia me dar um help? Veja como ficou a execucao.
    – tkmtts
    Commented 5/04/2019 às 17:30
  • Veja que quando o input está vazio, o índice da array name fica vazio, ou seja, sempre vai retornar uma array com o mesmo número de campos. No caso do append você pode fazer o mesmo. Veja se funciona assim: jsfiddle.net/erpqkyaf
    – Sam
    Commented 5/04/2019 às 17:41

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

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .