Skip to content

Instantly share code, notes, and snippets.

@falmesino

falmesino/index.html

Created September 27, 2017 06:01
Show Gist options
  • Save falmesino/80dd36264297e26727f01e00043205e8 to your computer and use it in GitHub Desktop.
Save falmesino/80dd36264297e26727f01e00043205e8 to your computer and use it in GitHub Desktop.
Download ZIP
Bootstrap AJAX PHP File Upload With Progress Bar
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<!-- SUMBER MASALAH : https://web.facebook.com/groups/35688476100/permalink/10155582769201101/ -->
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<title>Mukhlis</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3">
<h1>File Upload</h1>
<form id="formUploadVideoLocal" action="http://localhost/playground/mukhlis/proses.php" enctype="multipart/form-data" method="post">
<div class="form-group">
<label>File</label>
<input type="file" name="linkVideo" id="linkVideo" accept=".mp4" class="form-control" />
</div><!--/ .form-group -->
<div class="form-group">
<input type="submit" class="btn btn-primary btn-block" value="Upload">
</div><!--/ .form-group -->
<div class="form-group">
<div class="progress">
<div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;">
0%
</div><!--/ .progress-bar -->
</div><!--/ .progress -->
</div><!--/ .form-group -->
</form>
</div><!--/ .col-xs-12 -->
</div><!--/ .row -->
</div><!--/ .container -->
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!-- Functionality JavaScript -->
<script>
$('#formUploadVideoLocal').submit(function(e){
e.preventDefault();
console.log('Submit button clicked');
var el = $(this);
var inputURI = el.attr('action');
var inputFile = el.find('input[type="file"]');
var progressBar = el.find('.progress-bar');
var fileToUpload = inputFile[0].files[0];
var formData = new FormData(this);
console.log('FileToUpload');
console.log(fileToUpload);
if(fileToUpload !== undefined){
console.log('FormData');
console.log(formData);
console.log('Preparing to send request to ' + inputURI);
$.ajax({
type: 'POST',
url: inputURI,
data: formData,
contentType: false,
processData: false,
cache: false,
dataType: 'json',
encode: true,
beforeSend: function(jqXHR){
console.log('Sending request to ' + inputURI);
},
complete: function(jqXHR){
console.log('Request completed');
},
success: function(response){
console.log('Success!');
console.log(response);
},
xhr: function(){
var xhr = new XMLHttpRequest();
xhr.upload.addEventListener('progress', function(e){
if(e.lengthComputable){
var percentComplete = Math.round((e.loaded / e.total) * 100);
console.log(percentComplete + '%');
progressBar.css({
width: percentComplete + '%'
});
progressBar.text(percentComplete + '%');
}
}, false);
return xhr;
}
}).done(function(data){
console.log('AJAX request done');
});
}else{
alert('Videonya pilih dulu, tot!');
}
return false;
});
</script>
</body>
</html>
Raw
proses.php
<?php
/**
* ./proses.php
*/
$output = array();
$output['status'] = 'FAIL';
$output['msg'] = '';
$output['data'] = array();
if(isset($_FILES)){
$output['status'] = 'SUCCESS';
$output['msg'] = 'Ada datanya';
$output['data'] = $_FILES;
}
echo json_encode($output, true);
/*
echo '<pre>';
print_r($_FILES);
echo '</pre>';
*/
exit();
?>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment