-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.php
147 lines (131 loc) · 4.42 KB
/
index.php
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
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png">
<title>Number Plate Recognition System</title>
<!-- Tell the browser to be responsive to screen width -->
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<!-- Bootstrap 3.3.6 -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css">
<!-- Ionicons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css">
<!-- Theme style -->
<link rel="stylesheet" href="https://adminlte.io/themes/AdminLTE/dist/css/AdminLTE.min.css">
<link rel="stylesheet" href="https://adminlte.io/themes/AdminLTE/dist/css/skins/_all-skins.min.css">
<!-- jQuery 2.2.3 -->
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<!-- Bootstrap 3.3.6 -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="styles.css">
<script type="text/javascript">
$(document).ready(function() {
var validExt = ".png, .gif, .jpeg, .jpg";
function fileExtValidate(fdata) {
var filePath = fdata.value;
var getFileExt = filePath.substring(filePath.lastIndexOf('.') + 1).toLowerCase();
var pos = validExt.indexOf(getFileExt);
if(pos < 0) {
alert("This file is not allowed, please upload valid file.");
return false;
} else {
return true;
}
}
var maxSize = '5120';
function fileSizeValidate(fdata) {
if (fdata.files && fdata.files[0]) {
var fsize = fdata.files[0].size/1024;
if(fsize > maxSize) {
alert('Maximum file size exceed, This file size is: ' + fsize + "KB");
return false;
} else {
return true;
}
}
}
$('#photoButtonLabel').click(function(){
var data = "";
$("#targetLayer").html(data);
//reset progressbar
var progress_bar_id = '#progress-wrp';
var percent =0;
$(progress_bar_id +" .progress-bar").css("width", + percent +"%");
$(progress_bar_id + " .status").text(percent +"%");
});
$('#fileUpload').change(function(){
if(fileExtValidate(this)) {
if(fileSizeValidate(this)) {
$("#processing").show();
var file_data = $('#fileUpload').prop('files')[0];
var form_data = new FormData();
var progress_bar_id = '#progress-wrp'; //ID of an element for response output
form_data.append('file', file_data);
$.ajax({
url: "upload.php",
type: "POST",
data: form_data,
contentType: false,
cache: false,
processData:false,
xhr: function(){
//upload Progress
var xhr = $.ajaxSettings.xhr();
if (xhr.upload) {
xhr.upload.addEventListener('progress', function(event) {
var percent = 0;
var position = event.loaded || event.position;
var total = event.total;
if (event.lengthComputable) {
percent = Math.ceil(position / total * 100);
}
//update progressbar
$(progress_bar_id +" .progress-bar").css("width", + percent +"%");
$(progress_bar_id + " .status").text(percent +"%");
}, true);
}
return xhr;
},
beforeSend: function() {
$("#processing").show();
},
success: function(data){
console.log(data);
$("#targetLayer").html(data);
$("#processing").hide();
}
});
}
}
});
});
</script>
</head>
<body class="hold-transition login-page">
<div class="login-box">
<div class="login-logo">
<b></b>
</div>
<!-- /.login-logo -->
<div id='overlay'>
<div id='form' class="login-box-body">
<form id='uploadForm' action="upload.php" method="post" ENCTYPE="multipart/form-data" >
<label class="btn btn-block btn-primary" id='photoButtonLabel'> Take Photo
<input type="file" accept="image/*" name="userImage" class="inputFile" id="fileUpload" capture="camera" style="display: none;">
</label>
</form>
</div>
</div>
<div id="progress-wrp"><div class="progress-bar"></div ><div class="status">0%</div></div>
<div id="output"><!-- error or success results --></div>
<div id="processing" style="display:none;">
<img id="loading-image" src="processing.gif" />
</div>
<div id="targetLayer">
</div>
<!-- /.login-box-body -->
</div>
</body>
</html>