微信小程序上传Excel文本文件功能
问题：
在开发过程中会发现微信小程序有很多功能都还不能满足我们的需求，谁叫客户就是上帝呢，前几天小编遇到了这么个问题，就是用微信小程序上传文件，但是还以为微信带有这个模块，可是查了许久还是没有找到，只找到了选择上传图片的模块（wx.chooseImage），就是找不到文本文件的模块，于是上网查了个遍还是没找到这样的模块，最后查了解决这需求的方法说是要引用外部的 html 游览器上传的方法才能解决，这要怎么引用呢？？？
解决方法：
其实微信小程序还是留了那么一条天路，就是可以直接引用HTML页面，用于实现没有的功能，
引用模块：web-view
描述：web-view 组件是一个可以用来承载网页的容器，会自动铺满整个小程序页面。个人类型与海外类型的小程序暂不支持使用。
<!-- 指向微信公众平台首页的web-view --><web-view src="https://mp.weixin.qq.com/"></web-view><web-view src= "{{config.root_url}}/app/app_upload?class_id={{class_id}}"></web-view>
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,
})
},
})
<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 ...
随机推荐
- 【bzoj4332】【JSOI2012】 分零食 生成函数 FFT
我们构造$f(x)$的生成函数$G(x)$,那么显然$[x^k]G(x)=Ok^2+Sk+U$ 那么显然,答案即为$\sum_{i=1}^{n} [x^m]G^i(x)$ 我们构造答案的生成函数$F( ...
- RDLC_部署到不同的浏览器
首先我用的是vs2015 的reportview插件 在数据库中应该配置报表的服务器地址,在项目中添加ReportViewer 插件,单独用一个页面显示接收报表 <form id="f ...
- Django中url的反向查询
明确几个概念: application namespace: 正在部署的app的名称,一个app的多个实例应该具有相同的application namespace. 可以通过在URLconf模 ...
- 2018春招-今日头条笔试题-第二题（python）
题目描述:2018春招-今日头条笔试题5题(后附大佬答案-c++版) 解题思路: 利用深度优先搜索 #-*- coding:utf-8 -*- class DFS: ''' num:用于存储最后执行次 ...
- CS231n学习笔记-图像分类笔记（下篇）
原文地址:智能单元 K-Nearest Neighbor分类器 大家可能注意到了,为什么只用最相似的一张图片的标签来作为测试图像的标签呢?这不是很奇怪吗!是的,使用K-Nearest Neighbor ...
- Android_Activity启动模式
在android里,有4种activity的启动模式,分别为: “standard” (默认) “singleTop” “singleTask” “singleInstance” 它们主要有如下不同: ...
- java NIO系列教程1
ava NIO(New IO)是一个可以替代标准Java IO API的IO API(从Java 1.4开始),Java NIO提供了与标准IO不同的IO工作方式. Java NIO: Channel ...
- css 去除移动端手指按下瞬间的类hover色块
在指定的a或者button 设置此CSS -webkit-tap-highlight-color:transparent;
- 在C#中使用依赖注入
依赖注入(Dependency Injection,缩写为DI)是一种实现(Inversion of Control,缩写为IoC)的方法.在编写C#代码时,使用这种方法能够解决一些场景的需求.本系列 ...
- JavaScript窗口打开与关闭及如何使用opener使子窗口对父窗口进行操作
一.打开与关闭窗口 1.打开窗口:可以使用window对象中的Open()方法. newWindow = window.open(url,windowname,location); 参数说明: url ...