• 技术文章 >微信小程序 >微信开发

    关于微信小程序上传word、txt、Excel、PPT等文件的详解

    jacklovejacklove2018-06-11 17:34:28原创11510
    目前小程序没有能实现此功能的 API 所以我这里通过使用 web-view 实现;

    实现流程:

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

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

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

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

    效果图:

    php入门到就业线上直播课:进入学习

    具体实现:

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

    地址:https://mp.weixin.qq.com/wxopen/appdatacount


    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标签使用如上,无需多余代码。

    本文详解了关于微信小程序上传word、txt、Excel、PPT等文件的内容,更多相关内容请关注php中文网。

    相关推荐:

    关于冒泡,二分法插入,快速排序算法的介绍

    讲解php 支持断点续传的文件下载类的相关内容

    如何通过php 过滤html标记属性类

    以上就是关于微信小程序上传word、txt、Excel、PPT等文件的详解的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。

    前端(VUE)零基础到就业课程:点击学习

    清晰的学习路线+老师随时辅导答疑

    自己动手写 PHP MVC 框架:点击学习

    快速了解MVC架构、了解框架底层运行原理

    上一篇:ThinkPHP实现微信支付(jsapi支付) 下一篇:自己动手写 PHP MVC 框架(40节精讲/巨细/新人进阶必看)

    相关文章推荐

    • ❤️‍🔥共22门课程,总价3725元,会员免费学• ❤️‍🔥接口自动化测试不想写代码?• 有关争夺的课程推荐10篇• C#开发微信公众号与订阅号接口实例代码• 详解微信个性化菜单开发模式• C#开发微信门户及应用微信门户应用管理系统功能介绍 • 谈谈微信公众平台注册的实例
    1/1

    PHP中文网