140 lines
2.9 KiB
PHP
140 lines
2.9 KiB
PHP
<?php
|
|
//index.php
|
|
|
|
?>
|
|
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>How to Upload a File using Dropzone.js with PHP</title>
|
|
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
|
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
|
|
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.5.1/dropzone.css" />
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.5.1/dropzone.js"></script>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<br />
|
|
<h3 align="center">How to Upload a File using Dropzone.js with PHP</h3>
|
|
<br />
|
|
|
|
<form action="upload.php" class="dropzone" id="dropzoneFrom">
|
|
|
|
</form>
|
|
|
|
|
|
</form>
|
|
<br />
|
|
<br />
|
|
<div align="center">
|
|
<button type="button" class="btn btn-info" id="submit-all">Upload</button>
|
|
</div>
|
|
<br />
|
|
<br />
|
|
<div id="preview"></div>
|
|
<br />
|
|
<br />
|
|
</div>
|
|
</body>
|
|
</html>
|
|
|
|
<script>
|
|
|
|
$(document).ready(function(){
|
|
|
|
Dropzone.options.dropzoneFrom = {
|
|
autoProcessQueue: false,
|
|
acceptedFiles:".png,.jpg,.gif,.bmp,.jpeg",
|
|
init: function(){
|
|
var submitButton = document.querySelector('#submit-all');
|
|
myDropzone = this;
|
|
submitButton.addEventListener("click", function(){
|
|
myDropzone.processQueue();
|
|
});
|
|
this.on("complete", function(){
|
|
if(this.getQueuedFiles().length == 0 && this.getUploadingFiles().length == 0)
|
|
{
|
|
var _this = this;
|
|
_this.removeAllFiles();
|
|
}
|
|
list_image();
|
|
});
|
|
},
|
|
};
|
|
|
|
list_image();
|
|
|
|
function list_image()
|
|
{
|
|
$.ajax({
|
|
url:"upload.php",
|
|
success:function(data){
|
|
$('#preview').html(data);
|
|
}
|
|
});
|
|
}
|
|
|
|
$(document).on('click', '.remove_image', function(){
|
|
var name = $(this).attr('id');
|
|
$.ajax({
|
|
url:"upload.php",
|
|
method:"POST",
|
|
data:{name:name},
|
|
success:function(data)
|
|
{
|
|
list_image();
|
|
}
|
|
})
|
|
});
|
|
|
|
});
|
|
</script>
|
|
|
|
|
|
upload.php
|
|
|
|
|
|
<?php
|
|
|
|
//upload.php
|
|
|
|
$folder_name = 'upload/';
|
|
|
|
if(!empty($_FILES))
|
|
{
|
|
$temp_file = $_FILES['file']['tmp_name'];
|
|
$location = $folder_name . $_FILES['file']['name'];
|
|
move_uploaded_file($temp_file, $location);
|
|
}
|
|
|
|
if(isset($_POST["name"]))
|
|
{
|
|
$filename = $folder_name.$_POST["name"];
|
|
unlink($filename);
|
|
}
|
|
|
|
$result = array();
|
|
|
|
$files = scandir('upload');
|
|
|
|
$output = '<div class="row">';
|
|
|
|
if(false !== $files)
|
|
{
|
|
foreach($files as $file)
|
|
{
|
|
if('.' != $file && '..' != $file)
|
|
{
|
|
$output .= '
|
|
<div class="col-md-2">
|
|
<img src="'.$folder_name.$file.'" class="img-thumbnail" width="175" height="175" style="height:175px;" />
|
|
<button type="button" class="btn btn-link remove_image" id="'.$file.'">Remove</button>
|
|
</div>
|
|
';
|
|
}
|
|
}
|
|
}
|
|
$output .= '</div>';
|
|
echo $output;
|
|
|
|
?>
|