How can I upload a file to my server using PHP, AJAX, JAVASCRIPT?

0

I have problems uploading a file to my server, I CAN NOT read the $ _FILES ['file'] ['name'] after having gone through AJAX, I use the following code:

HTML index.php

<html>
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="jquery-3.3.1.min.js"></script>
    <script type="text/javascript" src="jquery-3.3.1.js"></script>
    <script type="text/javascript" src="funciones.js"></script>
</head>
<body>
    <form id="frmNuevoArchivo" name="frmNuevoArchivo" enctype="multipart/form-data">
        <input id="archivo" type="file"  name="archivo">
        <button type="button" id="btnNuevoArchivo" name="btnNuevoArchivo" class="btn"> Registrar </button>
    </form>
</body>

JS functions.js

$(document).ready(function () {
    $('#btnNuevoArchivo').click(function () {
         var datos = $('#frmNuevoArchivo').serialize();
        $.ajax({
            data: datos,
            url: "subir.php",
            type: "POST",
            success:
                    function (r) {
                        alert('' + r);
                    }
        });
    });
});

PHP subir.php

    $ftp_server = "MI IP";
$ftp_usuario = "usuario";
$ftp_pass = "pass";
$con_id = ftp_connect($ftp_server);
$lr = ftp_login($con_id, $ftp_usuario, $ftp_pass);

if ((!$con_id) || (!$lr)) {
    echo 'NO SE PUDO CONECTAR';
    exit;
} else {
    echo 'CONECTADO CORRECTAMENTE';

    if (!empty($_FILES['archivo']['name'])) {
        $temp = explode(".", $_FILES['archivo']['name']);
        $source_file = $_FILES['archivo']['tmp_name'];
        $destino = "CARPETA";
        $nombre = $_FILES['archivo']['name'];

        $subio = ftp_put($con_id, $destino . '/' . $nombre, $source_file, FTP_BINARY);

        if ($subio) {
            echo '  ARCHIVO SUBIÓ';
        } else {
            echo '  ARCHIVO NO SUBIÓ';
        }
    } else {
        echo ' NO SELECCIONÓ NINGUN ARCHIVO';
    }
}
?>

ERROR

Undefined index: archivo in subir.php on line 3
    
asked by Diego Martinez 26.10.2018 в 07:45
source

2 answers

1

Try modifying your script a bit this way.

$(document).ready(function () {
        $('#btnNuevoArchivo').click(function () {
             var datos = $('#archivo').prop('files')[0];

             var form_data = new FormData();                  
             form_data.append('file', datos );
            $.ajax({
                data: form_data ,
                url: "subir.php",
                type: "POST",
                contentType: false,
                processData: false,
                success:
                        function (r) {
                            alert('' + r);
                        }
            });
        });
    });

In PHP, receive it like this.

if ( 0 < $_FILES['file']['error'] ) {
        echo 'Error: ' . $_FILES['file']['error'] . '<br>';
    }
    else {
       #Todo tu codigo si el archivo se recibió correctamente.
       print_r($_FILES['file']['name']);
    }
    
answered by 26.10.2018 / 17:27
source
0

That's how I do it, I hope it works for you

html

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>

<form action="javascript:subirArchivo()" class="panel form-horizontal" enctype="multipart/form-data" id="formAdjunto">

  <div class="panel-body">

    <div class="form-group">



      <div class="col-md-12">



        <input type="file" id="imagen" onchange="obtenterArchivo()" name="archivo">

        <input type="text" id="valorid" name="idvalue" style="display:none">



      </div>



      <div class="col-md-12">



        <div class="messages" id="mensaje">

        </div>

        <br>

        <div class="showImage" id="verImage">







        </div>



      </div>





    </div>

  </div>

  <div class="panel-footer text-right">

    <button class="btn btn-primary" id="newadjuntar">Adjuntar</button>

  </div>

</form>

Jquery code

function obtenterArchivo() {



  //obtenemos un array con los datos del archivo

  var file = $("#imagen")[0].files[0];

  //obtenemos el nombre del archivo

  var fileName = file.name;

  //obtenemos la extensión del archivo

  fileExtension = fileName.substring(fileName.lastIndexOf('.') + 1);

  //obtenemos el tamaño del archivo

  var fileSize = file.size;

  //obtenemos el tipo de archivo image/png ejemplo

  var fileType = file.type;

  //mensaje con la información del archivo

  showMessage("<span class='info'>Archivo para subir: " + fileName + ", peso total: " + fileSize + " bytes.</span>");

}

function subirArchivo() {



  //información del formulario

  var formData = new FormData($("#formAdjunto")[0]); //de esta manera envias los datos del formulario

  var message = "";

  //hacemos la petición ajax  

  $.ajax({

    url: 'js/php/upload_aprobacion.php',

    type: 'POST',

    // Form data

    //datos del formulario

    data: formData,

    //necesario para subir archivos via ajax

    cache: false,

    contentType: false,

    processData: false,

    //mientras enviamos el archivo

    beforeSend: function() {

      message = $("<span class='before'>Subiendo xml, por favor espere...</span>");

      showMessage(message)

    },

    //una vez finalizado correctamente

    success: function(data) {

      message = $("<span class='success'>xml subido correctamente.</span>");

      //showMessage(message);







      // $("#ventanaBorrar").modal("hide");

      alert("El archivo se subio correctamente");



      separarAct = aprobadoidx2.split("&nbsp;&nbsp;");



      subirAct = separarAct[0] + '&nbsp;&nbsp;<a href="js/php/xml/' + data + '" style"color:orange;" target="_blank"><i class="fa fa-eye"></i></a>'

      table.fnUpdate(subirAct, id, 0, 0);

      $(seleccionTR).removeClass('selected');



    },

    //si ha ocurrido un error

    error: function() {

      message = $("<span class='error'>Ha ocurrido un error.</span>");

      showMessage(message);

    }

  });





}



function showMessage(message) {

  $(".messages").html("").show();

  $(".messages").html(message);

}

PHP code to upload the file

if (!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {



//obtenemos el archivo a subir

$file = $_FILES['archivo']['name'];

$extension = explode(".", $file);



//$extension = $_FILES['archivo']['type'];

$namex = trim($_POST["idvalue"]);





$nombre_archivo = 'imgaprobacion_'.$namex.'.'.$extension[1];





$urljpg = 'aprobacion/imgaprobacion_'.$namex.'.jpg';

$urlpng = 'aprobacion/imgaprobacion_'.$namex.'.png';

$urlpdf = 'aprobacion/imgaprobacion_'.$namex.'.pdf';



if(file_exists($urljpg)){



    unlink($urljpg);



}

if(file_exists($urlpng)){



    unlink($urlpng);



}

if(file_exists($urlpdf)){



    unlink($urlpdf);



}

//comprobamos si existe un directorio para subir el archivo

//si no es así, lo creamos

if (!is_dir("aprobacion/")) {

    mkdir("aprobacion/", 0777);

}

//comprobamos si el archivo ha subido

if ($file && move_uploaded_file($_FILES['archivo']['tmp_name'], "aprobacion/" . $nombre_archivo)) {

    sleep(3); //retrasamos la petición 3 segundos

    echo $nombre_archivo; //devolvemos el nombre del archivo para pintar la imagen

}else{ throw new Exception("Error Processing Request", 1); }
    
answered by 26.10.2018 в 19:59