javascript - 图像数据未正确发送 - Ajax、Cordova

Question

下面的代码是使用ajax拍照并发送到服务器，但是图片数据没有正确发送。

 <script>
      var pictureSource;   // picture source
      var destinationType; // sets the format of returned value 
      var image = "";


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

        function onDeviceReady() {

        function alertDismissed() {
        };
            pictureSource = navigator.camera.PictureSourceType;
            destinationType = navigator.camera.DestinationType;
        }

 function capturePhoto() {
            navigator.camera.getPicture(onPhotoDataSuccess, onFail, {
                quality: 50,
                destinationType: destinationType.DATA_URL
            });
        }

            function onPhotoDataSuccess(imageData) {

            var smallImage = document.getElementById('smallImage');

            smallImage.style.display = 'block';

            smallImage.src = "data:image/jpeg;base64," + imageData;

            image = "data:image/jpeg;base64," + imageData;

            alert("Image = "+image);
        }

     function onFail(message) {
            alert('Failed because: ' + message);
        }

    function submitFunction() {

        function alertDismissed() {
        };

        var dataString = 'image='+image;

        $.ajax({
        type: "POST",
        url: "url.php",
        data: dataString,
        cache: false,
        success: function(result){

        }
        });

        }
        </script>

        <input type="button" id="camera" class="btn btn-primary btn-large btn-block" value="Take Photo"  onclick="capturePhoto();"/>

        <input type="submit" class="btn btn-primary btn-large btn-block" value="Next"  onclick="submitFunction();" />

        <img style="display:none;width:60px;height:60px;" id="smallImage" src="" />

图像显示正常，警报显示“Image = data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDABALDA4M......o7cUAPFJR9KWmgP/9k="。

但是，在下面的 php 中，$_POST['image'] 没有接收到正确的数据，它丢失了一些像 '+' 这样的字符，并且还用空格或换行替换了它。因此，当我从其他页面的数据库返回时，图像无法正确显示。

url.php

$con=mysql_connect('server','user','password') or die("Failed to connect to MySQL: " . mysql_error());

$db=mysql_select_db('db',$con) or die("Failed to connect to MySQL: " . mysql_error()); 

$retval = mysql_query( "UPDATE tablename SET photo='".$_POST['image']."' WHERE ID='".$_POST['id']."'", $con );

echo $_POST['image'];

Answer 1

我给你我的代码，对我来说非常有用。

在应用程序中使用它之前，以下工作非常重要:你使用 cordova/phonegap 相机插件:cordova-plugin-camera

因此您必须通过在获取 base64 编码图像之后捕获图像来设置选项

  navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 20, allowEdit: true,
    destinationType: destinationType.DATA_URL });

关于照片数据成功的函数

function onPhotoDataSuccess(imageData) {
    upladImage(imageData);
}

函数上传图片

function upladImage(imageData){
    $.ajax({

        type: "POST",
        url: "http://localhost/upload/up.php",
        data: {img_data:imageData},
        cache: false,
        contentType: "application/x-www-form-urlencoded",
        success: function (result) {
        alert("upload OK: "+ result);
        }

    });
}

img_data 是服务器端的 $_POST[img_data] 变量

服务器端PHP代码(简单代码)

#from ajax post request save the post variable to $img
$img = $_POST["img_data"];

#folder to upload chmod 777 !!!
define('UPLOAD_DIR', 'images/');

#filename will be generated by timestamp 
$file = UPLOAD_DIR . time() . '.jpg'; 

#replace data header
$img = str_replace('data:image/png;base64,', '', $img);

#replace empty space
$img = str_replace(' ', '+', $img); 

#base64 decode
$data = base64_decode($img);

#save the file
$success = file_put_contents($file,$data);

#give feedback to your APP
if($success)
    echo "upload successfully";
else
    echo "an error occours while saving file";

ajax post 请求方法是文件传输插件上传功能的一个很好的替代方法，因为某些android 版本的文件传输上传功能存在问题。 (这是我的经验)

同样重要的是:您必须在 html 文件中包含 cordova 和 jquery 库。