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
匿名
👍
FhsnMourf
buying viagra in shanghai viagra in hamburg i want to buy viagra from australia
FhsnMourf
can you shoot viagra viagra buy payoal viagra 25 or 50?
FhsnMourf
viagra low cost does insurance cover viagra viagra super active online
LokuVoria
canada drugs rx pharmacy online erectile dysfunction treatment
AqwsVoria
best drugstore foundation for dry skin best drugstore foundation for dry skin professional pharmacy
NllpMourf
my canadian pharmacy http://pharmacy-onlineasxs.com/ 24 hour pharmacy
Khthdire
drugstore cowboy erectile drugs from canada
JtmfVoria
rx express pharmacy us pharmacy canadian pharmacy cialis
KuikScags
vegas viagra local best prices for viagra generic brand viagra for sale
JbbvVoria
canadian rx pharmacy online online pharmacy viagra mexican pharmacies
FqhhVoria
online pharmacies canada muscle relaxant canada prescription drugs
AhkdVoria
canadian drug store erection pills canadian pharmacies-247
LbsxVoria
best erectile dysfunction pills australia viagra buying drugs canada
Jbnbtorce
canada online pharmacies canadian pharmacies that ship to us tadalafil
FvfcMourf
cialis with dapoxetine or viagra with dapoxetine better viagra vipps generic viagra
Kbcxdire
Viagra Oral Jelly canadian pharmacy online viagra brand cialis
AqcfNatSpoorp
buy brand cialis generic cialis soft tabs cialis onlilne
NncsMourf
price for viagra walmartviagra womens viagra
JbbnVoria
is viagra or cialis more effective can u take cialis with viagra cialis diario 5mg preco
FqbbVoria
cash advance fees on credit cards first payday loans belleville il instant payout payday loans direct lender
AhbzVoria
cash loans anderson sc cash loan apply online dollar tree cash loans
LabxVoria
cialis on ebay que es mejor el cialis o viagra preГ§o do cialis generico
Jbnvtorce
pepper cash payday loan phone number google cash advance how much interest is charged on payday loans
Kvaxdire
payday loan hermitage tn cash loans in jackson ms advantage cash services payday loan
AbcfNatSpoorp
where to bye viagra viagra online with paypal viagra suppliers online