DropZone.js - com varias arrays no form e com multiplos uploads - with Form Arrays and Multiple Uploads
<script src="js/dropzone.js"></script>
<link rel="stylesheet" href="css/dropzone.css">
<script>
Dropzone.options.myDropzone=
{
url: "SUAPAGINA",
paramName: "arquivo",
autoProcessQueue: false,
uploadMultiple: true,
parallelUploads: 5,
maxFiles: 5,
maxFilesize: 3,
acceptedFiles: 'image/*,application/pdf',
dictDefaultMessage: 'Arraste os arquivos para cá ou clique aqui',
dictFileTooBig: 'A imagem não pode ser maior que 3 MBs',
dictInvalidFileType: 'Apenas arquivos com terminação pdf, png, jpg e gif são aceitos',
dictCancelUpload: 'Cancelar o UPLOAD',
dictRemoveFile: '✖ Remover',
dictCancelUploadConfirmation: 'Tem certeza que quer cancelaro UPLOAD?',
dictMaxFilesExceeded: 'Você pode subir apenas 5 arquivos por vez',
addRemoveLinks: true,
init: function()
{
dzClosure = this; // Makes sure that 'this' is understood inside the functions below.
// for Dropzone to process the queue (instead of default form behavior):
// Necessaria função abaixo pois o Dropzone não esta parando em Erros como MaxFileSize e Accepeted File...
this.on("error", function(file, message, xhr) {
if (xhr == null) this.removeFile(file); // could choose to not remove file(s) on xhr error
//alert(message);
document.getElementById('erro').innerHTML="<p id='cpoErro'>"+message+"</p>";
exit();
});
document.getElementById("submit-all").addEventListener("click", function(e)
{
// Make sure that the form isn't actually being sent.
e.preventDefault();
e.stopPropagation();
if (document.getElementById("obra").value=='') document.getElementById('erro').innerHTML="<p id='cpoErro'>Obra é Obrigatório</p>";
else if (document.getElementById("inputString").value=='') document.getElementById('erro').innerHTML="<p id='cpoErro'>Fornecedores é Obrigatório</p>";
else if (document.getElementById("inputString_Desc").value=='') document.getElementById('erro').innerHTML="<p id='cpoErro'>Descrição é Obrigatório</p>";
else {
if (dzClosure.files.length) dzClosure.processQueue();
else $('#FormEnvia').submit();
}
});
//send all the form data along with the files:
this.on("sending", function(file, xhr, formData)
{
$('.pagamento').each(function(){
formData.append("pagamento[]", $(this).val());
});
$('.valor').each(function(){
formData.append("valor[]", $(this).val());
});
$('.status').each(function(){
formData.append("status[]", $(this).val());
});
formData.append("total_pagtos", $("#total_pagtos").val());
formData.append("id_obra", $("#obra").val());
formData.append("descricao", $("#inputString_Desc").val());
formData.append("fornecedores", $("#inputString").val());
formData.append("obs", $("#obs").val());
});
this.on('success', function( file, resp ){
document.getElementById('form-sucesso').innerHTML=resp;
});
this.on("error", function (file, message) {
document.getElementById('form-sucesso').innerHTML=$(file.previewElement).addClass("dz-error").find('.dz-error-message').text(message.Message);
});
}
}
</script>
<!--========================================================
CONTENT
=========================================================-->
<form method='POST' action='SUAPAGINA' id='FormEnvia' enctype='multipart/form-data'>
<p id='chamada'>PAGAMENTO</p>
<div style='text-align:left;padding:12px 0 0 5%;'>
<table>
<tr>
<td>Vencimento</td><td>Valor</td><td>Pago?</td>
</tr>
<tr>
<td><input type='text' name='pagamento[]' placeholder='dd/mm/aaaa' required onkeyup='formataData(this)' maxlength='10' class='pagamento'>
<td><input type='text' name='valor[]' placeholder='0.00' required class='valor'></td>
<td><select name='status[]' class='status'><option value='A'>NÃO</option><option value='P'>SIM</option></select></td>
</tr>
</table>
</div>
<p></p>
<div id='newRow'></div>
<button id='addRow' type='button' class='btn btn-info' onclick="document.getElementById('total_pagtos').value= parseInt(document.getElementById('total_pagtos').value)+1"> [+] Pagamentos</button>
<p></p>
<p id='chamada'>NOTAS FISCAIS</p>
<p></p>
<div class='dropzone' id='myDropzone' style='border: 1px solid #808080;border-radius: 4px; box-sizing: border-box;margin-bottom:15px;'>
<div class='fallback'>
<input type='file' name='arquivo' multiple>
</div>
</div>
<div style='width:100%;text-align:center;'>
<input type='hidden' name='foi' value='2' />
<input type='hidden' name='total_pagtos' id='total_pagtos' value='1' />
<button type='submit' class='btn2' id='submit-all'>REGISTRAR</button>
</div>
<p></p>
<div id='erro'></div>
</form>
<script>
// add row
$("#addRow").click(function () {
var html = '';
html += '<div id="inputFormRow" style="border: 1px solid #808080;border-radius: 4px; box-sizing: border-box;margin-bottom:15px">';
html += '<div style="text-align:right;">';
html += '<button id="removeRow" type="button" class="btn btn-danger" onclick="document.getElementById(\'total_pagtos\').value=parseInt(document.getElementById(\'total_pagtos\').value)-1">✖</button>';
html += '</div>';
html += '<table><tr><td>Vencimento</td><td>Valor</td><td>Pago?</td></tr>';
html += '<tr>';
html += '<td><input type="text" name="pagamento[]" class="pagamento" placeholder="dd/mm/aaaa" autocomplete="off" onkeyup="formataData(this)" maxlength="10"></td>';
html += '<td><input type="text" name="valor[]" class="valor" placeholder="0.00" autocomplete="off"></td>';
html += '<td><select name="status[]" class="status"><option value="A">NÃO</option><option value="P">SIM</option></select></td>';
html += '</tr>';
html += '</table><p></p>';
html += '</div>';
$('#newRow').append(html);
});
// remove row
$(document).on('click', '#removeRow', function () {
$(this).closest('#inputFormRow').remove();
});
</script>
Comentários
Postar um comentário