Cordova 媒体上传实验报告
使用Cordova与PHP实现App端拍照、录音、视频及时上传功能
准备工作
1、一台配置好LAMP环境的电脑或在线服务器
2、H5编辑工具
3、用于测试的手机
具体实现
1、配置Apache服务器：本地计算机可以使用PHPstudy或Wamp；服务器端选用Linux系统配置教程详见：LAMP的安装与配置
2、打开网站根目录，分别新建 <info.php><unload.php><upload文件夹>如图
编辑 info.php 内容
<?php
phpinfo();
?>3、打开 <网址>/info.php 例如： http://47.103.93.155/info.php 并查看php.ini 文件位置
4、在配置好服务端环境之后，修改 php.ini 配置文件
在 php.ini 文件中搜索 upload_max_filesize 并修改它的值为32M，防止由于测试过程中上传的图片和视频过大导致实验失败，如图
修改成功后，按Ctrl + S 保存
5、编辑upload.php的内容
<?php
if ($_FILES["file"]["error"] > 0)
{
echo "错误：" . $_FILES["file"]["error"] . "<br>";
}
else
{
echo "上传文件名: " . $_FILES["file"]["name"] . "<br>";
echo "文件类型: " . $_FILES["file"]["type"] . "<br>";
echo "文件大小: " . ($_FILES["file"]["size"] / 1024) . " kB<br>";
echo "文件临时存储的位置: " . $_FILES["file"]["tmp_name"] ."<br>";
}
move_uploaded_file($_FILES["file"]["tmp_name"], "upload/" . $_FILES["file"]["name"]);
echo "文件存储在: " . "upload/" . $_FILES["file"]["name"];
?>代码中echo的输出代码可以不写，主要用于表单提交的信息展示， $_FILES获取上传文件有关的各种信息 ，文件默认存储在临时路径下，脚本执行完会自动删除,move_uploaded_file的作用是在执行过程中将文件拷贝到upload 目录下，这样即使临时文件删除，拷贝的文件依然不会丢失。
6、创建Cordova项目，添加插件
cordova plugin add cordova-plugin-file
cordova plugin add cordova-plugin-file-transfer
cordova plugin add cordova-plugin-media-capture
设置文件管理权限 <Cordova项目> => <config.xml> 增加一行代码
<platform name="android">
<allow-intent href="market:*" />
<preference name="AndroidPersistentFileLocation" value="Compatibility" /> <===就是这一行
</platform>接着用代码编辑器，编写Cordova代码，如下（注意上传地址填：http://xx.xx.xx/upload.php）
<!DOCTYPE html>
<html>
<head>
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<meta name="viewport"
content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
<script type="text/javascript" src="cordova.js"></script>
<link rel="stylesheet" href="./css/jquery.mobile-1.4.5.min.css">
<script src="./js/JQuery-1.10.2.js"></script>
<script src="./js/jquery.mobile-1.4.5.min.js"></script>
<title>Cordova</title>
<style>
#photo{
width: 100%;
}
</style>
</head>
<body>
<div data-role="page" data-theme="a">
<div data-role="header">
<h1>CordovaCapture</h1>
</div>
<div data-role="main" class="ui-content">
<a href="#" data-role="button" onclick="a()">利用声音采集文件</a>
<a href="#" data-role="button" onclick="b()">利用图像采集文件</a>
<a href="#" data-role="button" onclick="c()">利用视频采集文件</a>
</div>
<img id="photo"></img>
</div>
</body>
<script>
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady(){
alert('Device Success!');
}
function a(){
navigator.device.capture.captureAudio(a_captureSuccess,captureError,{limit:2})
}
function a_captureSuccess(mediaFiles){
var i,len;
for(i=0,len = mediaFiles.length;i<len;i+=1){
uploadFile(mediaFiles[i]);
}
}
function captureError(error){
alert('采集失败')
}
function uploadFile(Files){
var ft = new FileTransfer();
var path = Files.fullPath;
var name = Files.name;
ft.upload(path,"http://47.103.93.155/upload.php",function(result){
alert('上传成功!');
},function(error){
alert('上传失败!!!');
},{fileName:name})
}
function b(){
navigator.device.capture.captureImage(b_captureSuccess,captureError);
}
function b_captureSuccess(mediaFiles){
var i,len;
for(i=0,len = mediaFiles.length;i<len;i+=1){
document.getElementById("photo").src = mediaFiles[i].fullPath;
uploadFile(mediaFiles[i]);
alert('采集成功！')
}
}
function c(){
navigator.device.capture.captureVideo(c_captureSuccesss,captureError);
}
function c_captureSuccesss(mediaFiles){
var i,len;
for(i=0,len = mediaFiles.length;i<len;i+=1){
uploadFile(mediaFiles[i]);
alert('采集成功！');
}
}
</script>
</html> 7、打开命令行，切换到项目目录下，使用Cordova run android 运行编译打包,并将Apk传输到手机端测试
福利派送
实验文件下载地址：屏幕前的帅哥点进来
阿里云测试服务器IP：47.103.93.155 账号: root 密码:Aliyun123 网站根目录:/var/www/html
使用FTP软件的SFTP模式登陆即可
最后，感谢大家的阅读，写文章经验不足，望见谅！
——Liu
匿名
👍