微信小程序实现上传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 相关文章推荐
AJAX 网页保留浏览器前进后退等功能
Feb 12 Javascript
jQuery+JSON+jPlayer实现QQ空间音乐查询功能示例
Jun 17 Javascript
判断JS对象是否拥有某种属性的两种方式
Dec 02 Javascript
Javascript玩转继承(三)
May 08 Javascript
JS的数组迭代方法
Feb 05 Javascript
12306验证码破解思路分享
Mar 25 Javascript
JavaScript使用DeviceOne开发实战(三)仿微信应用
Dec 02 Javascript
JS实现的自定义水平滚动字体插件完整实例
Jun 17 Javascript
简单的js计算器实现
Oct 26 Javascript
Vue.js如何实现路由懒加载浅析
Aug 14 Javascript
js 实现复选框只能选择一项的示例代码
Jan 23 Javascript
Vue实现左右菜单联动实现代码
Aug 12 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自动加载autoload机制示例分享
2014/02/20 PHP
PHP生成指定长度随机数最简洁的方法
2014/07/14 PHP
ajax+php实现无刷新验证手机号的实例
2017/12/22 PHP
jQuery入门知识简介
2010/03/04 Javascript
60行js代码实现俄罗斯方块
2015/03/31 Javascript
使用AngularJS编写较为优美的JavaScript代码指南
2015/06/19 Javascript
深入探讨前端框架react
2015/12/09 Javascript
解决JS组件bootstrap table分页实现过程中遇到的问题
2016/04/21 Javascript
使用RequireJS库加载JavaScript模块的实例教程
2016/06/06 Javascript
JSONP原理及简单实现
2016/06/08 Javascript
Summernote实现图片上传功能的简单方法
2016/07/11 Javascript
利用Angular.js限制textarea输入的字数
2016/10/20 Javascript
文件上传插件SWFUpload的使用指南
2016/11/29 Javascript
BootStrap Fileinput的使用教程
2016/12/30 Javascript
HTML5+Canvas调用手机拍照功能实现图片上传(上)
2017/04/21 Javascript
Bootstrap table使用方法总结
2017/05/10 Javascript
Angularjs单选框相关的示例代码
2017/08/17 Javascript
vue实现全选和反选功能
2017/08/31 Javascript
VsCode插件整理(小结)
2017/09/14 Javascript
Vuejs实现购物车功能
2017/11/05 Javascript
jQuery实现鼠标放置名字上显示详细内容气泡提示框效果的方法分析
2020/04/04 jQuery
Python3.6通过自带的urllib通过get或post方法请求url的实例
2018/05/10 Python
python如何爬取个性签名
2018/06/19 Python
Python 经典面试题 21 道【不可错过】
2018/09/21 Python
解决使用PyCharm时无法启动控制台的问题
2019/01/19 Python
使用python实现飞机大战游戏
2020/03/23 Python
前端制作动画的几种方式(css3,js)
2016/12/12 HTML / CSS
基于HTML5 Canvas的3D动态Chart图表的示例
2017/11/02 HTML / CSS
Otel.com:折扣酒店预订
2017/08/24 全球购物
AJAX的优缺点都有什么
2015/08/18 面试题
应届大专毕业生自我鉴定
2014/04/08 职场文书
教师个人查摆剖析材料
2014/10/14 职场文书
归元寺导游词
2015/02/06 职场文书
失恋33天观后感
2015/06/11 职场文书
springboot读取resources下文件的方式详解
2022/06/21 Java/Android
python高温预警数据获取实例
2022/07/23 Python