使用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，防止由于测试过程中上传的图片和视频过大导致实验失败，如图

php.ini

修改成功后，按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