article

Sunday, November 21, 2021

Angularjs PHP Image Upload With Preview

Angularjs PHP Image Upload With Preview

index.html
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
//index.html
<!DOCTYPE html>
<html>
<head>
    <title>Angularjs PHP Image Upload With Preview</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="http://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body ng-app="main-App" ng-controller="MemberController">
<div class="container py-5">
    <header class="text-white text-center">
        <h1 class="display-4">Angularjs PHP Image Upload With Preview</h1>
    </header>
    <div class="row py-4">
        <div class="col-lg-6 mx-auto">
 
            <form ng-submit="submit()" name="form" role="form">
            <div class="input-group mb-3 px-2 py-2 rounded-pill bg-white shadow-sm">
                <input id="upload" ng-model="form.image" type="file" accept="image/*" onchange="angular.element(this).scope().uploadedFile(this)" class="form-control border-0">
                <label id="upload-label" for="upload" class="font-weight-light text-muted">Choose file</label>
                <div class="input-group-append">
                    <label for="upload" class="btn btn-light m-0 rounded-pill px-4"> <i class="fa fa-cloud-upload mr-2 text-muted"></i><small class="text-uppercase font-weight-bold text-muted">Choose file</small></label>
                </div>
            </div>
             
            <input type="submit" id="submit" value="Submit" class="btn btn-info"/>
             
            <!-- Uploaded image area-->
            <p class="font-italic text-white text-center">The image uploaded will be rendered inside the box below.</p>
            <div class="image-area mt-4"><img ng-src="{{image_source}}" alt="" class="img-fluid rounded shadow-sm mx-auto d-block"></div>
            </form>
        </div>
    </div>
</div>
<style>
#upload {
    opacity: 0;
}
 
#upload-label {
    position: absolute;
    top: 50%;
    left: 1rem;
    transform: translateY(-50%);
}
 
.image-area {
    border: 2px dashed rgba(255, 255, 255, 0.7);
    padding: 1rem;
    position: relative;
}
 
.image-area::before {
    content: 'Uploaded image result';
    color: #fff;
    font-weight: bold;
    text-transform: uppercase;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 0.8rem;
    z-index: 1;
}
 
.image-area img {
    z-index: 2;
    position: relative;
}
body {
    min-height: 100vh;
    background-color: #757f9a;
    background-image: linear-gradient(147deg, #757f9a 0%, #d7dde8 100%);
}
</style>
<script type="text/javascript">
    var app =  angular.module('main-App',[]);
    app.controller('MemberController', function($scope, $http) {
 
    $scope.form = [];
    $scope.files = [];
 
    $scope.submit = function() {
        $scope.form.image = $scope.files[0];
         
        $http({
            method  : 'POST',
            url     : 'upload.php',
            processData: false,
            transformRequest: function (data) {
                var formData = new FormData();
                formData.append("image", $scope.form.image); 
                return formData; 
            }, 
            data : $scope.form,
            headers: {
                   'Content-Type': undefined
            }
         }).success(function(data){
            alert(data);
        });
    };
 
    $scope.uploadedFile = function(element) {
        $scope.currentFile = element.files[0];
        var reader = new FileReader();
 
        reader.onload = function(event) {
            $scope.image_source = event.target.result
            $scope.$apply(function($scope) {
                $scope.files = element.files;
              });
            }
            reader.readAsDataURL(element.files[0]);
        }
    });
    </script>
</body>
</html>
upload.php
?
1
2
3
4
5
6
7
8
9
10
11
//upload.php
<?php
    if(!empty($_FILES['image'])){
        $ext = pathinfo($_FILES['image']['name'],PATHINFO_EXTENSION);
                $image = time().'.'.$ext;
                move_uploaded_file($_FILES["image"]["tmp_name"], 'images/'.$image);
        echo "Profile Image uploaded successfully as ".$image;
    }else{
        echo "Profile Image Is Empty";
    }
?>

Posted by ednalan at 6:35 PM . Under .

Related Post