আজকে আপনাদের সাথে শেয়ার করতেছি Vue JS এবং php দিয়ে প্রোগ্রেস বার সহ ফাইল আপলোডের টিউটোরিয়ালের সোর্স কোড
upload.php
<?php
header('Access-Control-Allow-Origin: *');
header('Content-type: application/json');
//no validation. You should validate something before uploading.
// e.g. file extension, file size, file already exists or not etc
// file upload allowed on server with max size greater than 2MB.
$res = [];
$target_dir = "uploads/";
$target_file = $target_dir . basename($_FILES["fileToUpload"]["name"]);
if (move_uploaded_file($_FILES["fileToUpload"]["tmp_name"], $target_file)) {
$res["message"] = "The file " . basename( $_FILES["fileToUpload"]["name"]). " has been uploaded.";
$res["uploadedUrl"] = $target_file;
} else {
$res["message"] = "Sorry, there was an error uploading your file.";
}
echo json_encode($res);
die();
main app div:
<div id="app">
<h1>Normal file upload</h1>
<form action="http://rimonbd.com/fileupload/upload.php" method="post" enctype="multipart/form-data">
<label>Select File</label>
<input type="file" name="fileToUpload" id="fileToUpload"> <br> <br>
<button type="submit">Upload Now</button>
</form>
<br><hr><br>
<h1>File upload with progressbar</h1>
<label>Select File</label>
<input type="file" name="fileToUpload1" id="fileToUpload1"> <br> <br>
<progress :value="percent" max="100"> </progress> % {{percent}}
<br><br>
{{message}}
<br><br>
<button @click="upload();">Upload Now</button>
</div>
script:
var app = new Vue({
el: "#app",
data: {
percent: 0,
message: ""
},
mounted: function () {
console.log("mounted...");
},
methods: {
upload: function(){
var _this = this;
var elmnt = document.getElementById("fileToUpload1");
console.log(elmnt.files[0]);
var fd = new FormData();
fd.append("fileToUpload", elmnt.files[0], elmnt.files[0].name)
axios.post("http://rimonbd.com/fileupload/upload.php", fd, {
onUploadProgress: function(uploadEvent){
_this.percent = Math.round((uploadEvent.loaded / uploadEvent.total)*100);
}
})
.then(function(res){
console.log(res);
_this.message = res.data.message;
})
.catch(function(e){
console.log(e);
});
}
}
});