0

0

通过微信WEUI实现图片上传,后台PHP该如何处理?

PHP中文网

PHP中文网

发布时间:2017-03-16 09:34:51

|

4887人浏览过

|

来源于php中文网

原创

问题:通过微信weui实现图片上传,后台php该如何处理?

1.目前遇到的问题为应用的weui图片上传框架,但代码中预览部分li获取到了类型是blob的图片。但只有一个input,通过ajax提交到php,只能获取到最后一张图片。

<p class="weui-uploader__bd">
    <ul class="weui-uploader__files" id="uploaderFiles" >
        <li class="weui-uploader__file" style="background-image:url('/Public/Admin/images/pic_160.png')"></li>
        <li class="weui-uploader__file weui-uploader__file_status" style="background-image:url('/Public/Admin/images/pic_160.png')">
            <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只能获取到一个input。怎么才能获取所有的?大家用weui上传图片的时候是怎么处理的呢?

贴上图片photo不加[]的情况下,获取的到的是

1.png

立即学习PHP免费学习笔记(深入)”;

加[]获取返回的是:

极品模板多语言企业网站管理系统1.2.2
极品模板多语言企业网站管理系统1.2.2

【极品模板】出品的一款功能强大、安全性高、调用简单、扩展灵活的响应式多语言企业网站管理系统。 产品主要功能如下: 01、支持多语言扩展(独立内容表,可一键复制中文版数据) 02、支持一键修改后台路径; 03、杜绝常见弱口令,内置多种参数过滤、有效防范常见XSS; 04、支持文件分片上传功能,实现大文件轻松上传; 05、支持一键获取微信公众号文章(保存文章的图片到本地服务器); 06、支持一键

下载

2.png

解决方法

 //解决思路如下:  通过改写他的文件隐藏域,每次选择一个图片之后,自动隐藏当前file,然后通过js插入一个新的空文件 type=“file”,这样就可以实现多文件上传。改写代码如下:  
      
         $(function(){
            var tmpl = '<li id="#imgname#_li" class="weui-uploader__file" style="background-image:url(#url#)"></li>',
                $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('/'); 
                    $uploaderFiles.append($(tmpl.replace('#url#', src).replace('#imgname#', src_split[src_split.length-1])));
                     
                     //其中img_str 为我自己写的隐藏文本框,用来存放所有的图片名称组成的字符,类似"'名称1','名称2','名称3'",因为我用这个隐藏框的值,来删除页面页面的指定图片。
                    if($("#img_str").val() == '' || $("#img_str").val() == null){
                       $("#img_str").val("'"+src_split[src_split.length-1]+"'");
                    }else{
                       $("#img_str").val($("#img_str").val()+",'"+src_split[src_split.length-1]+"'");
                    }
                    
                    //开启隐藏上传 p
                    $(this).after('<input id="uploaderInput"   name="result_file[]"  class="weui-uploader__input" type="file"   accept="image/*" multiple/>');
                    $(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(')');
                  imgback_array= imgback_array[0].split('/');
                  $("#"+imgback_array[imgback_array.length-1]+"_input").remove();
                  $("#"+imgback_array[imgback_array.length-1]+"_li").remove();
    
                  var img_str = $("#img_str").val().split(',');
                  var img_str_new = '';
                  for(var i=0;i<img_str.length;i++){
                     if(img_str[i] != "'"+imgback_array[imgback_array.length-1]+"'"){
                         if(img_str_new == ''){
                             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)
  'error' => 
    array (size=0)
      empty
  'files' => 
    array (size=3)
      0 => 
        array (size=14)
          'file_name' => string 'e2dafa6a5f06dc34004607e1f00a4824.jpg' (length=36)
          'file_type' => string 'image/jpeg' (length=10)
          'file_path' => string 'E:/wamp/wamp/www/test/js/fileUpload/server/upload/tsjy/' (length=64)
          'full_path' => string 'E:/wamp/wamp/www/test/js/fileUpload/server/upload/tsjy/e2dafa6a5f06dc34004607e1f00a4824.jpg' (length=100)
          'raw_name' => string 'e2dafa6a5f06dc34004607e1f00a4824' (length=32)
          'orig_name' => string '-0.jpg' (length=6)
          'client_name' => string '6880_jpg_wh300.jpg' (length=18)
          'file_ext' => string '.jpg' (length=4)
          'file_size' => float 93.32
          'is_image' => boolean true
          'image_width' => int 960
          'image_height' => int 300
          'image_type' => string 'jpeg' (length=4)
          'image_size_str' => string 'width="960" height="300"' (length=24)
      1 => 
        array (size=14)
          'file_name' => string 'ba7a0cc5930d19c6b1abfd795b3eb4d3.jpg' (length=36)
          'file_type' => string 'image/jpeg' (length=10)
          'file_path' => string 'E:/wamp/wamp/www/test/js/fileUpload/server/upload/tsjy/' (length=64)
          'full_path' => string 'E:/wamp/wamp/www/test/js/fileUpload/server/upload/tsjy/ba7a0cc5930d19c6b1abfd795b3eb4d3.jpg' (length=100)
          'raw_name' => string 'ba7a0cc5930d19c6b1abfd795b3eb4d3' (length=32)
          'orig_name' => string '-1.jpg' (length=6)
          'client_name' => string '4856_jpg_wh300.jpg' (length=18)
          'file_ext' => string '.jpg' (length=4)
          'file_size' => float 92.95
          'is_image' => boolean true
          'image_width' => int 1190
          'image_height' => int 300
          'image_type' => string 'jpeg' (length=4)
          'image_size_str' => string 'width="1190" height="300"' (length=25)
      2 => 
        array (size=14)
          'file_name' => string 'fc0e75063c34f102a3a67fd17aa54a18.jpg' (length=36)
          'file_type' => string 'image/jpeg' (length=10)
          'file_path' => string 'E:/wamp/wamp/www/test/js/fileUpload/server/upload/tsjy/' (length=64)
          'full_path' => string 'E:/wamp/wamp/www/test/js/fileUpload/server/upload/tsjy/fc0e75063c34f102a3a67fd17aa54a18.jpg' (length=100)
          'raw_name' => string 'fc0e75063c34f102a3a67fd17aa54a18' (length=32)
          'orig_name' => string '-2.jpg' (length=6)
          'client_name' => string '4873_jpg_wh300.jpg' (length=18)
          'file_ext' => string '.jpg' (length=4)
          'file_size' => float 214.92
          'is_image' => boolean true
          'image_width' => int 1152
          'image_height' => int 300
          'image_type' => string 'jpeg' (length=4)
          'image_size_str' => string 'width="1152" height="300"' (length=25)

相关文章:

Angularjs整合微信UI(weui)

WEUI应用之JS常用信息提示弹层的封装

通过微信的WeUI可以学习到哪些知识?

相关文章

微信app下载
微信app下载

微信是一款手机通信软件,支持通过手机网络发送语音短信、视频、图片和文字。微信可以单聊及群聊,还能根据地理位置找到附近的人,带给大家全新的移动沟通体验,有需要的小伙伴快来保存下载体验吧!

下载

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
pixiv网页版官网登录与阅读指南_pixiv官网直达入口与在线访问方法
pixiv网页版官网登录与阅读指南_pixiv官网直达入口与在线访问方法

本专题系统整理pixiv网页版官网入口及登录访问方式,涵盖官网登录页面直达路径、在线阅读入口及快速进入方法说明,帮助用户高效找到pixiv官方网站,实现便捷、安全的网页端浏览与账号登录体验。

616

2026.02.13

微博网页版主页入口与登录指南_官方网页端快速访问方法
微博网页版主页入口与登录指南_官方网页端快速访问方法

本专题系统整理微博网页版官方入口及网页端登录方式,涵盖首页直达地址、账号登录流程与常见访问问题说明,帮助用户快速找到微博官网主页,实现便捷、安全的网页端登录与内容浏览体验。

194

2026.02.13

Flutter跨平台开发与状态管理实战
Flutter跨平台开发与状态管理实战

本专题围绕Flutter框架展开,系统讲解跨平台UI构建原理与状态管理方案。内容涵盖Widget生命周期、路由管理、Provider与Bloc状态管理模式、网络请求封装及性能优化技巧。通过实战项目演示,帮助开发者构建流畅、可维护的跨平台移动应用。

91

2026.02.13

TypeScript工程化开发与Vite构建优化实践
TypeScript工程化开发与Vite构建优化实践

本专题面向前端开发者,深入讲解 TypeScript 类型系统与大型项目结构设计方法,并结合 Vite 构建工具优化前端工程化流程。内容包括模块化设计、类型声明管理、代码分割、热更新原理以及构建性能调优。通过完整项目示例,帮助开发者提升代码可维护性与开发效率。

20

2026.02.13

Redis高可用架构与分布式缓存实战
Redis高可用架构与分布式缓存实战

本专题围绕 Redis 在高并发系统中的应用展开,系统讲解主从复制、哨兵机制、Cluster 集群模式及数据分片原理。内容涵盖缓存穿透与雪崩解决方案、分布式锁实现、热点数据优化及持久化策略。通过真实业务场景演示,帮助开发者构建高可用、可扩展的分布式缓存系统。

54

2026.02.13

c语言 数据类型
c语言 数据类型

本专题整合了c语言数据类型相关内容,阅读专题下面的文章了解更多详细内容。

29

2026.02.12

雨课堂网页版登录入口与使用指南_官方在线教学平台访问方法
雨课堂网页版登录入口与使用指南_官方在线教学平台访问方法

本专题系统整理雨课堂网页版官方入口及在线登录方式,涵盖账号登录流程、官方直连入口及平台访问方法说明,帮助师生用户快速进入雨课堂在线教学平台,实现便捷、高效的课程学习与教学管理体验。

15

2026.02.12

豆包AI网页版入口与智能创作指南_官方在线写作与图片生成使用方法
豆包AI网页版入口与智能创作指南_官方在线写作与图片生成使用方法

本专题汇总豆包AI官方网页版入口及在线使用方式,涵盖智能写作工具、图片生成体验入口和官网登录方法,帮助用户快速直达豆包AI平台,高效完成文本创作与AI生图任务,实现便捷智能创作体验。

598

2026.02.12

PostgreSQL性能优化与索引调优实战
PostgreSQL性能优化与索引调优实战

本专题面向后端开发与数据库工程师,深入讲解 PostgreSQL 查询优化原理与索引机制。内容包括执行计划分析、常见索引类型对比、慢查询优化策略、事务隔离级别以及高并发场景下的性能调优技巧。通过实战案例解析,帮助开发者提升数据库响应速度与系统稳定性。

56

2026.02.12

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号