Bootstrap 引导模式上载文件

h6my8fg2  于 2022-12-07  发布在  Bootstrap
关注(0)|答案(2)|浏览(162)

我在使用bootstrap模式上传文件时遇到问题这是我的模式代码

<div id="myModalAtiv" class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="alert alert-info" id="myModalLabel"><span class="glyphicon glyphicon-pencil"></span> Edição de Atividades</h4>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal" id="formacoes" enctype="multipart/form-data">
                        <div class="form-group">
                            <input type="hidden" name="idformacao" id="idformacao">
                        </div>
                        <div class="form-group">
                            <label for="recipient-name" class="control-label">Escola:</label>
                            <input class="form-control" name="escola" id="escola" disabled="true">
                        </div>
                        <div class="form-group">
                            <label for="recipient-name" class="control-label">Nome:</label>
                            <input class="form-control" name="nome" id="nome">
                        </div>
                        <div class="form-group">
                            <label for="recipient-name" class="control-label">Data:</label>
                            <div class="input-group date" id="datetimePicker">
                            <input type="text" class="form-control" name="inicio" id="inicio" />
                            <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span>
                        </div>
                        </div>
                        <div class="form-group">
                            <label for="recipient-name" class="control-label">Horas:</label>
                            <input class="form-control" name="horas" id="horas">
                        </div>
                        <div class="form-group">
                            <label for="recipient-name" class="control-label">Local:</label>
                            <input class="form-control" name="local" id="local">
                        </div>
                        <div class="form-group">
                            <label for="recipient-name" class="control-label">Destinatários:</label>
                            <input class="form-control" name="destinatarios" id="destinatarios">
                        </div>
                        <div class="form-group">
                            <label for="recipient-name" class="control-label">Data Limite:</label>
                            <div class="input-group date" id="dataLimitePicker">
                            <input type="text" class="form-control" name="dataLimite" id="dataLimite" />
                            <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span>
                            </span>
                            </div>
                        </div>
                        <div class="fileupload fileupload-new" data-provides="fileupload">
                        <div class="input-append">
                          <div class="uneditable-input span3"><i class="icon-file fileupload-exists"></i> 
                            <span class="fileupload-preview"></span></div>
                            <span class="btn btn-file"><input type="file" name="fileToUpload" id="fileToUpload" /></span>
                        </div>
                        </div>
                        <div class="modal-footer">
                            <button type="submit" class="btn btn-info">Atualizar</button>
                            <button type="button" class="btn btn-default"data-dismiss="modal">Fechar</button>
                        </div>     
                    </form>
            </div>
        </div><!-- End of Modal body -->
    </div><!-- End of Modal content -->

这是我 AJAX 函数用来发送表单

<script>
    $(document).ready(function () {
        $('#datetimePicker').datetimepicker({format: 'YYYY-MM-DD'});
        $('#dataLimitePicker').datetimepicker({format: 'YYYY-MM-DD'});
        $('#formacoes').formValidation({
            framework: 'bootstrap',
            icon: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {
                nome: {
                    validators: {
                        notEmpty: {
                            message: 'Tem de definir alguma formação'
                        }
                    }
                }
            },inicio: {
                    validators: {
                        notEmpty: {
                                message: 'Data inicial obrigatória'
                            },
                        date: {
                            format: 'YYYY-MM-DD',
                            message: 'Data inicial inválida'
                        }
                    }
                },
                dataLimite: {
                    validators: {
                        notEmpty: {
                                message: 'Data limite obrigatória'
                            },
                        date: {
                            format: 'YYYY-MM-DD',
                            message: 'Data limite inválida'
                        }
                    }
                }
        }).on('success.form.fv', function (e) {
            e.preventDefault();
            var $form = $(e.target),
                    fv = $form.data('formValidation');
            $.ajax({
                url: 'updates.php',
                type: 'POST',
                data: $form.serialize(),
                success: function (response) {
                    console.log(response.status);
                    if (response.status === 'success') {
                        $("#myModalAtiv").modal('hide');
                        $('#respostas .modal-title').html('Sucesso');
                        $('#respostas .modal-body').html('Informação: ' + response.message);
                        $('#respostas').modal('show');
                        $('#respostas').on('hidden.bs.modal', function () {
                            window.location.reload(true);
                        });
                    }
                }
            });
        });
    });

看起来一切正常,但是当我试图将from发送到我的函数时,它说
注意:未定义的索引:要上载的文件
这是我的php函数

$idformacao= filter_input(INPUT_POST, 'idformacao');
if ($idformacao != null) {
    echo "aqui";
    $userid = filter_input(INPUT_POST, 'userid');
    $nome = filter_input(INPUT_POST, 'nome');
    $inicio = filter_input(INPUT_POST, 'inicio');
    $horas = filter_input(INPUT_POST, 'horas');
    $local = filter_input(INPUT_POST, 'local');
    $destinatarios = filter_input(INPUT_POST, 'destinatarios');
    $dataLimite = filter_input(INPUT_POST, 'dataLimite');
    $uploaddir = $_SERVER['DOCUMENT_ROOT'] . '/uploads';
    $uploadfile = $uploaddir . '/' . basename($_FILES['fileToUpload']['name']);
    if (move_uploaded_file($_FILES['fileToUpload']['tmp_name'], $uploadfile)) {
    $target_path = "/uploads/" . basename($_FILES['fileToUpload']['name']);
    $ret = $ebspma->updateFormacoes($idformacao, $nome, $inicio, $horas, $local, $destinatarios, $dataLimite,$target_path);
    }
    echo json_encode($ret); 
}

这是我遇到错误的地方

$uploadfile = $uploaddir . '/' . basename($_FILES['fileToUpload']['name']);
hfsqlsce

hfsqlsce1#

e.preventDefault();
    var fileToUpload= $('#fileToUpload')[0].files[0];
    var idformacao = $("#idformacao").val();
    var formData = new FormData(this);
    formData.append('fileToUpload', fileToUpload);
    formData.append('idformacao', idformacao);
//use this same format to append other of your fields

    $.ajax({
        type:'POST',
        url: 'updates.php',
        data:formData,
        cache:false,
        contentType: false,
        processData: false,
        success:function(response){
        //You can continue with your response status code here
         }

希望这对你有用。

vlurs2pr

vlurs2pr2#

在模态第一行末尾添加data-bs-focus=“false”

id="myModalAtiv" class="modal fade bs-example-modal-lg" tabindex="-1"
role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-bs-focus="false"

相关问题