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
|
<!DOCTYPE html>
<html lang="en">
<head>
<?php include 'inc/head.php'; ?>
<?php include 'inc/links.php'; ?>
</head>
<body>
<div class="app-container app-theme-white body-tabs-shadow fixed-sidebar ">
<?php include 'inc/header.php'; ?>
<!-- <?php include 'inc/setting.php'; ?> -->
<div class="app-main">
<?php include 'inc/side_menu.php'; ?>
<div class="app-main__outer">
<div class="app-main__inner">
<div class="app-page-title">
<div class="page-title-wrapper">
<div class="page-title-heading">
<div>
課程分類 (新增)
<!-- <div class="page-title-subheading">
This is an example dashboard created using build-in
elements and components.
</div> -->
</div>
</div>
<div class="page-title-actions">
<div class="d-inline-block dropdown">
<button type="button" class="btn-shadow btn btn-light"
onclick="window.location.href = 'category.php';">
<span class="btn-icon-wrapper pr-2 opacity-7">
<i class="fas fa-angle-left"></i>
</span>
返回
</button>
</div>
</div>
</div>
</div>
<div class="formWrap">
<div class="row mb-4">
<div class="col-md-12">
<p class="h4 mb-4">課程編號: CSK230001 <span class="text-danger small">(系統自動產生)</span></p>
</div>
<div class="col-md-6">
<div class="position-relative form-group"><label for="courestype" class="">課程分類: <span
class="text-danger">*</span></label><input name="courestype" id="courestype"
placeholder="" type="text" value="課程分類1" class="form-control"></div>
</div>
<div class="col-md-6">
<div class="position-relative form-group"><label for="coursename" class="">課程名稱: <span
class="text-danger">*</span></label><input name="coursename" id="coursename"
placeholder="" type="text" class="form-control"></div>
</div>
<div class="col-md-12">
<div class="position-relative form-group"><label for="courseinfo"
class="">課程簡介:</label><textarea name="courseinfo" id="courseinfo"
class="form-control"></textarea></div>
</div>
<div class="col-md-12">
<div class="videoWrap">
<video id="video" width="200" height="200" controls></video>
<div class="position-relative form-group"><label for="video" class="">課程介紹短片:
</label><input name="file" id="video" type="file" class="form-control-file">
<small class="form-text text-danger">上傳短片,MP4格式, 檔案大小上限為1GB</small>
</div>
</div>
</div>
</div>
<button type="button" class="btn-shadow btn btn-primary"
onclick="window.location.href = 'course_setting.php';">
<span class="btn-icon-wrapper pr-2 opacity-7">
<i class="fas fa-save fa-w-20"></i>
</span>
儲存
</button>
</div>
</div>
</div>
</div>
<?php include 'inc/footer.php'; ?>
</div>
<?php include 'inc/custom.php'; ?>
<script type="text/javascript" src="./assets/scripts/main.js"></script>
<script>
const input = document.getElementById('file-input');
const video = document.getElementById('video');
const videoSource = document.createElement('source');
input.addEventListener('change', function() {
const files = this.files || [];
if (!files.length) return;
const reader = new FileReader();
reader.onload = function(e) {
videoSource.setAttribute('src', e.target.result);
video.appendChild(videoSource);
video.load();
video.play();
};
reader.onprogress = function(e) {
console.log('progress: ', Math.round((e.loaded * 100) / e.total));
};
reader.readAsDataURL(files[0]);
});
</script>
</body>
</html>
|