非同期通信を使用して画像をアップロードしたい。

Question

現在FuelPHPをりよ空いて開発しているのですが
画像を一度に複数上げるために非同期通信を実装したいです。
参考にしているサイト
実装したい機能イメージ
このように画像を複数あげられるコードを書きたいのですが
参考にしているサイトが

画像のリサイズ処理
ランダム文字列生成
の処理が省略されており
実際にサンプルを動かそうにもう動かせない状況です。
非同期実装を実現するには
どのようにコードに手を加えれば良いでしょうか？
また参考サイトの画像upload処理をどうしたら実装できるようになりますでしょうか？

現在のコード（同期通信）
非同期通信にて送信できるように今回質問しました。
現在は一枚一枚HTMLとPHPにて動く実装になっています。

<article>
    <h3 class="h_pat01">画像UpLord用</h3>
</article>

<?php echo View::forge('member/error'); ?>
<section>
    <?php echo Form::open(array('enctype' => 'multipart/form-data')) ?>
    <div class="form">
        <table>
            <tr>
                <th>画像<span class="form_require">*</span></th>
                <td class="imgInput">
                    <div><?php echo Form::file('file1[0]'); ?></div>
                </td>
            </tr>
            <tr>
                <th>コメント<span class="form_require">*</span></th>
                <td>
                    <?php echo Form::textarea("body",$piy_post->body,array("class" => "textarea-middle"))?>
                </td>
            </tr>

            <tr>
                <th colspan="2" class="btn_th"><input type="submit" name="submit" value="投稿" class="submit_button" onclick="return check_hope_date()"></th>
            </tr>
        </table>
    </div>
    <?php echo Form::hidden("mode", "do") ?>
    <?php echo Form::close() ?>
</section>

<script type="text/javascript">
    $(function(){
        var setFileInput = $('.imgInput');

        setFileInput.each(function(){
            var selfFile = $(this),
                selfInput = $(this).find('input[type=file]');

            selfInput.change(function(){
                var file = $(this).prop('files')[0],
                    fileRdr = new FileReader(),
                    selfImg = selfFile.find('.imgView');

                if(!this.files.length){
                    if(0 < selfImg.size()){
                        selfImg.remove();
                        return;
                    }
                } else {
                    if(file.type.match('image.*')){
                        if(!(0 < selfImg.size())){
                            selfFile.append('<img alt="" class="imgView">');
                        }
                        var prevElm = selfFile.find('.imgView');
                        fileRdr.onload = function() {
                            prevElm.attr('src', fileRdr.result);
                        }
                        fileRdr.readAsDataURL(file);
                    } else {
                        if(0 < selfImg.size()){
                            selfImg.remove();
                            return;
                        }
                    }
                }
            });
        });
    });
</script>

{
    /**
     * メニューを表示
     *
     * @return $_view ビュー
     */
    public function action_index()
	{

        $post = Input::post();
        $default_values = array();
        $post = myUtil::setDefaultPostData($post,$default_values);

        $file = Input::file();
        $filedata = array();

        $error_flag = false;
        $error_list = array();


        // 初期オブジェクトの生成
        $piy_post = Model_PiyPost::forge();


        // validate
        $error_list = array();
        if (!empty($post['mode']))
        {
            $val = Model_Validate_PiyPost::validate('add');
            if (!$val->run())
            {
                parent::$_view->set_global('error', $val->error());
                $error_flag = true;
            }
        }

        if (!empty($post['mode'])) {
            $piy_post->club_member_id = $this->_club_member->id;
            $piy_post->body = $post["body"];
            $piy_post->lang = $this->_club_member->piy_lang;
            $piy_post->house_id = $this->_club_member->house->id;
            $piy_post->approval_flag = "H";

            if ($this->_club_member->house instanceof Model_House) {
                Model_House::setHousesData(array($this->_club_member->house), Config::get("language"));
            }

            // ファイルアップロード
            if ((!empty($file['file1']['name'])) || (!empty($post['filedata']))) {
                if ($post['mode'] == 'do') {
                    $sizes = array(
                        'L' => array('w' => 400, 'h' => 400),
                        'M' => array('w' => 200, 'h' => 200),
                        'S' => array('w' => 100, 'h' => 100),
                    );

                    $filedata = myImage::doConfirm2("clubmember/tmp/", $sizes, array("image/jpeg"), true);
                    if (!empty($filedata['error'])) {
                        parent::$_view->set_global('custom_error', $filedata['error']);
                        $error_flag = true;
                    }

                    if($error_flag == false){
                        $filedatas = array(
                            '0' => array(
                                'path' => $filedata['image'][0]->path,
                                'name' => $filedata['image'][0]->name,
                                'ext' => $filedata['image'][0]->ext,
                            )
                        );
                        //var_dump($filedatas);

                        //ファイルアップロード
                        $img_id = myImage::doDo($filedatas);
                        if (!empty($img_id)) {
                            $piy_post->img_id = $img_id[0];
                            //var_dump($img_id[0]);
                        }
                    }


                }
            }
        }

        // データをセット
        $data["lang"] = $this->_lang;
        $data["post"] = $post;
        $data["piy_post"] = $piy_post;
        $data["club_member"] = $this->_club_member;
        $data["filedata"] = $filedata;

        // モードに応じて処理を変える
        if ($this->_club_member->blog_flag != "X")
        {
            parent::$_view->set('content', ViewModel::forge('mypage/piy/wait')->set('data', $data));
        }
        else if ((empty($post['mode'])) || $error_flag)
        {
            parent::$_view->set('content', ViewModel::forge('mypage/piy/index')->set('data', $data));
        }
        elseif ($post['mode'] == 'do')    // 確認
        {
            // データをセーブ
            $piy_post->save();

            // 表示
            parent::$_view->set('content', ViewModel::forge('mypage/piy/do'));
        }

        parent::$_view->set('title', ' | ');
        return parent::$_view;
    }
}

Comments

[m.ts10806]

現在のコードで何かエラーが出ているようなら（javascript,php共に）追記してください。

[amaguri]

現在はエラーは出ていません。現在は一枚ずつ同期通信なので非同期であげるやり方が知りたくて質問しました

Answer 1

やらなくてはいけないことがたくさんあるのでとりあえずサンプル上げておきます

• mypage.htm

<script src="https://www.promisejs.org/polyfills/promise-6.1.0.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
  $('input[type=file]').on('change',function(){
    var fd = new FormData();
    var file=$(this).prop('files');
    var me=$(this);
    var prm=[];
    $.each(file,function(i,j){
      prm[i]= new Promise(function(resolver){
        var fr = new FileReader();
        fr.addEventListener("load", function(e){
          fd.append(me.attr('name'), new Blob([e.target.result],{"type":j.type}),j.name );
          console.log(1)
          return resolver(this);
        });
        fr.readAsArrayBuffer(j);
      });
    });
    Promise.all( prm ).then(function(){
      $.ajax({
        "url":"recv_ajax.php",
        "type":"post",
        "data":fd,
        "dataType":"json",
        "processData": false,//appendからみ
        "contentType": false,//fileからみ
      }).done(function(data){
        data.map(function(i){
          $('form').after($('<img>').attr('src',i));
        });
      }).fail(function(xhr,error){
        console.log(error);
      });
    });
  });
});
</script>
<form method="post" action="recv.php" enctype="multipart/form-data">
<input type="file" name="img1[]" accept="image/*" multiple><br>
<input type="submit" value="go"><br>
</form>

• recv_ajax.php

<?php
if(isset($_FILES['img1'])){
  $img=[];
  foreach($_FILES['img1']['tmp_name'] as $key=>$val){
    $fp = fopen($val,"r");
    $src=fread($fp,$_FILES['img1']['size'][$key]);
    fclose($fp);
    $img[] = 'data:'.$_FILES['img1']['type'][$key].';base64,'.base64_encode($src);
    /*mimeだけ修正*/
  }
  print json_encode($img);
}
?>

• recv.php

<?php
if(isset($_FILES['img1'])){
print_r($_FILES['img1']);
}
?>

Comments

[amaguri]

実装したみたのですが参考サイトのような
動きにならずでした。。。

[yambejp]

ごめんなさい、どこが想定と違うか具体的に提示して下さい

[amaguri]

イメージしていたのは
http://etc.imo-tikuwa.com/sequential-ajax-file-upload/#
のサイトのような
読み込みのロードが起きて複数uploadができ、プレビューがでる動きを想定していました、、

[yambejp]

ちなみに私のソースは、multipleで選んだファイルを
選んだタイミングでajaxで送信し、結果をimgタグで表示する部分のみです
質問者さんの環境でそれが動かないのか？
それとも別の機能まで実装してほしいというのか？
そのあたりを補足下さい

[amaguri]

やりたいことが
ajaxの非同期で送るとともに
・画像の複数選択が可能
・参考サイトのように選択した画像の読み込みご、プレビューの表示
を行いたいです

[yambejp]

Win版のIE11,Edge,Firefox,chromeで試したところ、
動いているようです。
質問者さんの環境を提示した上で、どの部分が動かないのでしょうか？

・複数画像が選択できない？
・選択した画像が表示されない？
・その他？

[amaguri]

mac
クローム環境で実装したのですが
画像は複数選択できるのですが
選択した画像のプレビューはです
選択した画像の表示もできません。l

[yambejp]

$.ajaxの戻り値が返ってきてるかどうか
.doneのコールバックの中で
console.log(data)
して確認してみてください。

つまり、送ったけど返ってきてないのか、送ってないかで詰まっている
箇所が違うと思います

[amaguri]

試してみたいと思います。

[yambejp]

今更ですが、今回提示したソースのポイント
・ajaxが使える
・ajax処理にformdataを利用
・formdataにfileをセットするためにfilreaderを利用
・filereaderの読み込み待ちにpromiseを利用
・画像の戻りにbase64エンコードを利用
・ajaxのdataTypeにJSONを利用

このあたりのどこかで引っかかっているのだと思います

[amaguri]

無事解決しました！！ご丁寧にありがとうございました！！
参考のサイトの同様の動きもテストしたいので
別の質問させていただきます！

[yambejp]

あら・・・通ってしまいましたか？
凡ミスなら不問ですが、どこで詰まっていたか提示してもらったほうが
ナレッジベースとしてはよろしいかと

[amaguri]

すみませんファイルの参照先をまちがていました。
すみませんでした。。