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>