Estiliza pagina de upload externo - responsiva (novo47)
This commit is contained in:
rodrigo committed
1 parent
05cd7b9c79
commit
631afa1c46
15 files changed
+1818
-24
No files matched your search
+245
@@ -0,0 +1,245 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="pt-BR">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Upload de Documentos</title>
|
||||
<style>
|
||||
body { font-family: Arial, sans-serif; margin: 20px; }
|
||||
.upload-form { max-width: 500px; margin: 0 auto; padding: 20px; background: #fff; }
|
||||
.button { padding: 10px 20px; background: #4CAF50; color: white; border: none; }
|
||||
.preview { max-width: 100%; margin: 20px 0; }
|
||||
.preview img { max-width: 100%; }
|
||||
#result { display: none; }
|
||||
.error { color: red; }
|
||||
select { width: 100%; padding: 8px; margin-bottom: 10px; }
|
||||
</style>
|
||||
<!-- jQuery primeiro -->
|
||||
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
|
||||
<!-- jQuery UI depois -->
|
||||
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>
|
||||
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
|
||||
<!-- Fancybox por último -->
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.js"></script>
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="upload-form">
|
||||
<h2>Upload de Documentos</h2>
|
||||
<?php
|
||||
// Debug de inicialização
|
||||
echo "<!-- Debug: Iniciando página de upload -->\n";
|
||||
require_once 'config.php';
|
||||
|
||||
if ($conn->connect_error) {
|
||||
echo "<div class='error'>Erro de conexão: " . $conn->connect_error . "</div>";
|
||||
} else {
|
||||
echo "<!-- Debug: Conexão OK -->\n";
|
||||
}
|
||||
?>
|
||||
<form action="process.php" method="post" enctype="multipart/form-data" id="uploadForm">
|
||||
<p>
|
||||
<label>Cliente:</label><br>
|
||||
<select name="client_id" required>
|
||||
<?php
|
||||
require_once 'config.php';
|
||||
|
||||
// Debug de conexão
|
||||
if (!$conn) {
|
||||
die("Erro de conexão: " . mysqli_connect_error());
|
||||
}
|
||||
|
||||
// Debug da tabela
|
||||
$check_table = $conn->query("SHOW TABLES LIKE 'clients'");
|
||||
if ($check_table->num_rows == 0) {
|
||||
die("Tabela 'clients' não encontrada!");
|
||||
}
|
||||
|
||||
// Verificar estrutura da tabela
|
||||
$check_columns = $conn->query("DESCRIBE clients");
|
||||
if (!$check_columns) {
|
||||
die("Erro ao verificar estrutura da tabela: " . $conn->error);
|
||||
}
|
||||
|
||||
// Contar registros
|
||||
$count = $conn->query("SELECT COUNT(*) as total FROM clients");
|
||||
$total = $count->fetch_assoc()['total'];
|
||||
echo "<!-- Total de clientes: " . $total . " -->";
|
||||
|
||||
// Query com validação e debug
|
||||
$sql = "SELECT id, name FROM clients WHERE 1=1";
|
||||
$result = $conn->query($sql);
|
||||
|
||||
if (!$result) {
|
||||
die("Erro na query: " . $conn->error);
|
||||
}
|
||||
|
||||
// Exibir clientes com verificação
|
||||
echo "<option value=''>Selecione um cliente</option>";
|
||||
if ($result->num_rows > 0) {
|
||||
while ($row = $result->fetch_assoc()) {
|
||||
echo "<option value='" . $row['id'] . "'>" .
|
||||
htmlspecialchars($row['name']) . "</option>";
|
||||
}
|
||||
} else {
|
||||
echo "<option value='' disabled>Nenhum cliente encontrado</option>";
|
||||
echo "<!-- Query executada: " . $sql . " -->";
|
||||
}
|
||||
?>
|
||||
</select>
|
||||
</p>
|
||||
<p>
|
||||
<label>Selecione o documento:</label><br>
|
||||
<input type="file" name="document[]" accept="image/*" required multiple>
|
||||
<small style="color: #666;">Você pode selecionar várias imagens para unir em um único documento</small>
|
||||
</p>
|
||||
<p>
|
||||
<label>Tipo de documento:</label><br>
|
||||
<select name="doc_type" required>
|
||||
<option value="cpf">CPF</option>
|
||||
<option value="rg">RG</option>
|
||||
<option value="cnh">CNH</option>
|
||||
</select>
|
||||
</p>
|
||||
<input type="submit" value="Processar" class="button">
|
||||
</form>
|
||||
|
||||
<div id="uploadStatus" style="margin: 10px 0; padding: 10px;"></div>
|
||||
<div id="debug" style="margin: 10px 0; padding: 10px; background: #f5f5f5; display: none;"></div>
|
||||
|
||||
<div id="error" class="error">
|
||||
<?php
|
||||
if (isset($conn) && !$result) {
|
||||
echo "Erro ao buscar clientes: " . $conn->error;
|
||||
}
|
||||
?>
|
||||
</div>
|
||||
<p><a href="index.php?page=doc_list">Ver documentos processados</a></p>
|
||||
</div>
|
||||
|
||||
<div id="result">
|
||||
<h3>Resultado do Processamento:</h3>
|
||||
<div class="preview">
|
||||
<h4>Documento Original:</h4>
|
||||
<img id="originalImage" src="" alt="Original">
|
||||
</div>
|
||||
<div class="preview">
|
||||
<h4>Documento Processado:</h4>
|
||||
<img id="processedImage" src="" alt="Processado">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="error" class="error"></div>
|
||||
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
const uploadForm = document.getElementById('uploadForm');
|
||||
const fileInput = uploadForm.querySelector('input[type="file"]');
|
||||
const debugDiv = document.getElementById('debug');
|
||||
const statusDiv = document.getElementById('uploadStatus');
|
||||
|
||||
// Inicializar autocomplete do jQuery UI
|
||||
$("#search").autocomplete({
|
||||
source: function(request, response) {
|
||||
$.getJSON("clientes/autocomplete.php", {
|
||||
term: request.term
|
||||
}, response);
|
||||
},
|
||||
minLength: 2,
|
||||
select: function(event, ui) {
|
||||
if (ui.item) {
|
||||
window.location.href = 'index.php?page=client_details&id=' + ui.item.id;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
fileInput.addEventListener('change', function(e) {
|
||||
const files = e.target.files;
|
||||
if (files.length > 0) {
|
||||
debugDiv.innerHTML = `${files.length} arquivo(s) selecionado(s)`;
|
||||
debugDiv.style.display = 'block';
|
||||
}
|
||||
});
|
||||
|
||||
uploadForm.onsubmit = async (e) => {
|
||||
e.preventDefault();
|
||||
const formData = new FormData();
|
||||
|
||||
// Adicionar cada arquivo individualmente
|
||||
const files = fileInput.files;
|
||||
Array.from(files).forEach((file, index) => {
|
||||
formData.append('document[]', file);
|
||||
});
|
||||
|
||||
// Adicionar outros campos
|
||||
formData.append('client_id', document.querySelector('select[name="client_id"]').value);
|
||||
formData.append('doc_type', document.querySelector('select[name="doc_type"]').value);
|
||||
|
||||
debugDiv.style.display = 'block';
|
||||
debugDiv.innerHTML = 'Iniciando upload...<br>';
|
||||
|
||||
try {
|
||||
const response = await fetch('index.php?page=temp_upload', {
|
||||
method: 'POST',
|
||||
body: formData
|
||||
});
|
||||
|
||||
debugDiv.innerHTML += `Status: ${response.status}<br>`;
|
||||
const text = await response.text();
|
||||
debugDiv.innerHTML += `Resposta raw: ${text}<br>`;
|
||||
|
||||
const result = JSON.parse(text);
|
||||
|
||||
if (result.success) {
|
||||
debugDiv.innerHTML += 'Upload bem sucedido, abrindo editor...<br>';
|
||||
localStorage.setItem('tempImage', result.imageUrl);
|
||||
localStorage.setItem('tempClientId', formData.get('client_id'));
|
||||
localStorage.setItem('tempDocType', formData.get('doc_type'));
|
||||
localStorage.setItem('fileCount', result.fileCount);
|
||||
localStorage.setItem('allImages', JSON.stringify(result.allImages));
|
||||
|
||||
jQuery.fancybox.open({
|
||||
src: 'editor.php',
|
||||
type: 'iframe',
|
||||
opts: {
|
||||
baseClass: "fancybox-custom-layout",
|
||||
width: '90%',
|
||||
height: '90%',
|
||||
margin: [20, 0],
|
||||
padding: 0,
|
||||
autoSize: false,
|
||||
fitToView: true,
|
||||
touch: false,
|
||||
afterLoad: function(instance, current) {
|
||||
current.$iframe.css({
|
||||
'max-width': '100%',
|
||||
'max-height': '90vh',
|
||||
'overflow': 'auto' // Permite rolagem dentro do iframe
|
||||
});
|
||||
},
|
||||
afterClose: () => {
|
||||
localStorage.removeItem('tempImage');
|
||||
localStorage.removeItem('tempClientId');
|
||||
localStorage.removeItem('tempDocType');
|
||||
}
|
||||
}
|
||||
});
|
||||
} else {
|
||||
throw new Error(result.message);
|
||||
}
|
||||
} catch (error) {
|
||||
debugDiv.innerHTML += `Erro: ${error.message}<br>`;
|
||||
statusDiv.innerHTML = `Erro: ${error.message}`;
|
||||
}
|
||||
};
|
||||
});
|
||||
|
||||
// Receber mensagem do iframe
|
||||
window.addEventListener('message', function(event) {
|
||||
if (event.data.type === 'documentSaved') {
|
||||
$.fancybox.close();
|
||||
window.location.href = 'index.php?page=doc_list&status=success';
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in new issue
Block a user