微信小程序实现上传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的函数重名看其初始化方式
Mar 08 Javascript
JS 控制CSS样式表
Aug 20 Javascript
jquery 插件学习(一)
Aug 06 Javascript
jquery动态添加删除div 具体实现
Jul 20 Javascript
使用Browserify配合jQuery进行编程的超级指南
Jul 28 Javascript
如何利用JS通过身份证号获取当事人的生日、年龄、性别
Jan 22 Javascript
jQuery EasyUI菜单与按钮详解
Jul 13 Javascript
Node连接mysql数据库方法介绍
Feb 07 Javascript
Angular.JS中指令ng-if、ng-show/ng-hide和ng-switch的使用教程
May 07 Javascript
Electron + vue 打包桌面操作流程详解
Jun 24 Javascript
vue cli安装使用less的教程详解
Jul 12 Javascript
layui 富文本图片上传接口与普通按钮 文件上传接口的例子
Sep 23 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 设计模式之 工厂模式
2008/12/19 PHP
php异常处理使用示例
2014/02/25 PHP
用php守护另一个php进程的例子
2015/02/13 PHP
php中foreach结合curl实现多线程的方法分析
2016/09/22 PHP
Yii2实现多域名跨域同步登录退出
2017/02/04 PHP
PHP实现重载的常用方法实例详解
2017/10/18 PHP
php获取微信共享收货地址的方法
2017/12/21 PHP
Javascript 不能释放内存.
2006/09/07 Javascript
教您去掉ie网页加载进度条的方法
2010/12/09 Javascript
js判断手机端(Android手机还是iPhone手机)
2015/07/22 Javascript
javascript HTML5文件上传FileReader API
2020/03/27 Javascript
artDialog+plupload实现多文件上传
2016/07/19 Javascript
js实现增加数字显示的环形进度条效果
2017/02/05 Javascript
Angular2 路由问题修复详解
2017/03/01 Javascript
基于JavaScript实现一个简单的Vue
2018/09/26 Javascript
详解jQuery如何实现模糊搜索
2019/05/10 jQuery
利用JavaScript的Map提升性能的方法详解
2019/08/14 Javascript
[40:03]DOTA2上海特级锦标赛主赛事日 - 1 败者组第一轮#1EHOME VS Archon
2016/03/02 DOTA
[49:56]VG vs Optic 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
python读取浮点数和读取文本文件示例
2014/05/06 Python
Python查找数组中数值和下标相等的元素示例【二分查找】
2019/02/13 Python
Python脚本按照当前日期创建多级目录
2019/03/01 Python
python多线程与多进程及其区别详解
2019/08/08 Python
Django认证系统实现的web页面实现代码
2019/08/12 Python
Python爬取微信小程序Charles实现过程图解
2020/09/29 Python
解决Python 写文件报错TypeError的问题
2020/10/23 Python
使用CSS3的box-sizing属性解决div宽高被内边距撑开的问题
2016/06/28 HTML / CSS
CSS3模拟动画下拉菜单效果
2017/04/12 HTML / CSS
地理科学专业毕业生求职信
2013/10/15 职场文书
科研先进个人典型材料
2014/01/31 职场文书
总经理的岗位职责
2014/02/23 职场文书
委托书范本
2014/09/13 职场文书
房屋鉴定委托书范本
2014/09/23 职场文书
教师工作决心书
2015/02/04 职场文书
golang的文件创建及读写操作
2022/04/14 Golang
Nginx如何配置多个服务域名解析共用80端口详解
2022/09/23 Servers