Drag and drop with multiple file upload using php, javascript, html
<?php
if(isset($_POST['Submit'])){ //upload
$uploads_dir = 'img';
foreach ($_FILES["multifileselect"]["error"] as $key => $error) {
if ($error == UPLOAD_ERR_OK) {
$tmp_name = $_FILES["multifileselect"]["tmp_name"][$key];
$name = basename($_FILES["multifileselect"]["name"][$key]);
if (copy($tmp_name, "$uploads_dir/$name")){
echo "successfully uploaded =>". $name;
}else{
echo "Not Uploaded Files";
}
}
}
}?>
<html>
<head></head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" >
var globalFunctions = {};
globalFunctions.ddInput = function(elem) {
if ($(elem).length == 0 || typeof FileReader === "undefined") return;
var $fileupload = $('input[type="file"]');
var noitems = '<li class="no-items"><span class="blue-text underline">Browse</span> or drop here</li>';
var hasitems = '<div class="browse hasitems">Other files to upload? <span class="blue-text underline">Browse</span> or drop here</div>';
var file_list = '<ul class="file-list"></ul>';
var rmv = '<div class="remove"><i class="icon-close icons">x</i></div>'
$fileupload.each(function() {
var self = this;
var $dropfield = $('<div class="drop-field"><div class="drop-area"></div></div>');
$(self).after($dropfield).appendTo($dropfield.find('.drop-area'));
var $file_list = $(file_list).appendTo($dropfield);
$dropfield.append(hasitems);
$dropfield.append(rmv);
$(noitems).appendTo($file_list);
var isDropped = false;
$(self).on("change", function(evt) {
if ($(self).val() == "") {
$file_list.find('li').remove();
$file_list.append(noitems);
} else {
if (!isDropped) {
$dropfield.removeClass('hover');
$dropfield.addClass('loaded');
var files = $(self).prop("files");
traverseFiles(files);
}
}
});
$dropfield.on("dragleave", function(evt) {
$dropfield.removeClass('hover');
evt.stopPropagation();
});
$dropfield.on('click', function(evt) {
$(self).val('');
$file_list.find('li').remove();
$file_list.append(noitems);
$dropfield.removeClass('hover').removeClass('loaded');
});
$dropfield.on("dragenter", function(evt) {
$dropfield.addClass('hover');
evt.stopPropagation();
});
$dropfield.on("drop", function(evt) {
isDropped = true;
$dropfield.removeClass('hover');
$dropfield.addClass('loaded');
var files = evt.originalEvent.dataTransfer.files;
traverseFiles(files);
isDropped = false;
});
function appendFile(file) {
console.log(file);
$file_list.append('<li>' + file.name + '</li>');
}
function traverseFiles(files) {
if ($dropfield.hasClass('loaded')) {
$file_list.find('li').remove();
}
if (typeof files !== "undefined") {
for (var i = 0, l = files.length; i < l; i++) {
appendFile(files[i]);
}
} else {
alert("No support for the File API in this web browser");
}
}
});
};
$(document).ready(function() {
globalFunctions.ddInput('input[type="file"]');
});
</script>
<style>
.blue-text {
color: blue;
}
.underline {
text-decoration: underline;
}
.drop-field {
position: relative;
text-align: center;
vertical-align: middle;
}
.drop-field,
.drop-area {
height: 150px;
width: 300px;
}
.drop-field .browse {
z-index: 0;
position: absolute;
left: 0;
bottom: 0;
right: 0;
margin: 0 auto;
}
.drop-field .drop-area {
display: block;
border: 1px dashed gray;
position: relative;
}
.drop-field,
.drop-area,
.drop-field .browse {
transition: all 0.3s;
}
.drop-field.loaded .drop-area {
border: 1px solid blue;
}
.drop-field .browse {
opacity: 0;
transform: translateY(100%);
}
.drop-field.loaded .browse {
opacity: 1;
transform: translateY(0);
}
.drop-field.hover .drop-area {
border: 1px solid black;
}
.drop-field .drop-area input[type="file"] {
height: 100%;
width: 100%;
position: absolute;
display: block;
z-index: 3;
top: 0;
left: 0;
opacity: 0.000001;
}
.drop-field .file-list {
position: absolute;
z-index: 0;
top: 0;
left: 0;
text-align: center;
}
.drop-field .remove {
position: absolute;
left: 20px;
top: 20px;
z-index: 4;
transition: all 0.3s;
opacity: 0;
transform: translateY(-100%);
cursor: pointer;
}
.drop-field .remove:hover {
color: blue;
}
.drop-field.loaded .remove {
opacity: 1;
transform: translateY(0);
}
.drop-field ul li {
padding: 0;
text-align: center;
list-style: none;
}
}
</style>
<body>
<form method="post" action="" name="frmact" enctype="multipart/form-data">
Upload multi select File : <input type="file" id="multifileselect" name="multifileselect[]" multiple="multiple" style="margin-left:50px;" />
<input type="submit" name="Submit" value="submit" style="margin-left:50px;" />
</form>
</body>
</html>
<?php
if(isset($_POST['Submit'])){ //upload
$uploads_dir = 'img';
foreach ($_FILES["multifileselect"]["error"] as $key => $error) {
if ($error == UPLOAD_ERR_OK) {
$tmp_name = $_FILES["multifileselect"]["tmp_name"][$key];
$name = basename($_FILES["multifileselect"]["name"][$key]);
if (copy($tmp_name, "$uploads_dir/$name")){
echo "successfully uploaded =>". $name;
}else{
echo "Not Uploaded Files";
}
}
}
}?>
<html>
<head></head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" >
var globalFunctions = {};
globalFunctions.ddInput = function(elem) {
if ($(elem).length == 0 || typeof FileReader === "undefined") return;
var $fileupload = $('input[type="file"]');
var noitems = '<li class="no-items"><span class="blue-text underline">Browse</span> or drop here</li>';
var hasitems = '<div class="browse hasitems">Other files to upload? <span class="blue-text underline">Browse</span> or drop here</div>';
var file_list = '<ul class="file-list"></ul>';
var rmv = '<div class="remove"><i class="icon-close icons">x</i></div>'
$fileupload.each(function() {
var self = this;
var $dropfield = $('<div class="drop-field"><div class="drop-area"></div></div>');
$(self).after($dropfield).appendTo($dropfield.find('.drop-area'));
var $file_list = $(file_list).appendTo($dropfield);
$dropfield.append(hasitems);
$dropfield.append(rmv);
$(noitems).appendTo($file_list);
var isDropped = false;
$(self).on("change", function(evt) {
if ($(self).val() == "") {
$file_list.find('li').remove();
$file_list.append(noitems);
} else {
if (!isDropped) {
$dropfield.removeClass('hover');
$dropfield.addClass('loaded');
var files = $(self).prop("files");
traverseFiles(files);
}
}
});
$dropfield.on("dragleave", function(evt) {
$dropfield.removeClass('hover');
evt.stopPropagation();
});
$dropfield.on('click', function(evt) {
$(self).val('');
$file_list.find('li').remove();
$file_list.append(noitems);
$dropfield.removeClass('hover').removeClass('loaded');
});
$dropfield.on("dragenter", function(evt) {
$dropfield.addClass('hover');
evt.stopPropagation();
});
$dropfield.on("drop", function(evt) {
isDropped = true;
$dropfield.removeClass('hover');
$dropfield.addClass('loaded');
var files = evt.originalEvent.dataTransfer.files;
traverseFiles(files);
isDropped = false;
});
function appendFile(file) {
console.log(file);
$file_list.append('<li>' + file.name + '</li>');
}
function traverseFiles(files) {
if ($dropfield.hasClass('loaded')) {
$file_list.find('li').remove();
}
if (typeof files !== "undefined") {
for (var i = 0, l = files.length; i < l; i++) {
appendFile(files[i]);
}
} else {
alert("No support for the File API in this web browser");
}
}
});
};
$(document).ready(function() {
globalFunctions.ddInput('input[type="file"]');
});
</script>
<style>
.blue-text {
color: blue;
}
.underline {
text-decoration: underline;
}
.drop-field {
position: relative;
text-align: center;
vertical-align: middle;
}
.drop-field,
.drop-area {
height: 150px;
width: 300px;
}
.drop-field .browse {
z-index: 0;
position: absolute;
left: 0;
bottom: 0;
right: 0;
margin: 0 auto;
}
.drop-field .drop-area {
display: block;
border: 1px dashed gray;
position: relative;
}
.drop-field,
.drop-area,
.drop-field .browse {
transition: all 0.3s;
}
.drop-field.loaded .drop-area {
border: 1px solid blue;
}
.drop-field .browse {
opacity: 0;
transform: translateY(100%);
}
.drop-field.loaded .browse {
opacity: 1;
transform: translateY(0);
}
.drop-field.hover .drop-area {
border: 1px solid black;
}
.drop-field .drop-area input[type="file"] {
height: 100%;
width: 100%;
position: absolute;
display: block;
z-index: 3;
top: 0;
left: 0;
opacity: 0.000001;
}
.drop-field .file-list {
position: absolute;
z-index: 0;
top: 0;
left: 0;
text-align: center;
}
.drop-field .remove {
position: absolute;
left: 20px;
top: 20px;
z-index: 4;
transition: all 0.3s;
opacity: 0;
transform: translateY(-100%);
cursor: pointer;
}
.drop-field .remove:hover {
color: blue;
}
.drop-field.loaded .remove {
opacity: 1;
transform: translateY(0);
}
.drop-field ul li {
padding: 0;
text-align: center;
list-style: none;
}
}
</style>
<body>
<form method="post" action="" name="frmact" enctype="multipart/form-data">
Upload multi select File : <input type="file" id="multifileselect" name="multifileselect[]" multiple="multiple" style="margin-left:50px;" />
<input type="submit" name="Submit" value="submit" style="margin-left:50px;" />
</form>
</body>
</html>
No comments:
Post a Comment