Question

我在访问隐藏字段的值时遇到问题。我已经制作了一个图像裁剪应用程序，其中我要求用户上传图像并提供UI以帮助用户选择要裁剪的区域。然后，左上角的x和y坐标以及所选区域的宽度和高度将作为分号分隔的字符串存储在隐藏的输入字段中，当单击“裁剪”按钮时，图像和隐藏的字段值将传递给裁剪.php文件。但是在php文件中无法访问隐藏字段的值。

我的html文件，提供浏览和裁剪功能 -

<!doctype html>
<html>
    <head>
        <title>

              Crop

        </title>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
    <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
    <script type="text/javascript" src="scripts/jquery.imgareaselect.pack.js"></script>

    <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
     rel = "stylesheet">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="css/imgareaselect-default.css" />

    <script>

    var app =  angular.module('main-App',[]);
    app.controller('AdminController', function($scope, $http) {

        $scope.form = [];
        $scope.files = [];
        $scope.progressBar=0;
        $scope.progressCounter=0;

        $scope.submit = function() {
            alert('Sub');
            $scope.form.image = $scope.files[0];
            $http({
                method  : 'POST',
                url     : 'crop.php',
                processData: false,
                transformRequest: function (data) {
                    var formData = new FormData();
                    formData.append("image", $scope.form.image);  
                    return formData;  
                },  

                data : $scope.form,
                headers: {
                    'Content-Type': undefined
                },

                uploadEventHandlers: {
                    progress: function (e) {
                        if (e.lengthComputable) {
                            $scope.progressBar = (e.loaded / e.total) * 100;
                            $scope.progressCounter = $scope.progressBar;
                            $("#completion").css("width", $scope.progressBar+'%');
                        }
                    }
                }
            }).then(function successCallback(response) {
                    alert($scope.form.params);
             });


        };
        $scope.uploadedFile = function(element) {
            $scope.currentFile = element.files[0];
            var reader = new FileReader();
            reader.onload = function(event) {
                $scope.image_source = event.target.result
                $scope.$apply(function($scope) {
                $scope.files = element.files;
                });
            }
            reader.readAsDataURL(element.files[0]);
            $('img#photo').imgAreaSelect({
                onSelectStart: {enable:true},
                onSelectEnd: function (img, selection) {
                    document.getElementById("params").value=selection.x1+';'+selection.y1+';'+selection.width+';'+selection.height;
                    alert(document.getElementById("params").value);
                }
            });


        }
    });

</script>

<style>

    html,body {
        height: 100%;
    }
    .wrapper{
        height:auto;
    }
    .wrapper img {

        height:100%;
        color:grey;
        text-align: center;
        line-height:100px;
        vertical-align: middle;
        padding:0px;
        margin:0px;
    }


</style>

</head>

<body>
<div ng-app="main-App" ng-controller="AdminController">
    <form ng-submit="submit()" name="form" role="form" enctype="multipart/form-data">
            <div class="container-fluid">
                <div class="row flex-items-xs-center">
                    <div class="col-md-9">

                        <div class="container-fluid">
                            <div class="row"> 
                                <div class="col-md-9">
                                    <div class="wrapper">
                                        <img id="photo" name="photo" src="{{image_source}}"  alt="Image preview..." class="img-responsive img-thumbnail" style="border-style:dashed">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <br/>
                        <br/>
                        <div class="container-fluid">
                            <div class="row">
                                <div class="col-md-2">
                                    <label class="btn btn-primary">

                                        <input ng-model="form.image" type="file" class="form-control input-lg" name="image" id="image" 
                                        accept = "image/*"
                                        onchange="angular.element(this).scope().uploadedFile(this)"
                                        style="display:none;" >

                                        <span class="glyphicon glyphicon-folder-open"></span>&nbsp;
                                        Browse

                                    </label>
                                </div>
                                <div class="col-md-2">
                                    <label class="btn btn-success">
                                        <input type="submit" id="submit" value="Submit" style="display:none;"/>
                                            <span class="glyphicon glyphicon-cloud-upload"></span>&nbsp;
                                        Crop
                                    </label>
                                </div>
                            </div>  
                        </div>
                    </div>
                </div>
            </div>
            <input type="hidden" name="params" id="params" value="0;0;0;0" ng-model="params" />         
    </form>
    <br/>
    <br/>
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-9">
                <div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" id ="completion" name="completion"
                    aria-valuenow="0" aria-valuemin="0" aria-valuemax="50" style="width:0%;height:10px;border-width:0px;border-radius:2px;">
                    </div> 
            </div>
        </div> 
    </div>  
</div>
<br/>
<br/>

用户界面 -

crop.php -

<?php


$uncropped_path = '/var/www/html/images/original/';
$cropped_path = '/var/www/html/images/cropped/';



if(isset($_FILES['image'])){
    //$ext = pathinfo($_FILES['image']['name'],PATHINFO_EXTENSION);
    $image = $_FILES['image']['name'];
    move_uploaded_file($_FILES["image"]["tmp_name"], $uncropped_path.$image);

    $data = json_decode(file_get_contents("php://input"));
    print_r($data);


}else{

    echo "Image Is Empty";

}

function doResize($filename,$size,$resize_path)
{
    $image = new Imagick();
    $file = file_get_contents($filename);
    $image->readImageBlob($file);
    $dimensions = $image->getImageGeometry(); 

    $pathInfo = pathinfo($filename);  
    $name = $pathInfo['filename'];


    $srcWidth =  $dimensions['width'];
    $srcHeight =  $dimensions['height']; 

    list($resWidth,$resHeight) = getResizeDim($size,$srcWidth,$srcHeight);

    $image->resizeImage($resWidth,$resHeight,Imagick::FILTER_LANCZOS,.85);

    $image->writeImage($resize_path);


}



function getResizeDim($size,$srcWidth,$srcHeight)
{
    $width;
    $height;

    if($srcHeight > $srcWidth)
    {
        if($srcHeight > $size)
            $height = $size;
        else $height = $srcHeight;

        $width = ceil($height*($srcWidth/$srcHeight));
    }
    else {

        if($srcWidth > $size)
            $width = $size;
        else $width = $srcWidth;

        $height = ceil($width*($srcHeight/$srcWidth));
    }
    return array($width,$height);
}

当我尝试打印在php中收到的数据时，我得到以下内容 -

此外，php中的数据数组似乎是空的。我已经在stackoverflow上阅读了各种类似的问题，但在我的案例中没有一个有效。

Angular JS将图片和隐藏的字段数据发布到php

0 个答案: