当前位置: > > > Cordova - 从相册中选择照片并上传,以及拍照上传

Cordova - 从相册中选择照片并上传,以及拍照上传

1,安装需要的插件
不管是从相册中选择图片上传,还是拍照上传。我们都需要如下先安装如下三个插件:Camera(相机)、file(文件访问操作)、fileTransfer(文件传输)。
如果没有安装的话,先安装下:
cordova plugin add cordova-plugin-camera
cordova plugin add cordova-plugin-file
cordova plugin add cordova-plugin-file-transfer

2,选择设备照片并上传 
下面代码样例,点击按钮后会打开系统相册来选择照片,选中的照片会显示在页面上。同时会把选择的照片上传到服务器。
               
<!DOCTYPE html>
<html>
    <head>
        <title>Capture Photo</title>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8">
        <script type="text/javascript" charset="utf-8" src="cordova.js"></script>
        <script type="text/javascript" charset="utf-8">
            var pictureSource;
            var destinationType;

            document.addEventListener("deviceready",onDeviceReady,false);

            //Cordova加载完成会触发
            function onDeviceReady() {
                pictureSource=navigator.camera.PictureSourceType;
                destinationType=navigator.camera.DestinationType;
            }

            //获取照片
            function getPhoto(source) {
                //quality : 图像的质量,范围是[0,100]
                navigator.camera.getPicture(onPhotoURISuccess,
                  function(error){console.log("照片获取失败!")},
                  { quality: 50, destinationType: destinationType.FILE_URI, sourceType: source });
            }

            //获取照片成功
            function onPhotoURISuccess(imageURI) {
                //打印出照片路径
                console.log(imageURI);
                //显示照片
                var largeImage = document.getElementById('largeImage');
                largeImage.style.display = 'block';
                largeImage.src = imageURI;

                upload(imageURI);
            }

          //上传文件
          function upload(fileURL) {

            //上传成功
            var success = function (r) {
                console.log("上传成功! Code = " + r.responseCode);
            }

            //上传失败
            var fail = function (error) {
                alert("上传失败! Code = " + error.code);
            }

            var options = new FileUploadOptions();
            options.fileKey = "file1";
            options.fileName = fileURL.substr(fileURL.lastIndexOf('/') + 1);
            //options.mimeType = "text/plain";

            //上传参数
            var params = {};
            params.value1 = "test";
            params.value2 = "param";
            options.params = params;

            var ft = new FileTransfer();
            //上传地址
            var SERVER = "http://www.hangge.com/upload.php"
            ft.upload(fileURL, encodeURI(SERVER), success, fail, options);
          };

        </script>
    </head>
    <body style="padding-top:50px">
        <button style="font-size:23px;" onclick="getPhoto(pictureSource.PHOTOLIBRARY);">
            从相册选择照片并上传
        </button> <br>
        <img style="display:none;" id="largeImage" src="" width="300px" />
    </body>
</html>

3,拍照并上传
下面代码样例,当点击按钮后会掉用摄像头拍照,并在页面上显示出来。同时拍摄照片会上传到服务器上。
             
<!DOCTYPE html>
<html>
    <head>
        <title>Capture Photo</title>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8">
        <script type="text/javascript" charset="utf-8" src="cordova.js"></script>
        <script type="text/javascript" charset="utf-8">

            var destinationType;

            document.addEventListener("deviceready",onDeviceReady,false);

            //Cordova加载完成会触发
            function onDeviceReady() {
                destinationType=navigator.camera.DestinationType;
            }

            //拍照
            function capturePhoto() {
                //拍照并获取Base64编码的图像(quality : 存储图像的质量,范围是[0,100])
                navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 50,
                                            destinationType: destinationType.FILE_URI }
                                            );
            }

            //拍照成功
            function onPhotoDataSuccess(imageURL) {
                var smallImage = document.getElementById('smallImage');
                smallImage.style.display = 'block';
                smallImage.src = imageURL;
                //开始上传
                upload(imageURL);
            }

            //拍照失败
            function onFail(message) {
                alert('拍照失败: ' + message);
            }

            //上传文件
            function upload(fileURL) {

              //上传成功
              var success = function (r) {
                  console.log("上传成功! Code = " + r.responseCode);
              }

              //上传失败
              var fail = function (error) {
                  alert("上传失败! Code = " + error.code);
              }

              var options = new FileUploadOptions();
              options.fileKey = "file1";
              options.fileName = fileURL.substr(fileURL.lastIndexOf('/') + 1);
              options.mimeType = "image/jpeg";

              //上传参数
              var params = {};
              params.value1 = "test";
              params.value2 = "param";
              options.params = params;

              var ft = new FileTransfer();
              //上传地址
              var SERVER = "http://www.hangge.com/upload.php"
              ft.upload(fileURL, encodeURI(SERVER), success, fail, options);
            };
        </script>
    </head>
    <body style="padding-top:50px">
        <button style="font-size:23px;" onclick="capturePhoto();">拍摄照片并上传</button> <br>
        <img style="display:none;width:240px;height:320px;" id="smallImage" src="" />
    </body>
</html>

附:服务端代码(upload.php)

<?
$value1 = $_POST["value1"];
$value2 = $_POST["value2"];
  
move_uploaded_file($_FILES["file1"]["tmp_name"],
    $_SERVER["DOCUMENT_ROOT"]."/upload/" . $_FILES["file1"]["name"]);
 
echo "服务器收到如下数据:\r";
echo $value1."\r";
echo $value2."\r";
echo $_FILES["file1"]["name"]."\r";
?>
评论1
  • 1楼
    2017-11-21 11:09
    大大

    你好想請問一下 error.code = 3 3的錯誤訊息要在哪邊查詢
    我php端的設定
    <?php
    header("Content-Type: text/html; charset=utf-8");
    header('Access-Control-Allow-Origin:*');
    header('Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS');
    header('Access-Control-Allow-Headers: X-Requested-With, Content-Type, Accept');

    $new_image_name = strtolower($_FILES['file']['name']);
    move_uploaded_file($_FILES["file"]["tmp_name"], "uploadFiles/".$new_image_name);

    ?>
    不太會部屬php端 可否給個提示

    站长回复

    如果使用我文章里的代码的话,你服务端里的$_FILES['file']要改成$_FILES['file1']。

    这里我也把完整的php代码提交了,你可以再看下。