如何使用Angularjs在Ionicframework中上传相机和图库图像

时间:2015-08-01 09:29:30

标签: php angularjs angularjs-scope ionic-framework ionic

对ionicFramework和Angularjs不熟悉并且能够使用此控制器设置我的应用程序以使用相机或设备照片库捕获图像。但我的问题是如何将图像标题包含在输入字段中,然后在我的服务器中发送php文件来处理业务逻辑:

    $scope.takePhoto = function(){
    var options = {
        quality: 80,
        destinationType: Camera.DestinationType.FILE_URI,
        sourceType: Camera.PictureSourceType.CAMERA,
        allowEdit: true,
        encodingType: Camera.EncodingType.JPEG,
        targetWidth: 500,
        targetHeight: 500,
        popoverOptions: CameraPopoverOptions,
        correctOrientation: true,
        saveToPhotoAlbum: false
    };

    $cordovaCamera.getPicture(options).then(function(imageData) {
        $scope.srcImage = imageData;
    }, function(err) {
        // error
    });
};

//Photo from gallery
$scope.selectPhoto = function(){
    var options = {
        quality: 80,
        destinationType: Camera.DestinationType.FILE_URI,
        sourceType: Camera.PictureSourceType.PHOTOLIBRARY,
        allowEdit: true,
        encodingType: Camera.EncodingType.JPEG,
        targetWidth: 500,
        targetHeight: 500,
        correctOrientation: true
    };

    $cordovaCamera.getPicture(options).then(function(imageData) {
        $scope.srcImage = imageData;
    }, function(err) {
        // error
    });
};



$scope.uploadPhoto = function(){
    $scope.photoDetails = {};
    $scope.photoDetails.desc = "";
    var fileURL = $scope.srcImage;
    var uploadOptions = new FileUploadOptions();
    uploadOptions.fileKey = "file";
    uploadOptions.fileName = fileURL.substr(fileURL.lastIndexOf('/') + 1);
    uploadOptions.mimeType = "image/jpeg";
    uploadOptions.chunkedMode = false;

    $cordovaFile.uploadFile('www.mydomain.com/upload_user_photo.php', fileURL, uploadOptions).then(
        function(result) {
            // Success!
        }, function(err) {
            // Error
        });     
}

我需要如何将标题输入变量包含到我的upoad中以及如何在php文件中输入它们。我是通过帖子或什么来获取它们的?

1 个答案:

答案 0 :(得分:1)

你可以把它包含在像这样的选项中的参数

$scope.uploadPhoto = function(){
var fileURL = $scope.srcImage;
var caption = $scope.caption;

    var filename = fileURL.substr(fileURL.lastIndexOf('/') + 1);
    var options = {
        fileKey: "file",
        fileName: filename,
        chunkedMode: false,
        mimeType: "image/jpeg",
        params : {'directory':'upload', 'fileName':filename, 'caption':caption}
    };
    $cordovaFileTransfer.upload(AppData.get("siteUrl") + 'upload.php', fileURL, options).then(function(result) {
        alert(result.response);
    }, function(err) {
        console.log("ERROR: " + JSON.stringify(err));
        alert(err);
    }, function (progress) {
        // constant progress updates
    });

  };