Ago, When ever we want to upload a folder or whole folder files but we can not do that. we had to selecting a manual files for uploading in browser.
But now we can do it when we want to upload folder or folder files using webkitdiretcories in html we can easily done this.
I share code for it:
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css"integrity="sha384
-/Y6pD6FV/Vv2HJnA6tvslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="card" style="margin-top:10%">
<div class="card-header">
upload Folder
</div>
<div class="card-body">
<div><input type="file" id="selectFiles" name="fileList" webkitdirectory multiple></div>
<div>
<ul id="uploads">
</ul>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS +GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-
h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
<script>
$(function() {
$('#selectFiles').on('change',function(e) {
for (let file of Array.from(e.target.files)) {
$('#uploads').append('<li>'+file.webkitRelativePath+'</li>');
};
})
});
</script>
</body>
</html>
Output :
Live Demo :
Fruxinfo Pvt. Ltd
But now we can do it when we want to upload folder or folder files using webkitdiretcories in html we can easily done this.
I share code for it:
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css"integrity="sha384
-/Y6pD6FV/Vv2HJnA6tvslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="card" style="margin-top:10%">
<div class="card-header">
upload Folder
</div>
<div class="card-body">
<div><input type="file" id="selectFiles" name="fileList" webkitdirectory multiple></div>
<div>
<ul id="uploads">
</ul>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS +GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-
h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
<script>
$(function() {
$('#selectFiles').on('change',function(e) {
for (let file of Array.from(e.target.files)) {
$('#uploads').append('<li>'+file.webkitRelativePath+'</li>');
};
})
});
</script>
</body>
</html>
Output :
upload Folder
Fruxinfo Pvt. Ltd
Fruxinfo Pvt. Ltd. I'Our company is 7 year old. We are a highly reputed company that has been providing quite a number of digital oriented services including SMO, SEO, web development and Mobile development services across board. Additionally, our professionals have been involved in all various developments that include designing and creation of application that meet accepted standards, all these enabled by the use of versatile programming languages that have the greatest impact on business irrespective of the industry. 
0 coment�rios: