PHPでの画面遷移について

実現したいこと

PHPの処理を実行した後に画面遷移を行いたい。

発生している問題・エラーメッセージ

HTMLのボタンを押したときに画面遷移させる→phpの処理が行われなかった
phpにheaderを表記→ポップアップに指定したURLのコードが表記される。下記の画像のようになります。

HTMLでの画面遷移表記

html
1<!DOCTYPE html>
2<html lang="ja">
3	<head>
4		<meta charset="utf-8">
5		<meta http-equiv="Pragma" content="no-cache">
6		<meta http-equiv="Cache-Control" content="no-cache">
7		<meta http-equiv="Expires" content="0">
8		<link rel="stylesheet" href="geo_guide_03.css"/>
9		<title>ジオツアーシステム(管理者03)</title>
10	</head>
11
12	<body>		
13		<section>
14		<form id="my_form">
15			<input type="file" name="file_1">
16			<button type="button" onclick="file_upload()";"location.href='ほにゃほにゃ'>アップロード</button>
17			<meta http-equiv="refresh"content="URL=https://www2.yoslab.net/~jyamamoto/system/index.html">
18		</form>
19		</section>			
20	</body>
21	<script src="./js/geo_guide_03_upload.js"></script>
22	
23	<script src="jquery-3.3.1.min.js"></script>
24

###PHPでの画面遷移表記

PHP
1<?php
2// パス名を取得
3$img_name = $_FILES['file_1']['name'];
4
5//拡張子を取得
6$ext_object = new SplFileInfo($img_name);
7$ext = $ext_object->getExtension();
8var_dump($ext);
9var_dump(gettype($ext));
10
11
12if($ext == 'png'){
13	echo "pngである判断はされました";
14	$new_file_name="sample.png";
15//	move_uploaded_file($_FILES['file_1']['tmp_name'], './img/img_sample/'.$new_file_name);
16}elseif($ext == 'jpg'){
17	echo "jpgである判断はされました";
18	$new_file_name="sample.jpg";
19//	move_uploaded_file($_FILES['file_1']['tmp_name'], './img/img_sample/'.$new_file_name);
20}elseif($ext == 'jpeg'){
21	$new_file_name="sample.jpeg";
22//	move_uploaded_file($_FILES['file_1']['tmp_name'], './img/img_sample/'.$new_file_name);
23}
24
25//　画像を保存
26move_uploaded_file($_FILES['file_1']['tmp_name'], './img/img_sample/'.$new_file_name);
27
28
29//　成功したら，次の画面に遷移する
30header('Location: https://ほにゃほにゃ');
31exit;
32
33?>
34

実現したいこと

PHPの処理を実行した後に画面遷移を行いたい。

発生している問題・エラーメッセージ

HTMLのボタンを押したときに画面遷移させる→phpの処理が行われなかった
phpにheaderを表記→ポップアップに指定したURLのコードが表記される。下記の画像のようになります。

HTMLでの画面遷移表記

html
1<!DOCTYPE html>
2<html lang="ja">
3	<head>
4		<meta charset="utf-8">
5		<meta http-equiv="Pragma" content="no-cache">
6		<meta http-equiv="Cache-Control" content="no-cache">
7		<meta http-equiv="Expires" content="0">
8		<link rel="stylesheet" href="geo_guide_03.css"/>
9		<title>ジオツアーシステム(管理者03)</title>
10	</head>
11
12	<body>		
13		<section>
14		<form id="my_form">
15			<input type="file" name="file_1">
16			<button type="button" onclick="file_upload()";"location.href='ほにゃほにゃ'>アップロード</button>
17			<meta http-equiv="refresh"content="URL=https://www2.yoslab.net/~jyamamoto/system/index.html">
18		</form>
19		</section>			
20	</body>
21	<script src="./js/geo_guide_03_upload.js"></script>
22	
23	<script src="jquery-3.3.1.min.js"></script>
24

###PHPでの画面遷移表記

php
1<?php
2// パス名を取得
3$img_name = $_FILES['file_1']['name'];
4
5//拡張子を取得
6$ext_object = new SplFileInfo($img_name);
7$ext = $ext_object->getExtension();
8var_dump($ext);
9var_dump(gettype($ext));
10
11
12if($ext == 'png'){
13	echo "pngである判断はされました";
14	$new_file_name="sample.png";
15//	move_uploaded_file($_FILES['file_1']['tmp_name'], './img/img_sample/'.$new_file_name);
16}elseif($ext == 'jpg'){
17	echo "jpgである判断はされました";
18	$new_file_name="sample.jpg";
19//	move_uploaded_file($_FILES['file_1']['tmp_name'], './img/img_sample/'.$new_file_name);
20}elseif($ext == 'jpeg'){
21	$new_file_name="sample.jpeg";
22//	move_uploaded_file($_FILES['file_1']['tmp_name'], './img/img_sample/'.$new_file_name);
23}
24
25//　画像を保存
26move_uploaded_file($_FILES['file_1']['tmp_name'], './img/img_sample/'.$new_file_name);
27
28
29//　成功したら，次の画面に遷移する
30header('Location: https://ほにゃほにゃ');
31exit;
32
33?>
34

###javascriptでPOSTで送信する処理

javascrip
1function file_upload()
2{
3    var pathdata;
4    // フォームデータを取得f
5	var submit_data = new FormData($('#my_form').get(0));
6	
7	//画像ファイルでないときの処理
8	/*if(submit_data.type.indexOf("image") < 0)
9	{
10      alert("画像ファイルを指定してください。");
11      return false;
12    }*/
13	
14    // POSTでアップロード
15    $.ajax({
16        url  : "geo_guide_03_main.php",
17        type: 'POST',
18		data: submit_data,
19		processData: false,	// jQueryがデータを処理しないように設定
20		contentType: false,	// jQueryがcontentTypeを設定しないように設定
21		success: function(data) {
22			alert("success"+data);
23            
24            pathdata = data;
25            console.log(pathdata);
26		},
27		error: function(data) {alert("error:"+data.statusText);}
28    });
29}