Notice: Undefined index in file type field

Question

Notice: Undefined index in file type field

Navigation

#1 by (1 votes)

2

I have a form with fields of type text and file :

<form id="first-setup" method="post" enctype="multipart/form-data" data-toggle="validator">
    <input type="hidden" id="userkey" value="{userKey}">

    <label for="input-firstname">Nome</label>
    <input id="input-firstname" name="input-firstname" data-minlength="2" data-error="Desculpe, seu nome deve possuir no mínimo 2 dígitos." type="text" class="form-control" required>

    <label for="input-surname">Sobrenome</label>
    <input id="input-surname" name="input-surname" data-minlength="2" data-error="Desculpe, seu sobrenome deve possuir no mínimo 2 dígitos." type="text" class="form-control" required>
                                             [...]
    <label for="input-picture">Foto de perfil</label>
    <input id="input-picture" name="input-picture" type="file" class="filestyle" data-iconName="fa fa-spaced fa-folder-open-o" data-input="false" data-buttonText="Envie uma foto de perfil">

    <button id="button-submit" class="btn btn-warning" type="submit">Concluir <i class="fa fa-spaced fa-arrow-circle-o-right"></i></button>
</form>

I use ajax to send it:

$('#button-submit').click(function(e) {
    e.preventDefault();
    // Correção de bug do bootstrap-validator
    // Bug relatado: envia o formulário mesmo com o input[submit] desativado (disabled=true) - ou seja
    // com erros de validação nos valores.
    var disabled = $(this).hasClass('disabled');
    if (disabled) return false;

    var firstname = $('#input-firstname').val(),
        surname   = $('#input-surname').val(),
        fullname  = $('#input-fullname').val(),
        birthdate = $('#input-birthdate').val(),
        city      = $('#input-city').val(),
        bgfile    = $('#input-background').val(),
        picfile   = $('#input-picture').val();

    // validações e eventos na view

    var form = $('#first-setup').serialize();
    $.ajax({
        url: '../application/controller/class.FirstSetupController.php',
        dataType: 'json',
        data: form,
    })
    .done(function(data) {
        console.log(data);
    })
    .fail(function(data) {
        console.log(data);
    });
});

The problem is that in php, if I make a if (isset($_FILES["input-picture"])) it returns me false , only recognizing the input[type=text] of the form.

I have already checked the php settings ( file_uploads , post_max_size and upload_max_file_size ) and are ok, my .htaccess too.

I tried to use the solutions of other similar questions but none solved this problem.

php

asked by anonymous 18.04.2015 / 21:34

1 answer

Check if you have the string and include your tags How to capture hardware id

score 1 · Accepted Answer

The jQuery.ajax does not support uploading if it does not use File API , so I believe it converts input-surname to POST (then on the server you get $_POST['input-surname'] ).

You can use the File API to upload, using $_POST instead of $_FILE :

Javascript:

var form = $('#first-setup').serialize();
var file = $('#input-surname').get(0).files[0];
var reader = new FileReader();
reader.onload = function (event) {
    var dados = event.target.result;
    var nome = document.getElementById('fileBox').files[0].name; //Should be 'picture.jpg'

    form.dataFile = dados;
    form.dataName = nome;

    $.ajax({
        url: '../application/controller/class.FirstSetupController.php',
        dataType: 'json',
        data: form,
    })
    .done(function(data) {
        console.log(data);
    })
    .fail(function(data) {
        console.log(data);
    });
};

PHP:

<?php
$dataFile = $_POST['dataFile'];
$dataName = $_POST['dataName'];

$fp = fopen('upload/' . $dataName, 'w');
fwrite($fp, $dataFile);
fclose($fp);