ajaxでphpファイルを処理した後の、別ページへのリダイレクトができない

Question

前提・実現したいこと

javascriptで画像をリサイズした後phpにてアップロード及びデータベースへ画像パスを挿入するというシステムを作成しています。
ここに一連の処理が終わった後別ページへリダイレクトする処理を追加したいのですが、phpでのheaderリダイレクトもjavascriptのlocation.hrefリダイレクトも機能しません。
そこでリダイレクト処理を入れる場所などを教えていただけますと幸いです。
よろしくお願いします。

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

リダイレクトが機能しない

該当のソースコード

echo '<form action="" id="imageForm" method="post" enctype="multipart/form-data">';
echo '<div id="drag-drop-area">';

echo '<p class="dropZone"><input id="imageSelect" type="file" value="ファイルを選択" name="image" onChange="imgDisp();"></p>';

echo '<p><INPUT type="submit" name="submit" onClick="imgUpload();" value="送信" class="updateBtn"></p>';

echo '<img src="" id="preview" /><canvas id="canvas"></canvas>';

echo '</div></form>';

<script>
function imgDisp() {
    var file = $("#imageSelect").prop("files")[0];
                
    //画像ファイルかチェック
    if (file["type"] != "image/jpeg" && file["type"] != "image/png" && file["type"] != "image/gif") {
        alert("jpgかpngかgifファイルを選択してください");
        $("#imageSelect").val('');
        return false;
    }
                
    var fr = new FileReader();
    fr.onload = function() {
        //選択した画像をimg要素に表示
        $('#preview').attr("src", fr.result);                        
    };
    fr.readAsDataURL(file);
} 
	  
</script>
	  
<script>

function imgUpload() {
    //加工後の横幅を800pxに設定
    var processingWidth = 2000;            
            
    //加工後の容量を100KB以下に設定
    var processingCapacity = 200000;                               

    //ファイル選択済みかチェック
    var fileCheck = $("#imageSelect").val().length;
    if (fileCheck === 0) {
        alert("画像ファイルを選択してください");
        return false;
    }
                
    //imgタグに表示した画像をimageオブジェクトとして取得
    var image = new Image();
    image.src = $("#preview").attr("src");

    var h;
    var w;

    //原寸横幅が加工後横幅より大きければ、縦横比を維持した縮小サイズを取得
    if(processingWidth < image.width) {
        w = processingWidth;
        h = image.height * (processingWidth / image.width);

    //原寸横幅が加工後横幅以下なら、原寸サイズのまま
    } else {
        w = image.width;
        h = image.height;
    }

    //取得したサイズでcanvasに描画
    var canvas = $("#canvas");
    var ctx = canvas[0].getContext("2d");
    $("#canvas").attr("width", w);
    $("#canvas").attr("height", h);
    ctx.drawImage(image, 0, 0, w, h);                          

    //canvasに描画したデータを取得
    var canvasImage = $("#canvas").get(0);

    //オリジナル容量(画質落としてない場合の容量)を取得
    var originalBinary = canvasImage.toDataURL("image/jpeg"); //画質落とさずバイナリ化
    var originalBlob = base64ToBlob(originalBinary); //画質落としてないblobデータをアップロード用blobに設定
    console.log(originalBlob["size"]);

    //オリジナル容量blobデータをアップロード用blobに設定
    var uploadBlob = originalBlob;                    

    //オリジナル容量が加工後容量以上かチェック
    if(processingCapacity <= originalBlob["size"]) {
        //加工後容量以下に落とす
        var capacityRatio = processingCapacity / originalBlob["size"];
        var processingBinary = canvasImage.toDataURL("image/jpeg", capacityRatio); //画質落としてバイナリ化
        uploadBlob = base64ToBlob(processingBinary); //画質落としたblobデータをアップロード用blobに設定
        console.log(capacityRatio);                        
        console.log(uploadBlob["size"]);
    }

    //アップロード用blobをformDataに設定
    var form = $("#imageForm").get(0);
    var formData = new FormData(form);                    
    formData.append("selectImage", uploadBlob);

    //formDataをPOSTで送信
    $.ajax({
        async: false,
        type: "POST",
        url: "./output.php",
        data: formData,
        dataType: "text",
        cache: false,
        contentType: false,
        processData: false,
        error: function (XMLHttpRequest) {
            console.log(XMLHttpRequest);
            //alert("アップロードに失敗しました");
        },
		
		
        success: function (res) {
            if(res !== "OK") {
                console.log(res);
                //alert("アップロードに失敗しました");
            } else {
                //alert("アップロードに成功しました");
				
            }
			
        }
    });
	
}

// 引数のBase64の文字列をBlob形式にする
function base64ToBlob(base64) {
    var base64Data = base64.split(',')[1], // Data URLからBase64のデータ部分のみを取得
          data = window.atob(base64Data), // base64形式の文字列をデコード
          buff = new ArrayBuffer(data.length),
          arr = new Uint8Array(buff),
          blob,
          i,
          dataLen;
    // blobの生成
    for (i = 0, dataLen = data.length; i < dataLen; i++) {
        arr[i] = data.charCodeAt(i);
    }
	
    blob = new Blob([arr], {type: 'image/jpeg'});
    return blob;
location.href = "../index.php";
}

<?php
session_start();
$pdo=new PDO('mysql:host=localhost;dbname=xxx;charset=utf8', 'root', '');
	
date_default_timezone_set('Asia/Tokyo');
	
	
	$user_id=$_SESSION['users']['user_id'];
	$username=$_SESSION['users']['username'];
	$email=$_SESSION['users']['email'];
	$password=$_SESSION['users']['password'];
	

  $file_name = $_FILES['image']['name'];
  $extension = pathinfo($file_name, PATHINFO_EXTENSION); //拡張子取得
  $tmp_path = $_FILES['selectImage']['tmp_name'];
  $file_dir_path = "../img/";
  $uniq_name = date("YmdHis").md5(uniqid(microtime(),1)).session_id() . "." . $extension;


	
	
  if (is_uploaded_file($tmp_path)) {
    if(move_uploaded_file( $tmp_path, $file_dir_path . $uniq_name)) {
      chmod($file_dir_path . $uniq_name, 0644);
		
echo('<pre>');
var_dump($uniq_name);
echo('</pre>');
		
		
		$sql=$pdo->prepare("update users set icon=? where user_id={$user_id}");
		$sql->execute([$uniq_name]);
		
		$_SESSION['users']=[
			'user_id'=>$user_id, 'username'=>$username, 'email'=>$email, 'password'=>$password];
		
		header("Location: ../index.php");
		exit();
	
		
    } else {
      echo "Error:アップロードできませんでした。";
    }
  }
	

	

?>

試したこと

様々な位置にリダイレクト処理を記載

補足情報（FW/ツールのバージョンなど）

PHP のバージョン: 7.2.3

Answer 1

    return blob;
location.href = "../index.php";
}

とりあえずここだけですがreturnを実行した時点で関数が終了します。
ので次の行のlocation.href...は実行されません

Comments

[Dongrill]

なるほど解決できました。
ありがとうございました。

Answer 2

コードは何をやろうとしているのか理解できなかったので読んでいません。

多分、元々の発想が間違っていると思います。

ajax を使用して、画像をアップロードしているのであれば、アップロード完了後に php 側から、「完了」を示す文字列をブラウザに返してやり、ブラウザ側の JavaScript で画面を遷移させることになります。

つまり、redirect 処理を担うのは、ajax 処理の完了を受け取った JavaScript です。