<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<!--Main container-->
<div class="container bg-light">
<div class="row">
mein Content
</div>
<div class="row">
<form class="form-horizontal" action="" method="post" name="frmCSVImport" id="frmCSVImport" enctype="multipart/form-data">
<div class="input-row">
<button type="button" class="btn btn-info" data-toggle="modal" data-target="#uploadModal">Upload Datei</button>
<br />
</div>
</form>
</div>
<div class="row">
<button type='submit' class="btn btn-info" onclick='uploadstatus()'>Test Button <b>AUßERHALB</b> Modal</button>
</div>
</div>
<!-- Modal File Upload-->
<div id="uploadModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">File upload form</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<!-- Form -->
<form method='post' action='' enctype="multipart/form-data">
<!-- MAX_FILE_SIZE muss vor dem Dateiupload Input Feld stehen -->
<input type="hidden" name="MAX_FILE_SIZE" value="30000" />
Select file : <input type='file' name='file' id='file' class='form-control' accept=".csv" ><br>
<button type="button" class="btn btn-light" data-dismiss="modal">Cancel</button>
<button type='submit' class='btn btn-info' name="import" value='Upload' id='btn_upload'>Upload</button>
<button type='submit' class="btn btn-danger" onclick='uploadstatus()'>Test Button <b>INNERHALB</b> Modal</button>
</form>
<!-- Preview-->
<div id='preview'></div>
</div>
</div>
</div>
</div>
<!-- END -- Modal -->
</body>
</html>
function uploadstatus()
{
var form_data = new FormData();
form_data.append('file', file_data);
alert(form_data);
$.ajax({
url: 'upload.php', // point to server-side PHP script
dataType: 'text', // what to expect back from the PHP script, if anything
cache: false,
contentType: false,
processData: false,
data: form_data,
type: 'post',
beforeSend: function(){
// zeige Spinner
// $("#spinner").show();
alert("Start");
},
success: function(result){
},
complete: function(){
// Hide Spinner
// $("#spinner").hide();
alert("Ende");
}
});
};
