teratail header banner
teratail header banner
質問するログイン新規登録

質問編集履歴

1

ソースコードの追加

2021/08/25 02:10

投稿

sekaino_usay
sekaino_usay

スコア0

title CHANGED
File without changes
body CHANGED
@@ -2,4 +2,151 @@
2
2
  PHPでファイルをアップロードする際に、できるだけ簡単にプログレスバーを表示させたいです。
3
3
 
4
4
  ### 自分で試したこと
5
- [こちら](https://blog.capilano-fw.com/?p=4452)の記事を試し、うまくできたのですが、もう少しシンプルに(外部のライブラリを使わずに)実装したいです。それがもし無理なら、ファイルをアップロードした後、フォームのアクション先に飛びたいです。
5
+ [こちら](https://blog.capilano-fw.com/?p=4452)の記事を試し、うまくできたのですが、もう少しシンプルに(外部のライブラリを使わずに)実装したいです。それがもし無理なら、ファイルをアップロードした後、フォームのアクション先に飛びたいです。
6
+
7
+ ### ソースコード
8
+ #### index.html(フォーム)
9
+ ```HTML
10
+ <html>
11
+
12
+ <head>
13
+ <meta charset="utf-8">
14
+ <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
15
+ </head>
16
+
17
+ <body>
18
+ <div id="app" class="container">
19
+ <div class="row" v-if="!uploading">
20
+ <div class="col-6">
21
+ <input type="file" name="file" @change="onSelectFile">
22
+ </div>
23
+ <div class="col-6">
24
+ <button type="button" class="btn btn-outline-primary" @click="onSubmit">送信</button>
25
+ </div>
26
+ </div>
27
+ <div class="row" v-else>
28
+ <div class="col-12 text-center">
29
+ <!-- プログレスバー(HTML5) -->
30
+ <progress ref="progress" value="0" max="100"></progress>
31
+ <br>
32
+ <span class="text-muted">アップロード中...</span>
33
+ </div>
34
+ </div>
35
+ </div>
36
+ <!-- Vue -->
37
+ <script src="https://cdn.jsdelivr.net/npm/vue@2.6.0"></script>
38
+ <!-- axios -->
39
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.0/axios.min.js"></script>
40
+ <script>
41
+ new Vue({
42
+ el: '#app',
43
+ data: {
44
+ file: null,
45
+ uploading: false
46
+ },
47
+ methods: {
48
+ onSubmit() {
49
+
50
+ const url = './up.php';
51
+ let formData = new FormData();
52
+ formData.append('file', this.file);
53
+
54
+ if (this.file === null) {
55
+
56
+ alert('ファイルを選択してください');
57
+ return;
58
+
59
+ }
60
+
61
+ this.uploading = true;
62
+
63
+ axios.post(url, formData, { onUploadProgress: this.onUpload })
64
+ .then((response) => {
65
+
66
+ // アップロード完了
67
+ alert('アップロードが完了しました!');
68
+ window.location.href = "./up.php"
69
+
70
+ })
71
+ .catch((error) => {
72
+
73
+ // エラーが発生
74
+ alert('エラーが発生しました。もう一度やり直してください。');
75
+
76
+ })
77
+ .then(() => {
78
+
79
+ this.$refs.progress.value = 0; // プログレスをクリア
80
+ this.uploading = false;
81
+
82
+ });
83
+
84
+ },
85
+ onSelectFile(e) { // ファイル選択時
86
+
87
+ const files = e.target.files;
88
+
89
+ if (files.length === 0) { // ファイル選択がキャンセルされた時
90
+
91
+ this.file = null;
92
+ return;
93
+
94
+ }
95
+
96
+ this.file = files[0];
97
+
98
+ },
99
+ onUpload(e) {
100
+
101
+ // プログレスバーを計算して変更
102
+ this.$refs.progress.value = Math.floor((e.loaded * 100) / e.total);
103
+
104
+ }
105
+ }
106
+ });
107
+ </script>
108
+ </body>
109
+
110
+ </html>
111
+ ```
112
+
113
+ #### up.php(アップロード処理)
114
+ ```php
115
+ <?php
116
+ //変数を作成
117
+ $tempfile = $_FILES['file']['tmp_name'];
118
+ $file = $_FILES['file']['name'];
119
+
120
+ //ランダム文字列作成(同一ファイル名回避)
121
+ $random = chr(mt_rand(97, 122)).chr(mt_rand(97, 122)).chr(mt_rand(97, 122)).chr(mt_rand(97, 122)).chr(mt_rand(97, 122)).chr(mt_rand(97, 122)).chr(mt_rand(97, 122)).chr(mt_rand(97, 122)).chr(mt_rand(97, 122)).chr(mt_rand(97, 122));
122
+
123
+ //リネーム
124
+ $filename = $_SERVER['REQUEST_TIME'].'-'.$random.'.'.pathinfo($file)['extension'];
125
+
126
+ //データ保存用ディレクトリ
127
+ $directory = './data/';
128
+
129
+ //アップロード先URL
130
+ $domain = $_SERVER['HTTP_HOST'];
131
+ $url = 'https://'.$domain.'/data/'.$filename;
132
+
133
+ //データ保存用ディレクトリが存在しなければ作成
134
+ if (file_exists($directory)) {
135
+ ;
136
+ } else {
137
+ mkdir($directory);
138
+ }
139
+
140
+ //ファイルアップロード
141
+ if (is_uploaded_file($tempfile)) {
142
+ if ( move_uploaded_file($tempfile , $directory.$filename )) {
143
+ echo '<a href="'.$url.'" target="_blank">'.$file.'</a>をアップロードしました。<br>';
144
+ echo 'ファイルのURLは<a href="'.$url.'" target="_blank">'.$url.'</a>です。';
145
+ } else {
146
+ echo "ファイルをアップロードできません。";
147
+ }
148
+ } else {
149
+ echo "ファイルが選択されていません。";
150
+ }
151
+ ?>
152
+ ```