WeChat WEUI 経由で画像をアップロードする方法、バックグラウンド PHP で画像を処理する方法は?

質問: WeChat WEUI を通じて画像をアップロードする方法、バックグラウンド PHP はそれをどのように処理すべきですか?

1. 現在発生している問題は、アプリケーションの weui 画像アップロード フレームワークですが、コード内のプレビュー部分 li は blob 型の画像を取得します。ただし、ajax を介して php に送信された入力は 1 つだけであり、取得できるのは最後の画像のみです。

<p class="weui-uploader__bd">
    <ul class="weui-uploader__files" id="uploaderFiles" >
        <li class="weui-uploader__file" style="background-image:url(&#39;/Public/Admin/images/pic_160.png&#39;)"></li>
        <li class="weui-uploader__file weui-uploader__file_status" style="background-image:url(&#39;/Public/Admin/images/pic_160.png&#39;)">
            <p class="weui-uploader__file-content">50%</p>
        </li>
    </ul>
    <p class="weui-uploader__input-box">
        <input id="uploaderInput" name="photo" class="weui-uploader__input" type="file" accept="image/*" />
    </p>
</p>

2. バックグラウンドで $_FILES を通じて取得できる入力は 1 つだけです。どうすればすべて入手できますか? weui を使用して写真をアップロードするにはどうすればよいですか?

[] を追加せずに写真を貼り付けると、

[] を追加すると、返される内容は次のようになります:

ソリューション

 //解决思路如下:  通过改写他的文件隐藏域，每次选择一个图片之后，自动隐藏当前file，然后通过js插入一个新的空文件 type=“file”,这样就可以实现多文件上传。改写代码如下：  
      
         $(function(){
            var tmpl = &#39;<li id="#imgname#_li" class="weui-uploader__file" style="background-image:url(#url#)"></li>&#39;,
                $gallery = $("#gallery"), $galleryImg = $("#galleryImg"),
                $uploaderInput = $("#uploaderInput"),
                $uploaderFiles = $("#uploaderFiles")
                ;
            //此处的on 需要改成 live ,因为jquery插入html，js事件会失效，采用live
            $uploaderInput.live("change", function(e){
                var src, url = window.URL || window.webkitURL || window.mozURL, files = e.target.files;
                for (var i = 0, len = files.length; i < len; ++i) {
                    var file = files[i];
    
                    if (url) {
                        src = url.createObjectURL(file);
                    } else {
                        src = e.target.result;
                    }
                    var src_split = src.split(&#39;/&#39;); 
                    $uploaderFiles.append($(tmpl.replace(&#39;#url#&#39;, src).replace(&#39;#imgname#&#39;, src_split[src_split.length-1])));
                     
                     //其中img_str 为我自己写的隐藏文本框，用来存放所有的图片名称组成的字符,类似"&#39;名称1&#39;,&#39;名称2&#39;，&#39;名称3&#39;"，因为我用这个隐藏框的值，来删除页面页面的指定图片。
                    if($("#img_str").val() == &#39;&#39; || $("#img_str").val() == null){
                       $("#img_str").val("&#39;"+src_split[src_split.length-1]+"&#39;");
                    }else{
                       $("#img_str").val($("#img_str").val()+",&#39;"+src_split[src_split.length-1]+"&#39;");
                    }
                    
                    //开启隐藏上传 p
                    $(this).after(&#39;<input id="uploaderInput"   name="result_file[]"  class="weui-uploader__input" type="file"   accept="image/*" multiple/>&#39;);
                    $(this).hide();
                    $(this).attr({id:""+src_split[src_split.length-1]+"_input"}); 
                }
            });
            $uploaderFiles.on("click", "li", function(){
                $galleryImg.attr("style", this.getAttribute("style"));
                $gallery.fadeIn(100);
            });
            $gallery.on("click", function(){
                $gallery.fadeOut(100);
            });
         
             //删除图片  删除图片的代码也贴出来。
             $(".weui-gallery__del").click(function(){ 
                  var imgback = $(this).parent("p").prev().attr("style");
                  var imgback_array= imgback.split(&#39;)&#39;);
                  imgback_array= imgback_array[0].split(&#39;/&#39;);
                  $("#"+imgback_array[imgback_array.length-1]+"_input").remove();
                  $("#"+imgback_array[imgback_array.length-1]+"_li").remove();
    
                  var img_str = $("#img_str").val().split(&#39;,&#39;);
                  var img_str_new = &#39;&#39;;
                  for(var i=0;i<img_str.length;i++){
                     if(img_str[i] != "&#39;"+imgback_array[imgback_array.length-1]+"&#39;"){
                         if(img_str_new == &#39;&#39;){
                             img_str_new = img_str[i];
                         }else{
                               img_str_new = img_str_new+","+img_str[i];
                         }
                     }
                  }
                  $("#img_str").val(img_str_new);
             }); 
        });
     
     
     
     /**
     
     后台获取数打印出来 如下 包含3张图片
     **/
     array (size=2)
  &#39;error&#39; => 
    array (size=0)
      empty
  &#39;files&#39; => 
    array (size=3)
      0 => 
        array (size=14)
          &#39;file_name&#39; => string &#39;e2dafa6a5f06dc34004607e1f00a4824.jpg&#39; (length=36)
          &#39;file_type&#39; => string &#39;image/jpeg&#39; (length=10)
          &#39;file_path&#39; => string &#39;E:/wamp/wamp/www/test/js/fileUpload/server/upload/tsjy/&#39; (length=64)
          &#39;full_path&#39; => string &#39;E:/wamp/wamp/www/test/js/fileUpload/server/upload/tsjy/e2dafa6a5f06dc34004607e1f00a4824.jpg&#39; (length=100)
          &#39;raw_name&#39; => string &#39;e2dafa6a5f06dc34004607e1f00a4824&#39; (length=32)
          &#39;orig_name&#39; => string &#39;-0.jpg&#39; (length=6)
          &#39;client_name&#39; => string &#39;6880_jpg_wh300.jpg&#39; (length=18)
          &#39;file_ext&#39; => string &#39;.jpg&#39; (length=4)
          &#39;file_size&#39; => float 93.32
          &#39;is_image&#39; => boolean true
          &#39;image_width&#39; => int 960
          &#39;image_height&#39; => int 300
          &#39;image_type&#39; => string &#39;jpeg&#39; (length=4)
          &#39;image_size_str&#39; => string &#39;width="960" height="300"&#39; (length=24)
      1 => 
        array (size=14)
          &#39;file_name&#39; => string &#39;ba7a0cc5930d19c6b1abfd795b3eb4d3.jpg&#39; (length=36)
          &#39;file_type&#39; => string &#39;image/jpeg&#39; (length=10)
          &#39;file_path&#39; => string &#39;E:/wamp/wamp/www/test/js/fileUpload/server/upload/tsjy/&#39; (length=64)
          &#39;full_path&#39; => string &#39;E:/wamp/wamp/www/test/js/fileUpload/server/upload/tsjy/ba7a0cc5930d19c6b1abfd795b3eb4d3.jpg&#39; (length=100)
          &#39;raw_name&#39; => string &#39;ba7a0cc5930d19c6b1abfd795b3eb4d3&#39; (length=32)
          &#39;orig_name&#39; => string &#39;-1.jpg&#39; (length=6)
          &#39;client_name&#39; => string &#39;4856_jpg_wh300.jpg&#39; (length=18)
          &#39;file_ext&#39; => string &#39;.jpg&#39; (length=4)
          &#39;file_size&#39; => float 92.95
          &#39;is_image&#39; => boolean true
          &#39;image_width&#39; => int 1190
          &#39;image_height&#39; => int 300
          &#39;image_type&#39; => string &#39;jpeg&#39; (length=4)
          &#39;image_size_str&#39; => string &#39;width="1190" height="300"&#39; (length=25)
      2 => 
        array (size=14)
          &#39;file_name&#39; => string &#39;fc0e75063c34f102a3a67fd17aa54a18.jpg&#39; (length=36)
          &#39;file_type&#39; => string &#39;image/jpeg&#39; (length=10)
          &#39;file_path&#39; => string &#39;E:/wamp/wamp/www/test/js/fileUpload/server/upload/tsjy/&#39; (length=64)
          &#39;full_path&#39; => string &#39;E:/wamp/wamp/www/test/js/fileUpload/server/upload/tsjy/fc0e75063c34f102a3a67fd17aa54a18.jpg&#39; (length=100)
          &#39;raw_name&#39; => string &#39;fc0e75063c34f102a3a67fd17aa54a18&#39; (length=32)
          &#39;orig_name&#39; => string &#39;-2.jpg&#39; (length=6)
          &#39;client_name&#39; => string &#39;4873_jpg_wh300.jpg&#39; (length=18)
          &#39;file_ext&#39; => string &#39;.jpg&#39; (length=4)
          &#39;file_size&#39; => float 214.92
          &#39;is_image&#39; => boolean true
          &#39;image_width&#39; => int 1152
          &#39;image_height&#39; => int 300
          &#39;image_type&#39; => string &#39;jpeg&#39; (length=4)
          &#39;image_size_str&#39; => string &#39;width="1152" height="300"&#39; (length=25)

関連記事:

Angularjs が WeChat を統合UI (weui)

WEUIアプリケーション用のJS共通情報プロンプトポップアップレイヤーのカプセル化

WeChatのWeUIを通じてどのような知識が学べるのでしょうか？