How to upload images through WeChat WEUI, how to handle it in background PHP?

Question: How to upload images through WeChat WEUI, how should the background PHP handle it?

1. The problem currently encountered is the application's weui image upload framework, but the preview part li in the code obtains images of type blob. But there is only one input, submitted to php through ajax, and only the last picture can be obtained.

<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. Only one input can be obtained through $_FILES in the background. How can I get them all? How do you handle uploading pictures using weui?

When pasting a photo without adding [], what you get is

Add [] and what you get back is:

Solution

 //解决思路如下:  通过改写他的文件隐藏域，每次选择一个图片之后，自动隐藏当前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)

Related articles:

Angularjs integrates WeChat UI (weui)

Encapsulation of JS common information prompt pop-up layers for WEUI applications

What knowledge can be learned through WeChat's WeUI?