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

时间:2019-07-01 15:12:12

标签: javascript php html ajax

我正在使用php和ajax上传带有进度条动画的多个文件 一切正常,除了我无法使用Post方法获取日期值 此代码返回空变量

$expire

我试图更改从$_POST['expire']读取<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> 值的顺序 但是我总是得到一个空值!

这是我的import.php(包含用于上传多个文件的表单):


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');
        }
    });


});

它包含用于调用upload.php进程的ajax代码

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
        ));
    }

这是我的upload.php

{{1}}

1 个答案:

答案 0 :(得分:0)

您在这里。我已经修改了您的代码,因此它包含ID为'expire'的输入值。您必须修改HTML代码,并且到期输入中没有附加ID。

<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代码:

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');
        }
    });


});