通过post方法将日期值发送到ajax的php进程

Question

I'm using php and ajax to upload multiples files with progress bar animation Everything work well, except I can't get a date value with Post method this code return empty variable

$expire = $_POST['expire'];

I tried to change the order of reading the value of $expire from $_POST['expire'] But I always get an empty value !

Here is my import.php (contains form to upload multple files) :

<input type="file" name="file[]" id="file" required multiple accept="application/pdf" />
<input type="date" name="expire" class="form-control" min="<?php echo date('Y-m-d') ?>" />
<button type="submit" id="submit" name="submit" class="btn btn-success" style="width:100%">
   Commencer <i class="fa fa-upload"></i>
</button>

And it contains te ajax code to call upload.php process

document.getElementById('submit').addEventListener('click', function(e){
    e.preventDefault();
    var f = document.getElementById('file'),
        pb = document.getElementById('progressbar'),
        pt = document.getElementById('progressbar-text'),
        btn = document.getElementById('submit');

    btn.innerHTML = "Chargement en cours …";
    btn.disabled = true;    

    app.uploader({
        files: f,
        progressBar: pb,
        progressText: pt,
        processor: 'upload.php',

        finished: function(data){
            //

        },

        error: function() {
            alert('Erreur ! veuillez réessayer SVP');
        }
    });


});

this is my upload.php

phpheader('Content-Type: application/json');


    $allowed = ['pdf'];

    $succeeded = [];
    $failed_move = [];
    $failed_ext = [];
    $failed_bdd = [];
    $failed_name = [];

    if(!empty($_FILES['file'])) {
        $expire = $_POST['expire'];

        include '../config/config.php';
        foreach($_FILES['file']['name'] as $key => $name){

            if(file_exists('../pdf/'.$name)) {
                $failed_name[] = array(
                    'name' => $name
                );
            } else {
                $tmp = $_FILES['file']['tmp_name'][$key];
                $code = explode('.', $name);
                $ext = strtolower(end($code));

                if (in_array($ext, $allowed) === true) {
                    if (move_uploaded_file($tmp, '../pdf/'.$name)) {

                        if (addPdf($code['0'], $expire)) {
                            $succeeded[] = array(
                                'name' => $name
                            );
                        } else {
                            $failed_bdd[] = array(
                                'name' => $name
                            );
                            unlink('../pdf/'.$name);
                        }
                    } else {
                        $failed_move[] = array(
                            'name' => $name
                        );
                    }
                } else {
                    $failed_ext[] = array(
                        'name' => $name
                    );
                }
            }
        }
    }

    if (!empty($_POST['ajax'])){
        echo json_encode(array(
            'succeeded' => $succeeded,
            'failed_move' => $failed_move,
            'failed_ext' => $failed_ext,
            'failed_bdd' => $failed_bdd,
            'failed_name' => $failed_name
        ));
    }

Answer 1

Here you go. I have modified your code so it includes the value of the input with ID 'expire'. You'll have to modify the HTML code as well as your expire input has no ID attached to it.

<input type="file" name="file[]" id="file" required multiple accept="application/pdf" />
<input type="date" name="expire" id="expire" class="form-control" min="<?php echo date('Y-m-d') ?>" />
<button type="submit" id="submit" name="submit" class="btn btn-success" style="width:100%">Commencer <i class="fa fa-upload"></i>

upload.js

var app = app || {};

(function(o) {
    "use strict";

    // private methods 
    var ajax, getFormData, setProgress;

    ajax = function(data) {
        var xmlhttp = new XMLHttpRequest(), uploaded;

        xmlhttp.addEventListener('readystatechange', function(){
            if(this.readyState === 4){
                if(this.status === 200){
                    uploaded = JSON.parse(this.response);
                    if(typeof o.options.finished === 'function') {
                        o.options.finished(uploaded);
                    }
                } else {
                    if(typeof o.options.error === 'function') {
                        o.options.error();
                    }
                }



            } 
        });

        xmlhttp.addEventListener('progress', function(event) {
            var percent;
            if(event.lengthComputable === true){
                percent = Math.round((event.loaded / event.total) * 100);
                setProgress(percent);
            }
        });

        xmlhttp.open('post', o.options.processor);
        xmlhttp.send(data);
    }

    getFormData = function(source, expire) {
        var data = new FormData(), i;

        for (i = 0; i < source.length; i++) {
           data.append('file[]', source[i]);
        }

        data.append('ajax', true);
        data.append('expire', expire);



        return data;
    };

    setProgress = function(value){
        if(o.options.progressBar !== undefined){
            o.options.progressBar.style.width = value ? value + '%' : 0;
        }

        if(o.options.progressText !== undefined){
            o.options.progressText.innerText = value ? value + '%' : '';
        }
    };

    o.uploader = function(options) {
        o.options = options;

        if(o.options.files !== undefined){
            ajax(getFormData(o.options.files.files, o.options.expire.value));
        }
    };
}(app));

Ajax code:

document.getElementById('submit').addEventListener('click', function(e){
    e.preventDefault();
    var f = document.getElementById('file'),
        pb = document.getElementById('progressbar'),
        pt = document.getElementById('progressbar-text'),
        btn = document.getElementById('submit'),
        expire = document.getElementById('expire');


    btn.innerHTML = "Chargement en cours …";
    btn.disabled = true;    

    app.uploader({
        files: f,
        progressBar: pb,
        progressText: pt,
        processor: 'upload.php',
        expire: expire,


        finished: function(data){
            //

        },

        error: function() {
            alert('Erreur ! veuillez réessayer SVP');
        }
    });


});