We are going to upload file by angular and php
Step 1: First of all we need to add a few file in our header section.
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/danialfarid-angular-file-upload/1.6.1/angular-file-upload-shim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/danialfarid-angular-file-upload/1.6.1/angular-file-upload.js"></script>
Step 2: and then add the following html in your body section.
<div ng-app="_cars_app">
<div ng-controller="MyCtrl">
<input type="text" ng-model="test"/>
<input type="file" ng-model="fname" name="image" id="image" ng-file-select="onFileSelect($files)">
<br/>
<span class="errorMsg">---{{ message }}----</span>
</div>
</div>
Step 3: Write js code before the html. Basically this code is used for upload request
<script>
//inject angular file upload directives and service.
//inject angular file upload directives and service.
angular.module('_cars_app', ['angularFileUpload']);
var MyCtrl = ['$scope', '$upload', function($scope, $upload) {
$scope.onFileSelect = function($files) {
var file = $files[0];
console.log(file.type.indexOf('image'));
if (file.type.indexOf('image') == -1) {
$scope.error = 'image extension not allowed, please choose a JPEG or PNG file.'
}
if (file.size > 2097152){
$scope.error ='File size cannot exceed 2 MB';
}
//console.log($scope.fname);
$scope.upload = $upload.upload({
url: "upload.php",
data: {fname: $scope.fname},
method: 'POST',
file: file
}).success(function(data, status, headers, config) {
$scope.message = data;
}).error(function(data, status) {
$scope.message = data;
});
}
}];
</script>
Step 4:
Create a file which called upload.php and peste the following code inside the file.
<?php
$fname = $_POST["fname"];
if(isset($_FILES['file'])){
//The error validation could be done on the javascript client side.
$errors= array();
$file_name = time(). $_FILES['file']['name'];
print time(). $file_name;
$file_size =$_FILES['file']['size'];
$file_tmp =$_FILES['file']['tmp_name'];
$file_type=$_FILES['file']['type'];
$file_ext = strtolower(pathinfo($file_name, PATHINFO_EXTENSION));
$extensions = array("jpeg","jpg","png");
if(in_array($file_ext,$extensions )=== false){
$errors[]="file extension not allowed, please choose a JPEG or PNG file.";
}
if($file_size > 2097152){
$errors[]='File size cannot exceed 2 MB';
}
if(empty($errors)==true){
move_uploaded_file($file_tmp,"images/".$file_name);
// echo $fname . " uploaded file: " . "images/" . $file_name;
}else{
print_r($errors);
}
}
?>
Step -5: Let's review your code.
<!DOCTYPE html>
<html>
<head>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.10/angular-route.min.js"></script>
<script src="js/angular-file-upload-shim.min.js"></script>
<script src="js/angular-file-upload.js"></script>
<script>
//inject angular file upload directives and service.
//inject angular file upload directives and service.
angular.module('_cars_app', ['angularFileUpload']);
var MyCtrl = ['$scope', '$upload', function($scope, $upload) {
$scope.onFileSelect = function($files) {
var file = $files[0];
console.log(file.type.indexOf('image'));
if (file.type.indexOf('image') == -1) {
$scope.error = 'image extension not allowed, please choose a JPEG or PNG file.'
}
if (file.size > 2097152){
$scope.error ='File size cannot exceed 2 MB';
}
alert(23);
//console.log($scope.fname);
$scope.upload = $upload.upload({
url: "upload.php",
data: {fname: $scope.fname},
method: 'POST',
file: file
}).success(function(data, status, headers, config) {
$scope.message = data;
}).error(function(data, status) {
$scope.message = data;
});
}
}];
</script>
</head>
<body>
<div ng-app="_cars_app">
<div ng-controller="MyCtrl">
<input type="text" ng-model="test"/>
<input type="file" ng-model="fname" name="image" id="image" ng-file-select="onFileSelect($files)">
<br/>
<span class="errorMsg">---{{ message }}----</span>
</div>
</div>
</body>
</html>
That's it. Thanks for reading this code.
Step 1: First of all we need to add a few file in our header section.
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/danialfarid-angular-file-upload/1.6.1/angular-file-upload-shim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/danialfarid-angular-file-upload/1.6.1/angular-file-upload.js"></script>
Step 2: and then add the following html in your body section.
<div ng-app="_cars_app">
<div ng-controller="MyCtrl">
<input type="text" ng-model="test"/>
<input type="file" ng-model="fname" name="image" id="image" ng-file-select="onFileSelect($files)">
<br/>
<span class="errorMsg">---{{ message }}----</span>
</div>
</div>
Step 3: Write js code before the html. Basically this code is used for upload request
<script>
//inject angular file upload directives and service.
//inject angular file upload directives and service.
angular.module('_cars_app', ['angularFileUpload']);
var MyCtrl = ['$scope', '$upload', function($scope, $upload) {
$scope.onFileSelect = function($files) {
var file = $files[0];
console.log(file.type.indexOf('image'));
if (file.type.indexOf('image') == -1) {
$scope.error = 'image extension not allowed, please choose a JPEG or PNG file.'
}
if (file.size > 2097152){
$scope.error ='File size cannot exceed 2 MB';
}
//console.log($scope.fname);
$scope.upload = $upload.upload({
url: "upload.php",
data: {fname: $scope.fname},
method: 'POST',
file: file
}).success(function(data, status, headers, config) {
$scope.message = data;
}).error(function(data, status) {
$scope.message = data;
});
}
}];
</script>
Step 4:
Create a file which called upload.php and peste the following code inside the file.
<?php
$fname = $_POST["fname"];
if(isset($_FILES['file'])){
//The error validation could be done on the javascript client side.
$errors= array();
$file_name = time(). $_FILES['file']['name'];
print time(). $file_name;
$file_size =$_FILES['file']['size'];
$file_tmp =$_FILES['file']['tmp_name'];
$file_type=$_FILES['file']['type'];
$file_ext = strtolower(pathinfo($file_name, PATHINFO_EXTENSION));
$extensions = array("jpeg","jpg","png");
if(in_array($file_ext,$extensions )=== false){
$errors[]="file extension not allowed, please choose a JPEG or PNG file.";
}
if($file_size > 2097152){
$errors[]='File size cannot exceed 2 MB';
}
if(empty($errors)==true){
move_uploaded_file($file_tmp,"images/".$file_name);
// echo $fname . " uploaded file: " . "images/" . $file_name;
}else{
print_r($errors);
}
}
?>
Step -5: Let's review your code.
<!DOCTYPE html>
<html>
<head>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.10/angular-route.min.js"></script>
<script src="js/angular-file-upload-shim.min.js"></script>
<script src="js/angular-file-upload.js"></script>
<script>
//inject angular file upload directives and service.
//inject angular file upload directives and service.
angular.module('_cars_app', ['angularFileUpload']);
var MyCtrl = ['$scope', '$upload', function($scope, $upload) {
$scope.onFileSelect = function($files) {
var file = $files[0];
console.log(file.type.indexOf('image'));
if (file.type.indexOf('image') == -1) {
$scope.error = 'image extension not allowed, please choose a JPEG or PNG file.'
}
if (file.size > 2097152){
$scope.error ='File size cannot exceed 2 MB';
}
alert(23);
//console.log($scope.fname);
$scope.upload = $upload.upload({
url: "upload.php",
data: {fname: $scope.fname},
method: 'POST',
file: file
}).success(function(data, status, headers, config) {
$scope.message = data;
}).error(function(data, status) {
$scope.message = data;
});
}
}];
</script>
</head>
<body>
<div ng-app="_cars_app">
<div ng-controller="MyCtrl">
<input type="text" ng-model="test"/>
<input type="file" ng-model="fname" name="image" id="image" ng-file-select="onFileSelect($files)">
<br/>
<span class="errorMsg">---{{ message }}----</span>
</div>
</div>
</body>
</html>
That's it. Thanks for reading this code.
কোন মন্তব্য নেই:
একটি মন্তব্য পোস্ট করুন