CHANGE BACKGROUND WITH INPUT TYPE FILE

0

Good afternoon, I created a program to create commands and I would like to use the imput type File to select an image and leave it as a background for those commands.

HTML

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>
    </title>
    <link rel="stylesheet" type="text/css" href="style.css" />
    <script src="bt.js"></script>
    <script>function gerarComanda()
        {
            try
            {
                var xPrefixo = document.getElementById('txtPrefixo').value;
                var xFinal = document.getElementById('txtTextoFinal').value;
                var xIni = document.getElementById('txtInicial').value;
                var xFim = document.getElementById('txtFinal').value;
                var xTamanho = document.getElementById('txtTamanho').value;
                var xAltura = document.getElementById('txtAltura').value;
                var xTexto = document.getElementById('txtTexto').value;
                var xHTML = ''
                for (var i = parseInt(xIni) ; i <= parseInt(xFim) ; i++)
                {
                    xHTML += '<div class="comanda" style=\"width:' + xTamanho + 'cm;height:' + xAltura + 'cm;\">';
                    var xComanda = xPrefixo + ('000' + i).substr(-3);
                    xHTML += '<div class="divTexto">' + xTexto + '</div>';
                    xHTML += '<img src="http://webservices.saurus.net.br/retCodigo.aspx?tpCodigo=barras&vCodReal='+xComanda+'"/>';
                    xHTML += '<div class="divTextoComanda">' + ('000' + i).substr(-3) + '</div>';
                    xHTML += '<div class="divTextoFinal">' + xFinal + '</div>';
                    xHTML += '</div>';
                }

                divComanda.innerHTML = xHTML;

            } catch (e)
            {
                alert('Erro ao Gerar a Etiqueta: ' + e.message);
            }
        }</script>
    <style>


        @page {
            size: A4;
        }

        @media print {

            body {
                background: transparent;
            }


            .divCampos {
                display: none;
            }

            .divComanda {
                display: block;
            }
        }
    </style>
</head>
<body>
    <form method="post" action="./comandas" id="form1">
        <div class="aspNetHidden">
            <input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="1M0wDGBzGcLaQDxgDsZVj4ICv+OwQKno0FfRD2KphTfPHuPiOKgJv+55pbj8QdDX+LluW59X8IdGqtfqK4/zwhH4wW4Zb9AQ8IdZ2PjTV5I=" />
        </div>
        <div class="aspNetHidden">
            <input type="hidden" name="__VIEWSTATEGENERATOR" id="__VIEWSTATEGENERATOR" value="4BE7D370" />
            <input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="FixubUgwIN95o6NwqlO5SnG/Xul0oMmsOUVsHJCDKQkDsHFPgPOq4fB+JcSfAQUfE7Fm93FcFeUnzMCTX55X+ncN8CMcUdTw3I24uWkbTJVLThHTCYaP5iXGiKrL+1TOhn4TMrvtBvmfnuwvuwhRQ1p59sPPelQCFcfijEBC34nTXOhnUDvy4zNk/IYfneowbohHVhONbJDwLRW+yFLp6mwKCTgCEEq3pojN7zSOuJLSZWkmctklli0tW/o3YnH6qJg+Fl7AJ6WK1vyVLq4garg2w3nM8mdh9L2nAbYJUJg=" />
        </div>
        <div id="divCampos" class="divCampos">
            <table>
                <tr>
                    <td>Prefixo</td>
                    <td>TextFinal</td>
                    <td>Inicial</td>
                    <td>Final</td>
                    <td>Comprimento (cm)</td>
                    <td>Altura (cm)</td>
                    <td>Texto</td>
                    <td></td>
                    <td></td>
                </tr>
                <tr>
                    <td>
                        <input name="txtPrefixo" type="text" value="0999" id="txtPrefixo" style="width:70px;" />
                    </td>
                    <td>
                        <input name="txtTextoFinal" type="text" value="www.saurus.com.br" id="txtTextoFinal" style="width:200px;" />
                    </td>
                    <td>
                        <input name="txtInicial" type="text" value="1" id="txtInicial" style="width:50px;" />
                    </td>
                    <td>
                        <input name="txtFinal" type="text" value="10" id="txtFinal" style="width:50px;" />
                    </td>
                    <td>
                        <input name="txtTamanho" type="text" value="7" id="txtTamanho" style="width:150px;" />
                    </td>
                    <td>
                        <input name="txtAltura" type="text" value="4,5" id="txtAltura" style="width:150px;" />
                    </td>
                    <td>
                        <input name="txtTexto" type="text" value="Comanda" id="txtTexto" style="width:250px;" />
                    </td>
                    <td>
                        <input type="submit" name="btnGerar" value="Gerar" onclick="gerarComanda(); return false;" id="btnGerar" />
                    </td>
                    <td>
                        <input type="submit" name="btnImp" value="Imprimir" onclick="window.print(); return false;" id="btnImp" />
                    </td>
                    <td>
                        <input type="file" id="arquivo"/>
                        </td>

                </tr>
            </table>
        </div>
        <div id="divComanda" class="divComanda"></div>
    </form>
</body>
</html>



CSS
.comanda {
    border: 1px solid #555;
    background-size: cover;
    background-image: url('');
    position: relative;
    float: left;
    margin-right: 1cm;
    margin-top: 1cm;
}
    .comanda img {
        float: left;
        width: 80%;
        margin-left: 10%;
        clear: left;
    }

.divTexto {
    position: relative;
    float: left;
    width: 100%;
    border-bottom: 1px solid #555;
    text-align: center;
    font-size: 30px;
    text-align: center;
    margin-bottom: 10px;
}

.divTextoComanda {
    position: relative;
    float: left;
    width: 100%;
    text-align: center;
    font-size: 25px;
    line-height: 1cm;
    text-align: center;
}

.divTextoFinal {
    position: relative;
    float: left;
    width: 100%;
    margin-top: 10px;
    border-top: 1px solid #555;
    text-align: center;
    font-size: 20px;
    line-height: 1cm;
    text-align: center;
}
@page {
    size: A4;
}

@media print {

    body {
        background: transparent;
    }


    .divCampos {
        display: none;
    }

    .divComanda {
        display: block;
    }
}
    
asked by anonymous 12.11.2018 / 15:42

0 answers