Wie lade ich Bilder über WeChat WEUI hoch, wie gehe ich damit im Hintergrund von PHP um?

Frage: Wie lade ich Bilder über WeChat WEUI hoch, wie soll das Hintergrund-PHP damit umgehen?

1. Das derzeit aufgetretene Problem ist das Weui-Bild-Upload-Framework der Anwendung, aber der Vorschauteil li im Code erhält ein Bild vom Typ Blob. Es gibt jedoch nur eine Eingabe, die über Ajax an PHP übermittelt wird, und nur das letzte Bild kann abgerufen werden.

<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. Über $_FILES im Hintergrund kann nur eine Eingabe erfolgen. Wie kann ich sie alle bekommen? Wie gehen Sie mit dem Hochladen von Bildern mit weui um?

Wenn Sie ein Foto einfügen, ohne [] hinzuzufügen, erhalten Sie Folgendes:

Fügen Sie [] hinzu und erhalten Folgendes:

Lösung

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

Verwandte Artikel:

Angularjs integriert WeChat UI (weui)

Kapselung von JS-Popup-Ebenen für häufig verwendete Informationsaufforderungen in WEUI-Anwendungen

Welches Wissen kann durch WeUI auf WeChat erlernt werden?