微信小程序实现上传word、txt、Excel、PPT等文件功能


Posted in Javascript onMay 23, 2019

正文:

目前小程序没有能实现此功能的 API 所以我这里通过使用 web-view 实现;

实现流程:

1. 在小程序后台配置业务域名

2. 在服务器写一个html,实现表单上传文件

3.后端php接收文件并存到一个服务器文件夹,把文件名存到数据库以后检索用

4.在微信小程序创建一个页面,里面使用web-view达到上传文件的目的;

效果图:

微信小程序实现上传word、txt、Excel、PPT等文件功能

具体实现:

1. 在小程序后台配置业务域名

微信小程序实现上传word、txt、Excel、PPT等文件功能

2. 在服务器写一个html,实现表单上传文件

index.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">
 <title>Title</title>
 <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.js"></script>
 </head>
 
 <body>
 <form id="form1" action="https://dwb.lynncain.cn/H5/up_file.php" target="frame1" method="post" enctype="multipart/form-data">
 <input type="file" name="file">
 <input type="button" value="上传" onclick="upload()">
 </form>
 <iframe name="frame1" frameborder="0" height="40"></iframe>
 <!-- 其实我们可以把iframe标签隐藏掉 -->
 <script type="text/javascript">
 function upload() {
 $("#form1").submit();
 var t = setInterval(function() {
  //获取iframe标签里body元素里的文字。即服务器响应过来的"上传成功"或"上传失败"
  var word = $("iframe[name='frame1']").contents().find("body").text();
  if(word != "") {
//  alert(word); //弹窗提示是否上传成功
//  clearInterval(t); //清除定时器
  }
 }, 1000);
 }
 </script>
 </body>
 
</html>

3.后端php接收文件并存到一个服务器文件夹,把文件名存到数据库以后检索用

up_file.php 文件:

<?php 
 header("Content-Type:text/html;charset=utf8"); 
 header("Access-Control-Allow-Origin: *"); //解决跨域
 header('Access-Control-Allow-Methods:POST');// 响应类型 
 header('Access-Control-Allow-Headers:*'); // 响应头设置 
 $link=mysql_connect("localhost","root","root"); 
 mysql_select_db("new_test", $link); //选择数据库
 mysql_query("SET NAMES utf8");//解决中文乱码问题
 error_reporting(0);
 if ($_FILES["file"]["error"] > 0) 
 { 
 echo "错误: " . $_FILES["file"]["error"] . "<br />"; 
 } 
 else 
 { 
 $dlog["name"]=$_FILES["file"]["name"];
 $dlogs=$dlog; 
  //echo urldecode(json_encode($dlogs));
 $name =$_FILES["file"]["name"];
 echo '上传成功!';
 echo $name;
 //插入数据到数据库 
 $strsql = "insert into name (fileName) values('$name')";
 //mysql_query() 函数执行一条 MySQL 查询。SELECT,SHOW,EXPLAIN 或 DESCRIBE 都需要用这个函数执行
 $result = @mysql_query($strsql);
// echo "文件名: " . $_FILES["file"]["name"] . "<br />"; 
// echo "类型: " . $_FILES["file"]["type"] . "<br />"; 
// echo "大小: " . ($_FILES["file"]["size"] / 1024) . " Kb<br />"; 
 } 
 if (file_exists("upload/" . $_FILES["file"]["name"])) 
  { 
//  echo $_FILES["file"]["name"] . " 文件已经存在. "; 
  } 
 else 
  { 
  move_uploaded_file($_FILES["file"]["tmp_name"], 
  "upload/" . $_FILES["file"]["name"]); 
//  echo "文件已经被存储到: " . "upload/" . $_FILES["file"]["name"]; 
  } 
?>

 4.在微信小程序创建一个页面,里面使用web-view达到上传文件的目的;

web.wxml文件

<!--pages/web/web.wxml-->
 <web-view src='https://dwb.lynncain.cn/H5/'></web-view>

注:微信小程序web-view标签使用如上,无需多余代码。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript实现页面实时显示当前时间的简单实例
Jul 20 Javascript
jquery重复提交请求的原因浅析
May 23 Javascript
jQuery标签替换函数replaceWith()的使用例子
Aug 28 Javascript
JS处理json日期格式化问题
Oct 01 Javascript
jQuery Mobile 触摸事件实例
Jun 04 Javascript
简化vuex的状态管理方案的方法
Jun 02 Javascript
AngularJS上传文件的示例代码
Nov 10 Javascript
扫微信小程序码实现网站登陆实现解析
Aug 20 Javascript
你不可不知的Vue.js列表渲染详解
Oct 01 Javascript
Vue路由管理器Vue-router的使用方法详解
Feb 05 Javascript
微信小程序实现滑动操作代码
Apr 23 Javascript
详细分析vue表单数据的绑定
Jul 20 Javascript
微信小程序实现文件、图片上传功能
Aug 18 #Javascript
微信小程序实现图片上传
May 23 #Javascript
WebSocket的简单介绍及应用
May 23 #Javascript
webpack4 SplitChunks实现代码分隔详解
May 23 #Javascript
微信小程序实现的picker多级联动功能示例
May 23 #Javascript
js console.log打印对象时属性缺失的解决方法
May 23 #Javascript
Node.js+ELK日志规范的实现
May 23 #Javascript
You might like
十天学会php之第三天
2006/10/09 PHP
响应鼠标变换表格背景或者颜色的代码
2009/03/30 Javascript
用javascript作一个通用向导说明
2011/08/30 Javascript
javascript 进阶篇2 CSS XML学习
2012/03/14 Javascript
Js中setTimeout()和setInterval() 何时被调用执行的用法
2013/04/12 Javascript
cookie 最近浏览记录(中文escape转码)具体实现
2013/06/08 Javascript
JS中如何设置readOnly的值
2013/12/25 Javascript
JS中实现简单Formatter函数示例代码
2014/08/19 Javascript
javascript简单实现图片预加载
2014/12/03 Javascript
Jquery中基本选择器用法实例详解
2015/05/18 Javascript
跟我学习javascript的基本类型和引用类型
2015/11/16 Javascript
AngularJS指令与控制器之间的交互功能示例
2016/12/14 Javascript
web 屏蔽BackSpace键实例代码
2016/12/24 Javascript
JavaScript之排序函数_动力节点Java学院整理
2017/06/30 Javascript
详解vue express启动数据服务
2017/07/05 Javascript
vue-cli中打包图片路径错误的解决方法
2017/10/26 Javascript
vue.js给动态绑定的radio列表做批量编辑的方法
2018/02/28 Javascript
详解Vue 多级组件透传新方法provide/inject
2018/05/09 Javascript
axios封装,使用拦截器统一处理接口,超详细的教程(推荐)
2019/05/02 Javascript
微信小程序wx.getUserInfo授权获取用户信息(头像、昵称)的实现
2020/08/19 Javascript
python中的格式化输出用法总结
2016/07/28 Python
Python爬虫实现百度图片自动下载
2018/02/04 Python
python3中获取文件当前绝对路径的两种方法
2018/04/26 Python
Flask框架学习笔记之模板操作实例详解
2019/08/15 Python
python利用paramiko实现交换机巡检的示例
2020/09/22 Python
python爬虫中采集中遇到的问题整理
2020/11/27 Python
香港草莓网土耳其网站:Strawberrynet TR
2017/03/02 全球购物
Charlotte Tilbury英国官网:英国彩妆品牌
2017/05/26 全球购物
澳大利亚足球鞋和服装购物网站:Ultra Football
2018/10/11 全球购物
乌克兰电子和家用电器商店:Foxtrot
2019/07/23 全球购物
北欧最好的童装网上商店:Babyshop
2019/09/15 全球购物
母亲节演讲稿范文
2014/01/02 职场文书
委托书的写法
2014/09/16 职场文书
2014迎国庆标语大全
2014/09/19 职场文书
工商局领导班子存在的问题整改措施思想汇报
2014/10/05 职场文书
学生逃课万能检讨书2000字
2015/02/17 职场文书