微信小程序实现上传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 相关文章推荐
jQuery formValidator表单验证插件开源了 含API帮助、源码、示例
Aug 14 Javascript
javascript parseInt 函数分析(转)
Mar 21 Javascript
在JavaScript的正则表达式中使用exec()方法
Jun 16 Javascript
简洁实用的BootStrap jQuery手风琴插件
Aug 31 Javascript
jquery实现的回旋滚动效果完整实例【附demo源码下载】
Sep 20 Javascript
select下拉框插件jquery.editable-select详解
Jan 22 Javascript
深入探究angular2 UI组件之primeNG用法
Jul 26 Javascript
layer子层给父层页面元素赋值,以达到向父层页面传值的效果实例
Sep 22 Javascript
ES6使用Set数据结构实现数组的交集、并集、差集功能示例
Oct 31 Javascript
JavaScript中的类型检查
Feb 03 Javascript
Element Carousel 走马灯的具体实现
Jul 26 Javascript
Angular处理未可知异常错误的方法详解
Jan 17 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
destoon出现验证码不显示时的紧急处理方法
2014/08/22 PHP
PHP中$this和$that指针使用实例
2015/01/06 PHP
php官方微信接口大全(微信支付、微信红包、微信摇一摇、微信小店)
2015/12/21 PHP
实例讲解PHP页面静态化
2018/02/05 PHP
关于Yii2框架跑脚本时内存泄漏问题的分析与解决
2019/12/01 PHP
Jquery实现图片放大镜效果的思路及代码(自写)
2013/10/18 Javascript
JS JQUERY实现滚动条自动滚到底的方法
2015/01/09 Javascript
移除AngularJS下URL中的#字符的方法
2015/06/19 Javascript
理解Javascript图片预加载
2016/02/23 Javascript
基于jquery实现智能提示控件intellSeach.js
2016/03/17 Javascript
jQuery使用deferreds串行多个ajax请求
2016/08/22 Javascript
angular中实现控制器之间传递参数的方式
2017/04/24 Javascript
用Vue-cli搭建的项目中引入css报错的原因分析
2017/07/20 Javascript
bootstrap与pagehelper实现分页效果
2018/12/29 Javascript
微信小程序自定义组件实现环形进度条
2020/11/17 Javascript
微信小程序bindtap事件与冒泡阻止详解
2019/08/08 Javascript
java实现单链表增删改查的实例代码详解
2019/08/30 Javascript
Layui实现数据表格中鼠标悬浮图片放大效果,离开时恢复原图的方法
2019/09/11 Javascript
python实现汉诺塔方法汇总
2016/07/25 Python
python监控linux内存并写入mongodb(推荐)
2017/09/11 Python
Python实现获取邮箱内容并解析的方法示例
2018/06/16 Python
利用Python求阴影部分的面积实例代码
2018/12/05 Python
Django密码系统实现过程详解
2019/07/19 Python
基于Modernizr 让网站进行优雅降级的分析
2013/04/21 HTML / CSS
I.T中国官网:精选时尚设计师单品网购平台
2018/03/26 全球购物
测试驱动开发的主要步骤是什么
2014/12/10 面试题
简单叙述一下MYSQL的优化
2016/05/09 面试题
医院护士求职自荐信格式
2013/09/21 职场文书
自我鉴定书范文
2013/10/02 职场文书
安全演讲稿开场白
2014/08/25 职场文书
党课心得体会范文
2014/09/09 职场文书
平面设计师岗位职责
2014/09/18 职场文书
文化苦旅读书笔记
2015/06/29 职场文书
纪律委员竞选稿
2015/11/19 职场文书
残联2016年全国助残日活动总结
2016/04/01 职场文书
利用 Python 的 Pandas和 NumPy 库来清理数据
2022/04/13 Python