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