前提・実現したいこと
ここに質問の内容を詳しく書いてください。
まずjavascriptで画像をリサイズした後それをphpファイルに飛ばしアップロードすると同時にデータベースに登録すると言うシステムを作っています。
現状以下のコードで画像をアップロードすることはできていますが、データベースに登録することはできていません。
その際なぜかinsert文でwhere句をつけなければ登録することができますが、where句をつけると登録ができなくなります。
そこでwhere句をつけたまま画像の名前をデータベースに登録する方法をご教授いただけますと幸いです。
何卒宜しくお願い申し上げます。
発生している問題・エラーメッセージ
insert文でwhere句をつけなければ登録することができるが、where句をつけると登録ができなくなる。
該当のソースコード
PHP
1echo '<form action="" id="imageForm" method="post" enctype="multipart/form-data">'; 2 echo '<div id="drag-drop-area">'; 3 4 echo '<p class="dropZone"><input id="imageSelect" type="file" value="ファイルを選択" name="image" onChange="imgDisp();"></p>'; 5 6 echo '<p><INPUT type="submit" name="submit" onClick="imgUpload();" value="送信" class="updateBtn"></p>'; 7 8 echo '<img src="" id="preview" /><canvas id="canvas"></canvas>'; 9 10 echo '</div></form>'; 11 12<script> 13function imgDisp() { 14 var file = $("#imageSelect").prop("files")[0]; 15 16 //画像ファイルかチェック 17 if (file["type"] != "image/jpeg" && file["type"] != "image/png" && file["type"] != "image/gif") { 18 alert("jpgかpngかgifファイルを選択してください"); 19 $("#imageSelect").val(''); 20 return false; 21 } 22 23 var fr = new FileReader(); 24 fr.onload = function() { 25 //選択した画像をimg要素に表示 26 $('#preview').attr("src", fr.result); 27 }; 28 fr.readAsDataURL(file); 29} 30 31</script> 32 33<script> 34 35function imgUpload() { 36 //加工後の横幅を800pxに設定 37 var processingWidth = 2000; 38 39 //加工後の容量を100KB以下に設定 40 var processingCapacity = 200000; 41 42 //ファイル選択済みかチェック 43 var fileCheck = $("#imageSelect").val().length; 44 if (fileCheck === 0) { 45 alert("画像ファイルを選択してください"); 46 return false; 47 } 48 49 //imgタグに表示した画像をimageオブジェクトとして取得 50 var image = new Image(); 51 image.src = $("#preview").attr("src"); 52 53 var h; 54 var w; 55 56 //原寸横幅が加工後横幅より大きければ、縦横比を維持した縮小サイズを取得 57 if(processingWidth < image.width) { 58 w = processingWidth; 59 h = image.height * (processingWidth / image.width); 60 61 //原寸横幅が加工後横幅以下なら、原寸サイズのまま 62 } else { 63 w = image.width; 64 h = image.height; 65 } 66 67 //取得したサイズでcanvasに描画 68 var canvas = $("#canvas"); 69 var ctx = canvas[0].getContext("2d"); 70 $("#canvas").attr("width", w); 71 $("#canvas").attr("height", h); 72 ctx.drawImage(image, 0, 0, w, h); 73 74 //canvasに描画したデータを取得 75 var canvasImage = $("#canvas").get(0); 76 77 //オリジナル容量(画質落としてない場合の容量)を取得 78 var originalBinary = canvasImage.toDataURL("image/jpeg"); //画質落とさずバイナリ化 79 var originalBlob = base64ToBlob(originalBinary); //画質落としてないblobデータをアップロード用blobに設定 80 console.log(originalBlob["size"]); 81 82 //オリジナル容量blobデータをアップロード用blobに設定 83 var uploadBlob = originalBlob; 84 85 //オリジナル容量が加工後容量以上かチェック 86 if(processingCapacity <= originalBlob["size"]) { 87 //加工後容量以下に落とす 88 var capacityRatio = processingCapacity / originalBlob["size"]; 89 var processingBinary = canvasImage.toDataURL("image/jpeg", capacityRatio); //画質落としてバイナリ化 90 uploadBlob = base64ToBlob(processingBinary); //画質落としたblobデータをアップロード用blobに設定 91 console.log(capacityRatio); 92 console.log(uploadBlob["size"]); 93 } 94 95 //アップロード用blobをformDataに設定 96 var form = $("#imageForm").get(0); 97 var formData = new FormData(form); 98 formData.append("selectImage", uploadBlob); 99 100 //formDataをPOSTで送信 101 $.ajax({ 102 async: false, 103 type: "POST", 104 url: "output.php", 105 data: formData, 106 dataType: "text", 107 cache: false, 108 contentType: false, 109 processData: false, 110 error: function (XMLHttpRequest) { 111 console.log(XMLHttpRequest); 112 //alert("アップロードに失敗しました"); 113 }, 114 115 116 success: function (res) { 117 if(res !== "OK") { 118 console.log(res); 119 //alert("アップロードに失敗しました"); 120 } else { 121 //alert("アップロードに成功しました"); 122 123 } 124 } 125 }); 126} 127 128// 引数のBase64の文字列をBlob形式にする 129function base64ToBlob(base64) { 130 var base64Data = base64.split(',')[1], // Data URLからBase64のデータ部分のみを取得 131 data = window.atob(base64Data), // base64形式の文字列をデコード 132 buff = new ArrayBuffer(data.length), 133 arr = new Uint8Array(buff), 134 blob, 135 i, 136 dataLen; 137 // blobの生成 138 for (i = 0, dataLen = data.length; i < dataLen; i++) { 139 arr[i] = data.charCodeAt(i); 140 } 141 blob = new Blob([arr], {type: 'image/jpeg'}); 142 return blob; 143 144} 145 146 147</script>
php
1以下POST先のoutput.php 2 3<?php 4session_start(); 5$pdo=new PDO('mysql:host=localhost;dbname=abc;charset=utf8', 'root', ''); 6 7date_default_timezone_set('Asia/Tokyo'); 8 9 10 $user_id=$_SESSION['users']['user_id']; 11 $username=$_SESSION['users']['username']; 12 $email=$_SESSION['users']['email']; 13 $password=$_SESSION['users']['password']; 14 15 16 $file_name = $_FILES['image']['name']; 17 $extension = pathinfo($file_name, PATHINFO_EXTENSION); //拡張子取得 18 $tmp_path = $_FILES['selectImage']['tmp_name']; 19 $file_dir_path = "../../../img/"; 20 $uniq_name = date("YmdHis").md5(uniqid(microtime(),1)).session_id() . "." . $extension; 21 22if (isset($tel)) { 23 24 25 if (is_uploaded_file($tmp_path)) { 26 if(move_uploaded_file( $tmp_path, $file_dir_path . $uniq_name)) { 27 chmod($file_dir_path . $uniq_name, 0644); 28 29 30 $sql=$pdo->prepare("update users set icon=? where user_id={$user_id}"); 31 $sql->execute([$uniq_name]); 32 33 $_SESSION['users']=[ 34 'user_id'=>$user_id, 'username'=>$username, 'email'=>$email, 'password'=>$password]; 35 36 header("Location: ../../page.php"); 37 exit(); 38 39 40 } else { 41 echo "Error:アップロードできませんでした。"; 42 } 43 } 44 45} else { 46 47 48 if (is_uploaded_file($tmp_path)) { 49 if(move_uploaded_file( $tmp_path, $file_dir_path . $uniq_name)) { 50 chmod($file_dir_path . $uniq_name, 0644); 51 52 53 $sql=$pdo->prepare("insert into users(icon) values(?) where user_id={$user_id}"); 54 $sql->execute([$uniq_name]); 55 56 $_SESSION['users']=[ 57 'user_id'=>$user_id, 'username'=>$username, 'email'=>$email, 'password'=>$password]; 58 59 header("Location: ../../page.php"); 60 exit(); 61 62 63 } else { 64 echo "Error:アップロードできませんでした。"; 65 } 66 } 67 68} 69 70 71?>
試したこと
・formのactionからアップロード用phpに飛ばす(リサイズを飛ばすためリサイズできない)
・where句の代わりにhavingやgroup byで登録先を絞り込む(結果はwhere句と同じく登録できない)
補足情報(FW/ツールのバージョンなど)
PHP のバージョン: 7.2.3
回答2件
あなたの回答
tips
プレビュー