Upload a file with JS

Asked

Viewed 450 times

1

First I wanted to say that I got to read some posts about it right here in the stack, but I couldn’t make it work, so I decided to post my code.

My idea seems to be very simple, I need to upload a file xlxs to a server folder for it to read, follow the codes:

HTML

<form id="formulario" method="post" enctype="multipart/form-data">
<div class="row">
    <div class="col-md-4 colunaCNPJ">
        <label class='no-select'>Coluna do CNPJ</label>
        <input class="form-control" type="text" name="campo1" placeholder="Letra" />
    </div>
    <div class="col-md-4 colunaCEP">
        <label class='no-select'>Coluna do CEP</label>
        <input class="form-control" type="text" name="campo1" placeholder="Letra" />
    </div>
    <div class="col-md-4 inicio">
        <label class='no-select'>Início dos dados</label>
        <input class="form-control" type="number" name="campo1" placeholder="Letra" value="1" />
    </div>
</div>
<br>
<div class="row">
    <div class="col-md-12 uploadExcel">
        <input id="inputArquivoCNPJ" name="fileUpload" type="file" accept=".xls, .xlsx"/>
    </div>                            
</div>
<br>
<div class="btn btn-default btn-block botaoEnviar">Enviar</div>

JS

$('.modalFretesCNPJ_Fretes form .botaoEnviar').click(function(){                
var _colunaCNPJ = $(".modalFretesCNPJ_Fretes .colunaCNPJ input").val();
var _colunaCEP = $(".modalFretesCNPJ_Fretes .colunaCEP input").val();
var _inicio = $(".modalFretesCNPJ_Fretes .inicio input").val();

var _input = document.getElementById("inputArquivoFretesCNPJ");
var _nomeArquivo = _input.files[0].name; 

var _uploadExcel = new FormData($(".modalFretesCNPJ_Fretes .uploadExcel input")[0]);

if (_colunaCNPJ == "" || _colunaCNPJ == null){
    $(".modalFretesCNPJ_Fretes form .colunaCNPJ input").focus();                    
} else {
    if ( _colunaCEP == "" || _colunaCEP == null){
        $(".modalFretesCNPJ_Fretes form .colunaCEP input").focus();
    } else {
        if (_inicio == "" || _inicio == null){
            $(".modalFretesCNPJ_Fretes form .inicio input").focus();
        } else {
            if (_uploadExcel == null) {
                $(".modalFretesCNPJ_Fretes form .uploadExcel input").focus();
            } else {
                $.ajax({
                    type: 'POST',
                    url: 'AJAX/AJAX_carregarExcelParaFretes.php',
                    data: { colunaCNPJ: _colunaCNPJ, colunaCEP: _colunaCEP, inicio: _inicio, nomeArquivo: _nomeArquivo, uploadExcel : _uploadExcel },
                    processData: false,
                    contentType: false,
                    success: function(retorno) {
                        alert(retorno + " 55");
                        if (retorno == 1){
                        } else {
                            alert("Erro ao excluir o boleto. ERRO: 25.");
                        }
                    },
                    error: function() {
                        alert("Erro ao excluir o boleto ERRO: 26.");
                    }
                });

            }
        }
    }
 }
});

PHP

$colunaCNPJ = isset($_POST['colunaCNPJ']) ? $_POST['colunaCNPJ'] : null;
$colunaCEP = isset($_POST['colunaCEP']) ? $_POST['colunaCEP'] : null;
(int) $inicio = isset($_POST['inicio']) ? $_POST['inicio'] : null;
$nomeArquivo = isset($_POST['nomeArquivo']) ? $_POST['nomeArquivo'] : null;
$uploadExcel = isset($_FILES['uploadExcel']) ? $_FILES['uploadExcel'] : null;
move_uploaded_file($uploadExcel['tmp_name'], '../EXCEL/' . 
$uploadExcel['name']);

var_dump($uploadExcel);
php javascript jquery ajax html5

  • What part doesn’t work? Where does the code go?

  • So, the upload part itself. It doesn’t "capture" the file and doesn’t even move to the folder, but it takes the name

1 answer

0

You have to send one FormData to upload images with Ajax.

var form = $('#meuForm')[0];
$.ajax({
                type: 'POST',
                url: 'AJAX/AJAX_carregarExcelParaFretes.php',
                data: new FormData(form),
                processData: false,
                contentType: false,
                success: function(retorno) {
                    alert(retorno + " 55");
                    if (retorno == 1){
                    } else {
                        alert("Erro ao excluir o boleto. ERRO: 25.");
                    }
                },
                error: function() {
                    alert("Erro ao excluir o boleto ERRO: 26.");
                }`

Browser other questions tagged php javascript jquery ajax html5

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