以前作った、Webアプリ
これに際して、サーバに作った画像を削除する方法です。
Webアプリ作成に関してのよもやま話はこちら
では、本題です。
環境
conohawingというレンタルサーバーを使っています。
WordPressのcocoonというテーマを使っています。
記事作成の下の方に
カスタムJavascriptの枠でJSを動かしています。
必要なソースコード
Javascript
WPでボタンクリックでPHP実行しページ遷移無しでpost送信してJavascriptで結果を表示する方法
上のリンク先のJavascriptを参考に
サーバの画像を削除するためのPHPにPOSTするコードを追記しました。
$('#AjaxForm').submit(function(event) {
// HTMLでの送信をキャンセル
event.preventDefault();
var $form = $(this);
var $button = $form.find('.submit');
$.ajax({
url: $form.attr('action'),
type: $form.attr('method'),
data: $form.serialize(),
timeout: 10000, // 単位はミリ秒
// 送信前
beforeSend: function(xhr, settings) {
// ボタンを無効化し、二重送信を防止
$button.attr('disabled', true);
$("#result").text("")
},
// 応答後
complete: function(xhr, textStatus) {
// ボタンを有効化し、再送信を許可
$button.attr('disabled', false);
},
// 通信成功時の処理
success: function(result, textStatus, xhr) {
// 入力値を初期化
$form[0].reset();
$("#result").append(result);
$.ajax({
type: 'POST',
url: 'https://*******/del_file.php',
cache: false,
data: 'A='+B+'&'+'C='+D
});
},
// 通信失敗時の処理
error: function(xhr, textStatus, error) {
alert('エラー暫くたってからお試しください。');
}
});
// …
});
赤文字部分が、アレンジした箇所になります。
urlはPHPファイルまでのパス。
引数はdataの部分で行い、
AとCはPHPに送る変数。B,Dが実際のデータ（数値など）になります。
PHP
del_file.phpの中身がこちら。
<?php
echo $base = $_POST['A'];
echo $hikaku = $_POST['C'];
unlink ("/***ファイルまでのフルパス***/".$base.'.png');
unlink ("/***ファイルまでのフルパス***/".$hikaku.'.png');
?>経緯
Javascriptがあるんだから、JSでファイル操作すればいいじゃないかと
色々調べていたのですが。
クライアントサイドのJavaScriptではrequireを使って
Node.jsのモジュールを読み込むことはできません。
という記述を発見。
Node.jsというのはよく分かりませんが
カスタムJavascriptも当然、クライアント側になるので
「Javascript ファイル削除」とかで見つかるコードは使えない。と判断。
ならばと、PHPでPOSTはしているので
サーバサイドにあるPHPなら、ファイル削除もできるんじゃないかと考えた訳です。
参考ページ
参考にしたページはこちら。
Webうぉーかー 様
WPでボタンクリックでPHP実行しページ遷移無しでpost送信してJavascriptで結果を表示する方法
グラビカ学習帳 様
JavaScriptから引数つきでPHPを実行
Fの視点 様
JavascriptからPHPを実行したい
あとは、おなじみのTechAcademy 様
JavaScriptでPOST送信する方法を現役エンジニアが解説【初心者向け】
コメント