微信小程序实现上传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 设计模式之组合模式解析
Apr 09 Javascript
固定背景实现的背景滚动特效示例分享
May 19 Javascript
js判断选择时间不能小于当前时间的示例代码
Sep 24 Javascript
将两个div左右并列显示并实现点击标题切换内容
Oct 22 Javascript
javascript原生和jquery库实现iframe自适应高度和宽度
Jul 18 Javascript
jquery实现最简单的滑动菜单效果代码
Sep 12 Javascript
JS中多步骤多分步的StepJump组件实例详解
Apr 01 Javascript
轻松实现jQuery添加删除按钮Click事件
Mar 13 Javascript
js 获取json数组里面数组的长度实例
Oct 31 Javascript
js中let和var定义变量的区别
Feb 08 Javascript
原生JS封装_new函数实现new关键字的功能
Aug 12 Javascript
antd-DatePicker组件获取时间值,及相关设置方式
Oct 27 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 处理图片的类实现代码
2009/10/23 PHP
PHP模块 Memcached功能多于Memcache
2011/06/14 PHP
浅析php原型模式
2014/11/25 PHP
PHP如何将XML转成数组
2016/04/04 PHP
php检查函数必传参数是否存在的实例详解
2017/08/28 PHP
THINKPHP5分页数据对象处理过程解析
2020/10/28 PHP
JS版网站风格切换实例代码
2008/10/06 Javascript
JavaScript学习心得之概述
2015/01/20 Javascript
js正则表达式匹配数字字母下划线等
2015/04/14 Javascript
JS中多种方式创建对象详解
2016/03/22 Javascript
Bootstrap表单布局样式源代码
2016/07/04 Javascript
js自制图片放大镜功能
2017/01/24 Javascript
JavaScript数据结构之二叉树的遍历算法示例
2017/04/13 Javascript
微信小程序实现tab切换效果
2017/11/21 Javascript
vue.js分页中单击页码更换页面内容的方法(配合spring springmvc)
2018/02/10 Javascript
vue全局组件与局部组件使用方法详解
2018/03/29 Javascript
JavaScript Canvas编写炫彩的网页时钟
2019/10/16 Javascript
Python程序员开发中常犯的10个错误
2014/07/07 Python
使用pdb模块调试Python程序实例
2015/06/02 Python
利用Python破解斗地主残局详解
2017/06/30 Python
matplotlib实现显示伪彩色图像及色度条
2019/12/07 Python
基于Numba提高python运行效率过程解析
2020/03/02 Python
keras实现多GPU或指定GPU的使用介绍
2020/06/17 Python
HTML5给汉字加拼音收起展开组件的实现代码
2020/04/08 HTML / CSS
Debenhams百货英国官方网站:Debenhams UK
2016/07/12 全球购物
adidas官方旗舰店:德国运动用品制造商
2017/11/25 全球购物
万宝龙英国官网:Montblanc手表、书写工具、皮革和珠宝
2018/10/16 全球购物
Java的接口和C++的虚类的相同和不同处
2014/03/27 面试题
介绍一下Python下range()函数的用法
2013/11/07 面试题
总监职责范文
2013/11/09 职场文书
幼儿园教师师德师风演讲稿:爱我所爱 无悔青春
2014/09/10 职场文书
公务员党的群众路线教育实践活动学习心得体会
2014/10/30 职场文书
专家推荐信怎么写
2015/03/25 职场文书
IDEA使用SpringAssistant插件创建SpringCloud项目
2021/06/23 Java/Android
十大公认最好看的动漫:《咒术回战》在榜,《钢之炼金术师》第一
2022/03/18 日漫
使用Cargo工具高效创建Rust项目
2022/08/14 Javascript