質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.51%

  • PHP

    24023questions

    PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

  • jQuery

    8150questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • Ajax

    1326questions

    Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

ajaxを利用した画像アップローダー

解決済

回答 3

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 548

kans00229

score 19

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>」の部分
を書き換えるという動きが出来ればと考えております。

何卒お力を貸して頂ければと思います。
宜しくお願い致します。

//addtion.php

 <form class="form-horizontal" role="form" action="addition.php" enctype="multipart/form-data" method="post" id="addition_form">

・・・・・・・・・・・・・・・省略
・・・・・・・・・・・・・・・省略

<form action="" method="post" id="imageForm">
    <p class="imgname">ここに画像ファイル名を入れ込む</p> 
    <img src="" id="preview" />
    <canvas id="canvas"></canvas>
    <input type="file" id="imageSelect" onChange="imgDisp();" />
    <input type="button" onClick="imgUpload();" value="アップロード" />
</form>

<button type="submit" name="addition_btn">確認に進む</button> 
</form>
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);
} 

function imgUpload() {
    //加工後の横幅を800pxに設定
    var processingWidth = 800;            

    //加工後の容量を100KB以下に設定
    var processingCapacity = 100000;                               

    //ファイル選択済みかチェック
    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: "upload.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;
}         
【upload.php】

<?php
session_start();

//ランダムな英数字の生成
$str = '1234567890abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPUQRSTUVWXYZ';
$ext = substr(
  str_shuffle($str), 0, 10);
$time = date("YmdHis");
$new_filename = sprintf('%s.%s', $time . sha1_file($_FILES['selectImage']['name']), $ext);

$path = TMP_DIR . $new_filename;
$_SESSION["new_filename"] = $new_filename;

try{
    if (!move_uploaded_file($_FILES['selectImage']['tmp_name'], $path)) {
        throw new Exception('画像ファイルアップロードエラー!');
    }

    echo 'OK';
} catch (Exception $ex) {
    echo $ex->getMessage();
}

?>
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • defghi1977

    2018/03/23 09:40

    そもそもform要素は入れ子にできない筈では…

    キャンセル

  • kans00229

    2018/03/23 10:49

    defghi様 ご回答有難うございます。formが入れ子にできないことは存じております。私の説明が悪くて申し訳ございません。その中で、解決方法をお教え頂ければ幸いでございます。

    キャンセル

  • defghi1977

    2018/03/23 11:43

    究極的にはform要素がなくても実現できる機能ですが, 入れ子になったform要素にこだわる理由はありますか?

    キャンセル

  • kans00229

    2018/03/23 12:07

    私に知識がないため、参考サイトのソースを参考にさせて頂いております。 究極としては、外側のフォームで他の入力項目を合わせて遅れればよいです。 本当はajaxで送る必要もないと思われます。私の知識では、javascritは編集するのが 難しいため、そのまま使用しているのが現状です。 BLOB型に変更したものを、ajaxでなく外側のformでPOST出来れば、それが一番良いかも 知れないです。お力をお貸し頂ければ幸いです。お願い致します。

    キャンセル

回答 3

+4

htmlとしても、<form>を入れ子にすることが、まちがっていると思います。

下記、検証はしていない内容ですが。

単純に、1つの<form>でも大丈夫だと思うのですが、ダメなのでしょうか?

画像アップロードは、ajaxで処理、しかも送信先はjs側で記載しているので、

form#imageFormは撤去し、

function imgUpload() の

//アップロード用blobformDataに設定
    var form = $("#imageForm").get(0);
   ↓
    var form = $("#addition_form").get(0);

でも処理は可能かと思います。

これだと余計なデータが送信されるのが困る、というのであれば、

upload.php に渡したいデータは、selectimage として、手動で追加している分だけのように見えますので、

<form id="addition_form">
</form>
<!-- 横並びにする -->
<form id="imageForm">
<!-- 中身は空っぽでも大丈夫なはず -->
</form>

でも良いのではないかと。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

+1

んーと、先日の質問ってのがどれか知らないのでリンク貼ってほしいところですが、

ajaxでの画像のアップロードは、FormDataが使えないのなら
必要な時に<form/>を見えないように動的に生成してそこ経由でアップロード、後、削除、
が、常套手段ですよ。

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/03/23 11:39

    例示コードでFormData使ってるな… そうすると、なぜ画像用の<form/>を作りたいのかが全くわからない…。

    キャンセル

  • 2018/03/23 12:15

    licker様 ご回答有難うございます。そもそも、ことの始まりが、モバイル端末で画像をアップするときに自動で容量を圧縮したいというのがこのサンプルにたどり着きました。

    defghi1977様への返答でもお伝えさせて頂きましたが、私に知識がないため、参考サイトのソースを参考にさせて頂いております。究極としては、外側のフォームで他の入力項目を合わせて遅れればよいです。
    本当はajaxで送る必要もないと思われます。私の知識では、javascritは編集するのが難しいため、そのまま使用しているのが現状です。

    BLOB型に変更したものを、ajaxでなく外側のformでPOST出来れば、それが一番良いかも知れないです。お力をお貸し頂ければ幸いです。お願い致します。

    キャンセル

check解決した方法

0

form部分をモダールで開かせて、モダールに別のactionを与える仕様で実装しました。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

同じタグがついた質問を見る

  • PHP

    24023questions

    PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

  • jQuery

    8150questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • Ajax

    1326questions

    Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。