Download or Include
axios
https://github.com/axios/axios
Using jsDelivr CDN: https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js
VueJS
https://vuejs.org/v2/guide/installation.html
CDN : https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js
//uploadfile.html
<!doctype html>
<html>
<head>
<title>Vue.js Axios PHP How to upload multiple files</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body>
<div class="container" id='myapp'>
<br />
<h3 align="center">Vue.js Axios PHP How to upload multiple files</h3>
<br />
<div class="panel panel-default">
<div class="panel-heading"><b>Vue.js Axios PHP How to upload multiple files</b></div>
<div class="panel-body">
<div class="form-group">
<label>File Upload</label>
<input type="file" id="uploadfiles" ref="uploadfiles" multiple />
</div>
<div class="form-group">
<button type="button" @click='uploadFile()' class="btn btn-info" >Upload file</button>
</div>
<br>
<div v-if="filenames.length" >
<ul>
<li v-for= '(filename,index) in filenames' >
{{ filename }}
</li>
</ul>
</div>
</div>
</div>
</div>
<script>
var app = new Vue({
el: '#myapp',
data: {
file: "",
filenames: []
},
methods: {
uploadFile: function(){
var el = this;
let formData = new FormData();
// Read selected files
var files = this.$refs.uploadfiles.files;
var totalfiles = this.$refs.uploadfiles.files.length;
for (var index = 0; index < totalfiles; index++) {
formData.append("files[]", files[index]);
}
axios.post('upload.php', formData,
{
headers: {
'Content-Type': 'multipart/form-data'
}
})
.then(function (response) {
el.filenames = response.data;
alert(el.filenames.length + " files is been uploaded.");
})
.catch(function (error) {
console.log(error);
});
}
}
})
</script>
</body>
</html>
upload.php
//upload.php
<?php
$files_arr = array();
if(isset($_FILES['files']['name'])){
$countfiles = count($_FILES['files']['name']); // Count total files
$upload_location = "uploads/"; // Upload directory
// Loop all files
for($index = 0;$index < $countfiles;$index++){
if(isset($_FILES['files']['name'][$index]) && $_FILES['files']['name'][$index] != ''){
// File name
$filename = $_FILES['files']['name'][$index];
// Get extension
$ext = strtolower(pathinfo($filename, PATHINFO_EXTENSION));
// Valid extensions
$valid_ext = array("png","jpeg","jpg","pdf","txt","doc","docx");
// Check extension
if(in_array($ext, $valid_ext)){
// File path
$newfilename = time()."_".$filename;
$path = $upload_location.$newfilename;
// Upload file
if(move_uploaded_file($_FILES['files']['tmp_name'][$index],$path)){
$files_arr[] = $newfilename;
}
}
}
}
}
echo json_encode($files_arr);
die;
