AJAXを実装するためのコードを修正してください

-1

私はこれらの2つのファイルindex.phpとuploadcover.inc.phpを持っており、入力フィールドをfileとしてindex.phpのフォームを送信すると、画像をアップロードしてカバー画像としてアップロードできます。コードは正常に動作しますが、このindex.phpファイルを修正して、AJAXを使用してページをリフレッシュせずに、uploadcover.inc.phpからヘッダー関数を使用してindex.phpにリダイレクトするようにします。私を出す。AJAXを実装するためのコードを修正してください

のindex.php =>

<?php session_start(); ?> 
<!DOCTYPE html> 
<html> 
<body> 
    <form action="include/uploadcover.inc.php" method="post" enctype="multipart/form-data"> 
    <input type="file" name="file" id="cover-upload" style="display:none" onchange="this.form.submit();"> 
    <label for="cover-upload" class="fa fa-camera fa-2x" aria-hidden="true"></label> 
    </form> 
</body> 
</html>

uploadcover.inc.php =>

<?php 
session_start(); 
include_once 'dbh.inc.php'; 
$sessionid = $_SESSION['u_id']; 
    $file= $_FILES['file']; 
    $fileName= $file['name']; 
    $fileTmpName= $file['tmp_name']; 
    $fileSize= $file['size']; 
    $fileError= $file['error']; 
    $fileType= $file['type']; 

    $fileExt = explode('.',$fileName); 
    $fileActualExt = strtolower(end($fileExt)); 

    $allowed = array('jpg','jpeg','png','gif'); 

    if(in_array($fileActualExt,$allowed)){ 
    if($fileError=== 0){ 
     if($fileSize<3145728){ 
     $fileNameNew = "cover".$sessionid.".".$fileActualExt; 
     $fileDestination = '../profile/'.$fileNameNew; 
     move_uploaded_file($fileTmpName,$fileDestination); 
     $sql = "UPDATE coverimg SET status=0 WHERE user_id='$sessionid'"; 
     mysqli_query($conn,$sql); 
     header("Location: ../index.php?upload=success"); 
     } else { 
     $_SESSION['errors']['size'] = 1; 
     session_write_close(); 
     header("Location: ../index.php?upload=size_exceeded_3MB"); 
     } 
    } else { 
     $_SESSION['errors']['upload'] = 1; 
     session_write_close(); 
     header("Location: ../index.php?upload=error"); 
    } 
    } else{ 
    $_SESSION['errors']['type'] = 1; 
    session_write_close(); 
    header("Location: ../index.php?upload=typeerror"); 
    }

ヘルプ、index.phpファイルのためのAJAXコードでくれアウトはせずに同じことを実現するためにuploadcover.inc.phpにヘッダーが必要です。

出典

2017-11-07 Anonymous

編集用https://stackoverflow.com/questions/2320069/jquery-ajax-file-upload?rq=1 – Hkachhia

あなたは、AJAXを使用して、PHPでリダイレクトすることはできません、あなたはPHPからURLを返すと、目的のURLにリダイレクトするwindow.location.hrefを使用する必要があります。 ajaxを使用しているので、エラーURL（index.php?upload=error、upload=size_exceeded_3M、index.php?upload=typeerror）は必要ありません。エラーメッセージを表示するには、<p>を追加する必要があります。

のは、Ajaxの機能を作成し、ユーザ

<p id="display-error" style="color: red"></p>

にエラーを表示するには、<p>を追加

<form action="include/uploadcover.inc.php" method="post" enctype="multipart/form-data"> 
    <input type="file" name="file" id="cover-upload" style="display:none" onchange="submit_cover()"> 
    <label for="cover-upload" class="fa fa-camera fa-2x" aria-hidden="true"></label> 
</form>

当社のAjax機能を呼び出すためにonchangeを変更することにより、フォームを変更してみましょう。

function submit_cover() { 
    var formData = new FormData($('form')[0]); // Create an arbitrary FormData instance 

    $.ajax('include/uploadcover.inc.php', { 
     type  : 'POST', 
     processData : false, 
     contentType : false, 
     data  : formData, 
     success  : function (data) { 
      var response = JSON.parse(data); 
      if (response.redirect) { 
       window.location.href = response.redirect; 
      }else if (response.moveerror) { 
       $('#display-error').html(response.moveerror); 
      }else if (response.sizeerror) { 
       $('#display-error').html(response.sizeerror); 
      }else if (response.uploaderror) { 
       $('#display-error').html(response.uploaderror); 
      }else if (response.typeerror) { 
       $('#display-error').html(response.typeerror); 
      } 
     } 
    }); 
}

PHPからheader機能を削除し、JavaScriptに応答を返し、そこからリダイレクトします。

<?php 
session_start(); 
include_once 'dbh.inc.php'; 
$sessionid = $_SESSION['u_id']; 
$file = $_FILES['file']; 
$fileName = $file['name']; 
$fileTmpName = $file['tmp_name']; 
$fileSize = $file['size']; 
$fileError = $file['error']; 
$fileType = $file['type']; 

$fileExt = explode('.', $fileName); 
$fileActualExt = strtolower(end($fileExt)); 

$allowed = array('jpg', 'jpeg', 'png', 'gif'); 

$response = []; 

if (in_array($fileActualExt, $allowed)) { 
    if ($fileError === 0) { 
     if ($fileSize < 3145728) { 
      $fileNameNew = "cover" . $sessionid . "." . $fileActualExt; 
      $fileDestination = '../profile/' . $fileNameNew; 
      if (move_uploaded_file($fileTmpName, $fileDestination)) { 
       // if file was moved update database with the new data 
       $sql = "UPDATE coverimg SET status=0 WHERE user_id='$sessionid'"; 
       mysqli_query($conn, $sql); 
       $response['redirect'] = '../index.php?upload=success'; 
      } else { 
       $response['moveerror'] = 'Unable to move the file'; 
      } 
     } else { 
      $_SESSION['errors']['size'] = 1; 
      session_write_close(); 
      $response['sizeerror'] = 'Upload size exceeded'; 
     } 
    } else { 
     $_SESSION['errors']['upload'] = 1; 
     session_write_close(); 
     $response['uploaderror'] = 'Upload error'; 
    } 
} else { 
    $_SESSION['errors']['type'] = 1; 
    session_write_close(); 
    $response['typeerror'] = 'Allowed types: jpg, jpeg, png and gif'; 
} 

echo json_encode($response);

出典

2017-12-24 11:00:33 julekgwa