Saltar a contenido

Formulario incidencias

Crear el archivo form.js en la carpeta js.

Agregar el archivo form.js al archivo form.html

<script src="js/form.js"></script>

Copiar lo siguiente en el archivo form.js

let foto;
const serverURL = "https://wladimir-uab.alwaysdata.net/";

function saveMarker() {
    const name = $("#nom").val();
    const desc = $("#descrip").val();
    const lat = $("#text-latitud").val();
    const lng = $("#text-longitud").val();

    $.ajax({
        type: "POST",
        url: `${serverURL}incidencia.php`,
        data: {
            x: lng,
            y: lat,
            descripcio: desc,
            nombre: name,
            foto: foto,
        },
        success: function () {
            //subirFichero();
            location.href = "list.html";
        },
    });
}

function getCurrentPosition() {
    //TODO tomar la posicion del GPS
}

function getCameraPicture() {
    //TOOD tomar foto camara
}

Simular subir foto

function loadFoto(evt) {
    const image = $("#fimg");
    const imageData = URL.createObjectURL(evt.target.files[0]);
    console.log(evt.target.files[0]);
    image.attr("src", imageData);
    image.attr("mime", evt.target.files[0].type);
    foto = evt.target.files[0].name;
    image.on("load", function () {
        URL.revokeObjectURL(image.attr("src")); // free memory
    });
}

function subirFichero() {
    const files = $("#file")[0].files;
    const fd = new FormData();
    fd.append("file", files[0]);
    $.ajax({
        type: "POST",
        url: `${serverURL}upload.php`,
        data: fd,
        contentType: false,
        mimeType: "multipart/form-data",
        processData: false,
        success: function () {
            console.log("file uploaded");
        },
    });
}

function getCameraPicture() {
    //TOOD tomar foto camara
    subirFichero();
}

Crear el archivo form.css en la carpeta css

#fimg {
    height: 200px;
}

Agregar el archivo form.css al archivo form.html

<link rel="stylesheet" href="css/form.css" />

Agregar el campo file para subir la foto

<input type="file" id="file" accept="image/*" onchange="loadFoto(event);" />

Simular coger la posicion del usuario

function getCurrentPosition() {
    //TODO tomar la posicion del GPS
    var onSuccess = function (position) {
        $("#text-latitud").val(position.coords.latitude);
        $("#text-longitud").val(position.coords.longitude);
    };

    function onError(error) {
        alert(
            "code: " + error.code + "\n" + "message: " + error.message + "\n",
        );
    }

    navigator.geolocation.getCurrentPosition(onSuccess, onError);
}