微信小程序上传Excel文本文件功能

问题：

在开发过程中会发现微信小程序有很多功能都还不能满足我们的需求，谁叫客户就是上帝呢，前几天小编遇到了这么个问题，就是用微信小程序上传文件，但是还以为微信带有这个模块，可是查了许久还是没有找到，只找到了选择上传图片的模块（wx.chooseImage），就是找不到文本文件的模块，于是上网查了个遍还是没找到这样的模块，最后查了解决这需求的方法说是要引用外部的 html 游览器上传的方法才能解决，这要怎么引用呢？？？

解决方法：

其实微信小程序还是留了那么一条天路，就是可以直接引用HTML页面，用于实现没有的功能，

引用模块：web-view

描述：web-view 组件是一个可以用来承载网页的容器，会自动铺满整个小程序页面。个人类型与海外类型的小程序暂不支持使用。

这个模块使用起来极其简单

<web-view src="https://mp.weixin.qq.com/"></web-view>

直接调用src访问你HTML所在服务器的地址，服务器能正常返回我也即可JS什么都不用写就直接傻瓜式的访问服务器页面就可以，如果要带参数就直接在src地址后加上参数就可以

<web-view src="https://mp.weixin.qq.com/?id=123456&name=abc"></web-view>

如何新建一个HTML页面放在服务器端上即可，游览器你正常访问页面就算成功了

这时要想上传文件这就简单的多了，直接使用HTML的JS上传文件的代码即可，

这是我的微信小程序

wxml代码：

<web-view src= "{{config.root_url}}/app/app_upload?class_id={{class_id}}"></web-view>

js代码：

const config = require('../../../utils/config.js');

var class_id = ''

Page({

　　/**

　　* 页面的初始数据

　　*/

　　data: {

　　　　config:config,

　　},

　　/**

　　* 生命周期函数--监听页面加载

　　*/

　　onLoad: function(options) {

　　　　console.log(options)

　　　　class_id = options.class_id;

　　　　this.setData({

　　　　　　class_id: class_id,

　　　　})

　　},

})

wxss代码为空不需要在这写样式

这是我要引用的HTML页面代码：

这是HTML页面表单

<div class="frame addfile">

    <form id="upload" target="form2" method="post" enctype="multipart/form-data">

        <a class="ui-upload" id="load">

            <!--<input type="file" name="imgFile" onclick="upload_flie()"/>-->

            <span class="addIcon">+</span>

            上传文件

        </a>

  </form>

</div>

这是JS上传文件功能

/*批量导入*/

$('#load').after('<input type="file" id="load_xls" name="imgFile" style="display:none" onchange ="uploadFile()">');

$('#load').click(function(){

    document.getElementById("load_xls").click();

});

function uploadFile() {

    var form = document.getElementById('upload'),

        formData = new FormData(form);

    console.log(formData)

    $.ajax({

        url:"/app/upload_file",

        type:"post",

        data:formData,

        processData:false,

        contentType:false,

        success:function(res){

            if(res.ret==0){

                console.log(res.url)

                $.post("/app/upload_ecxel",{ class_id: class_id,file_name:res.url},function(data,status){

                    console.log("\nStatus: " + status)

                    if(status == 'success'){

                        GetClassSingle(class_id)

                    }

                });

            }

        }

    })

}

只需要像游览器一样实现js上传功能就可以并没有那么复杂下面是我完整的HTML代码：

<!DOCTYPE html>

<html>

<head>

    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />

    <meta charset="UTF-8">

    <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.js"></script>

    <style>

        body{

            background-color: #f4f4f4;

            margin: 0px;

        }

        .frame{

            background-color: white;

            margin: 5px 0px;

            padding: 8px;

        }

        .frame div{

            margin:0px 0px 4px 0px;

        }

        .border_bottom{

            border-bottom: 1px solid #cdcdcd;

        }

        .stud_block div{

            display: inline-block;

        }

        .fixed{

            width: 65px;

            color: #6f6f6f;

        }

        .addfile{

            height: 100px;

            width: 100px;

            margin-left: 20px;

            margin-top: 10px;

            border-radius: 10px;

        }

        .ui-upload input {

            background-color: red;

            height: 110px;

            width: 115px;

            margin: -10px;

            position: absolute;

            font-size: 100px;

            right: 0;

            top: 0;

            opacity: 0;

            filter: alpha(opacity=0);

            cursor: pointer;

        }

        .ui-upload {

            position: relative;

            margin: -10px;

            font-size: 14px;

            height: 100px;

            width: 115px;

            line-height: 180px;

            text-align: center;

            position: relative;

            cursor: pointer;

            color: black;

            border-radius: 3px;

            overflow: hidden;

            display: inline-block;

            text-decoration: none;

            font-weight: bold;

        }

        .outstudecxel{

            width: 100%;

            height: 40px;

            background-color: #2fcc85;

            margin: 1px 0px;

            text-align: center;

            line-height: 40px;

            color: white;

            border-radius: 5px;

            position: absolute;

            left: 0px;

            bottom: 0px;

        }

        .outstudecxel:active{

            background-color: #35ff35;

        }

        .imges{

            position: relative;

            left: 0px;

            top: 4px;

            padding: 0px 5px;

            margin: 0px;

        }

        .imges img{

            width: 24px;

            height: 20px;

        }

        .addIcon{

            position: absolute;

            left: 28px;

            bottom: -40px;

            font-size: 40px;

            margin-left: 20px;

        }

    </style>

</head>

<body>

<div class="frame">

    <div class="border_bottom stud_block">

        <div class="imges"><img src="/static/images/chalkboard-teacher.png"/></div><div class="fixed">班级：</div><div id="class_name"></div>

    </div>

    <div class="border_bottom stud_block">

        <div class="imges"><img src="/static/images/user-plus.png"/></div><div class="fixed">人数：</div><div id="num"></div>人

    </div>

    <div class="stud_block">

        <div class="imges"><img src="/static/images/user-tie.png"/></div><div class="fixed">班主任：</div><div id="class_man"></div>

    </div>

</div>

<div class="frame">

    <div>上传学生名单</div>

</div>

<div class="frame addfile">

    <form id="upload" target="form2" method="post" enctype="multipart/form-data">

        <a class="ui-upload" id="load">

            <!--<input type="file" name="imgFile" onclick="upload_flie()"/>-->

            <span class="addIcon">+</span>

            上传文件

        </a>

    </form>

</div>

<div class="outstudecxel" onclick="downloadFile()">

    导出模版

</div>

<script type="text/javascript">

    var class_id ='';

    function getUrlParam(name){

        nk="";

        var reg=new RegExp("(^|&)"+name+"=([^&]*)(&|$)");

        var r=window.location.search.substr(1).match(reg);

        if (r!=null) return unescape(r[2]);return nk;

    };

    /*批量导入*/

    $('#load').after('<input type="file" id="load_xls" name="imgFile" style="display:none" onchange ="uploadFile()">');

    $('#load').click(function(){

        document.getElementById("load_xls").click();

    });

    function uploadFile() {

        var form = document.getElementById('upload'),

            formData = new FormData(form);

        console.log(formData)

        $.ajax({

            url:"/app/upload_file",

            type:"post",

            data:formData,

            processData:false,

            contentType:false,

            success:function(res){

                if(res.ret==0){

                    console.log(res.url)

                    $.post("/app/upload_ecxel",{ class_id: class_id,file_name:res.url},function(data,status){

                        console.log("\nStatus: " + status)

                        if(status == 'success'){

                            GetClassSingle(class_id)

                        }

                    });

                }

            }

        })

    }

    //文件生成下载

    function downloadFile() {

        $.ajax({

            type: "post",

            url: "/app/generate_student_list",

            data_type: "json",

            data: {class_id:class_id},success: function (res){

                console.log(res.rows)

                try{

                    var elemIF = document.createElement("iframe");

                    elemIF.src = res.rows;

                    elemIF.style.display = "none";

                    document.body.appendChild(elemIF);

                }catch(e){

                }

            }

        });

    }

    //初次加载

    function GetClassSingle(class_id){

        $.post("/app/get_class_single",{class_id:class_id},function(data,status){

            console.log("Data: " + data + "\nStatus: " + status)

            if(status == 'success'){

                console.log(data.rows)

                $('#class_name').text(data.rows.class_name)

                $('#num').text(data.rows.num)

                $('#class_man').text(data.rows.class_man)

            }

        });

    }

    class_id = getUrlParam('class_id')

    GetClassSingle(class_id)

</script>

</body>

</html>

点个赞呗！

微信小程序上传Excel文本文件功能的更多相关文章

微信小程序上传图的功能
首先选择图片,然后循环,再就是在点击发布的时候循环图片地址赋值,包括删除命令 js代码: //选择图片 uploadImgAdd: function(e) { var imgs = this.data ...
微信小程序上传多张图片，及php后台处理
微信小程序上传多张图片,级小程序页面布局直接来代码index.wxml <view class='body' style='width:{{windowWidth}}px;height:{{wi ...
微信小程序上传后发布或者体验版测试无数据解决办法
在做微信小程序开发的过程中,发现小程序在本地调用接口的数据都显示,但是上传之后,发现手机体验没有数据.以下为解决办法: 1.先清除缓存试试. 2.打开微信小程序工具右上角的详情——项目设置,将“不校验 ...
微信小程序上传与下载文件
需要准备的工作: ①.建立微信小程序工程,编写以下代码. ②.通过IDE建立springboot+web工程,编写接收文件以及提供下载文件的方式,并将上传的文件相关信息记录在mysql数据库中.具体请 ...
Taro 微信小程序上传文件到minio
小程序前端上传文件不建议直接引用minio的js npm包,一来是这个包本身较大,会影响小程序的体积,二来是ak sk需要放到前端存储,不够安全,因此建议通过请求后端拿到签名数据后上传. 由于小程序的 ...
微信小程序-上传照片-多张显示
图片就是一个简单的效果实现先看wxml和wxss代码 <view class='in-demand'> <view class='dema-title'> <text ...
微信小程序上传文件遇到的坑
在开发小程序时,使用的花生壳做的内网映射,域名使用花生壳卖的https域名在做小程序文件上传时,调用接口,老是报错. Caused by: org.apache.commons.fileupload ...
微信小程序-上传下载
wx.uploadFile(OBJECT) 上传将本地资源上传到开发者服务器.如页面通过 wx.chooseImage(图片)/wx.chooseVideo(视频) 等接口获取到一个本地资源的临时文 ...
微信小程序-上传多张图片加进度条（支持预览、删除）
2018-12-24 详情示例见:https://www.cnblogs.com/cisum/p/9564898.html 2018-12-29 组件下载见:https://www.cnblogs.c ...

随机推荐

jQuery过滤选择器:first和:first-child的区别，CSS伪类:first-child
最近项目中遇到需求:只在第一列不能删除,不显示小叉号:点击可添加一列,后面的列右上角显示小叉号,可以点击删除. 我是使用以下方法解决这个小需求 :CSS伪类选择器:first-child设置所有小叉号 ...
(转)Mysql技术内幕InnoDB存储引擎－表&索引算法和锁
表原文:http://yingminxing.com/mysql%E6%8A%80%E6%9C%AF%E5%86%85%E5%B9%95innodb%E5%AD%98%E5%82%A8%E5%BC% ...
Java之IO(八)PipedIutputStream和PipedOutputStream
转载请注明源出处:http://www.cnblogs.com/lighten/p/7056278.html 1.前言本章介绍Java的IO体系中最后一对字节流--管道流.之前在字节数组流的时候就说 ...
再学Java 之 Integer 包装类缓存
前言:本博文将涉及的Java的自动装箱和自动拆箱,可以参考这篇文章和官方教程 ,这里不再赘述. 首先,先看一个小程序: public class Main { public static voi ...
python字符串中包含Unicode插入数据库乱码问题分类： Python 2015-04-28 18:19 342人阅读评论(0) 收藏
之前在编码的时候遇到一个奇葩的问题,无论如何操作,写入数据库的字符都是乱码,之后是这样解决的,意思就是先解码,然后再插入数据库 cost_str = json.dumps(cost_info) cos ...
如何VMare虚拟机里安装Mac操作系统（图文详解）
不多说,直接上干货! 大部分用户玩的是windows,现在,跟随我来玩玩Mac. 1. VMware Workstation 11 2. unlocker 206(for OS X 插件补丁),这是V ...
代码阅读——十个C开源项目
1. Webbench Webbench是一个在linux下使用的非常简单的网站压测工具.它使用fork()模拟多个客户端同时访问我们设定的URL,测试网站在压力下工作的性能,最多可以模拟3万个并发连 ...
vue-resource使用笔记
基本语法 //基于全局Vue对象使用http Vue.http.get('/someUrl', [options]).then(successCallback, errorCallback); Vue ...
《Tomcat日志系统详解》
综合:Tomcat下相关的日志文件 Cataline引擎的日志文件,文件名catalina.日期.log Tomcat下内部代码丢出的日志,文件名localhost.日期.log(jsp页面内部错误的 ...
BSDL
BSDL(边界扫描描述语言)文件是使用边界扫描进行电路板级和系统级测试与在系统编程所必需的. BSDL 文件是描述一个 IC 中的 IEEE 1149.1 或 JTAG 设计电子数据表,这些文件由 I ...

微信小程序上传Excel文本文件功能

微信小程序上传Excel文本文件功能的更多相关文章

随机推荐

热门专题