PHPバージョン5.6
フレームワーク等は使用しておりません
先日こちらで質問させて頂きました、
https://teratail.com/questions/117724
画像アップローダーについて追加でご質問させて頂きます。
下のソースを見て頂くとわかるのですが、ajaxで送信するフォームは、別のformの入れ子
となっている状態です。この場合だと、ajaxの方のsubmitが出来ますが、外のformでの
submitが出来ないのが現状です。
この画像をアップするフォーム自体が、外のフォームがPOSTする情報の一部となっている為
どうしても、情報を一緒にPOSTしたいと考えております。
もしくは、モダールや別ウィンドウを開かせてそこで入力させて、ajaxの返り値を
addtion.phpの「<p class="imgname">ここに画像ファイル名を入れ込む</p>」の部分
を書き換えるという動きが出来ればと考えております。
【実現したい動きとして(どちらかが出来れば幸いです)】
①formが入れ子の現状でも、問題なくそれぞれのformが送信できるようにしたい
②モダールや別ウィンドウを開かせてそこで入力させて、ajaxの返り値を
addtion.phpの「<p class="imgname">ここに画像ファイル名を入れ込む</p>」の部分
を書き換えるという動きが出来ればと考えております。
何卒お力を貸して頂ければと思います。
宜しくお願い致します。
html
1//addtion.php 2 3 <form class="form-horizontal" role="form" action="addition.php" enctype="multipart/form-data" method="post" id="addition_form"> 4 5・・・・・・・・・・・・・・・省略 6・・・・・・・・・・・・・・・省略 7 8<form action="" method="post" id="imageForm"> 9 <p class="imgname">ここに画像ファイル名を入れ込む</p> 10 <img src="" id="preview" /> 11 <canvas id="canvas"></canvas> 12 <input type="file" id="imageSelect" onChange="imgDisp();" /> 13 <input type="button" onClick="imgUpload();" value="アップロード" /> 14</form> 15 16<button type="submit" name="addition_btn">確認に進む</button> 17</form>
javascript
1function imgDisp() { 2 var file = $("#imageSelect").prop("files")[0]; 3 4 //画像ファイルかチェック 5 if (file["type"] != "image/jpeg" && file["type"] != "image/png" && file["type"] != "image/gif") { 6 alert("jpgかpngかgifファイルを選択してください"); 7 $("#imageSelect").val(''); 8 return false; 9 } 10 11 var fr = new FileReader(); 12 fr.onload = function() { 13 //選択した画像をimg要素に表示 14 $('#preview').attr("src", fr.result); 15 }; 16 fr.readAsDataURL(file); 17} 18 19function imgUpload() { 20 //加工後の横幅を800pxに設定 21 var processingWidth = 800; 22 23 //加工後の容量を100KB以下に設定 24 var processingCapacity = 100000; 25 26 //ファイル選択済みかチェック 27 var fileCheck = $("#imageSelect").val().length; 28 if (fileCheck === 0) { 29 alert("画像ファイルを選択してください"); 30 return false; 31 } 32 33 //imgタグに表示した画像をimageオブジェクトとして取得 34 var image = new Image(); 35 image.src = $("#preview").attr("src"); 36 37 var h; 38 var w; 39 40 //原寸横幅が加工後横幅より大きければ、縦横比を維持した縮小サイズを取得 41 if(processingWidth < image.width) { 42 w = processingWidth; 43 h = image.height * (processingWidth / image.width); 44 45 //原寸横幅が加工後横幅以下なら、原寸サイズのまま 46 } else { 47 w = image.width; 48 h = image.height; 49 } 50 51 //取得したサイズでcanvasに描画 52 var canvas = $("#canvas"); 53 var ctx = canvas[0].getContext("2d"); 54 $("#canvas").attr("width", w); 55 $("#canvas").attr("height", h); 56 ctx.drawImage(image, 0, 0, w, h); 57 58 //canvasに描画したデータを取得 59 var canvasImage = $("#canvas").get(0); 60 61 //オリジナル容量(画質落としてない場合の容量)を取得 62 var originalBinary = canvasImage.toDataURL("image/jpeg"); //画質落とさずバイナリ化 63 var originalBlob = base64ToBlob(originalBinary); //画質落としてないblobデータをアップロード用blobに設定 64 console.log(originalBlob["size"]); 65 66 //オリジナル容量blobデータをアップロード用blobに設定 67 var uploadBlob = originalBlob; 68 69 //オリジナル容量が加工後容量以上かチェック 70 if(processingCapacity <= originalBlob["size"]) { 71 //加工後容量以下に落とす 72 var capacityRatio = processingCapacity / originalBlob["size"]; 73 var processingBinary = canvasImage.toDataURL("image/jpeg", capacityRatio); //画質落としてバイナリ化 74 uploadBlob = base64ToBlob(processingBinary); //画質落としたblobデータをアップロード用blobに設定 75 console.log(capacityRatio); 76 console.log(uploadBlob["size"]); 77 } 78 79 //アップロード用blobをformDataに設定 80 var form = $("#imageForm").get(0); 81 var formData = new FormData(form); 82 formData.append("selectImage", uploadBlob); 83 84 //formDataをPOSTで送信 85 $.ajax({ 86 async: false, 87 type: "POST", 88 url: "upload.php", 89 data: formData, 90 dataType: "text", 91 cache: false, 92 contentType: false, 93 processData: false, 94 error: function (XMLHttpRequest) { 95 console.log(XMLHttpRequest); 96 alert("アップロードに失敗しました"); 97 }, 98 success: function (res) { 99 if(res !== "OK") { 100 console.log(res); 101 alert("アップロードに失敗しました"); 102 } else { 103 alert("アップロードに成功しました"); 104 } 105 } 106 }); 107} 108 109// 引数のBase64の文字列をBlob形式にする 110function base64ToBlob(base64) { 111 var base64Data = base64.split(',')[1], // Data URLからBase64のデータ部分のみを取得 112 data = window.atob(base64Data), // base64形式の文字列をデコード 113 buff = new ArrayBuffer(data.length), 114 arr = new Uint8Array(buff), 115 blob, 116 i, 117 dataLen; 118 // blobの生成 119 for (i = 0, dataLen = data.length; i < dataLen; i++) { 120 arr[i] = data.charCodeAt(i); 121 } 122 blob = new Blob([arr], {type: 'image/jpeg'}); 123 return blob; 124}
php
1【upload.php】 2 3<?php 4session_start(); 5 6//ランダムな英数字の生成 7$str = '1234567890abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPUQRSTUVWXYZ'; 8$ext = substr( 9 str_shuffle($str), 0, 10); 10$time = date("YmdHis"); 11$new_filename = sprintf('%s.%s', $time . sha1_file($_FILES['selectImage']['name']), $ext); 12 13$path = TMP_DIR . $new_filename; 14$_SESSION["new_filename"] = $new_filename; 15 16try{ 17 if (!move_uploaded_file($_FILES['selectImage']['tmp_name'], $path)) { 18 throw new Exception('画像ファイルアップロードエラー!'); 19 } 20 21 echo 'OK'; 22} catch (Exception $ex) { 23 echo $ex->getMessage(); 24} 25 26?> 27
回答3件
あなたの回答
tips
プレビュー