使用 Kendo Upload 进行 Kendo Grid 内联编辑返回 null 结果

Question

我有带有inline 编辑的 Kendo UI Grid 和我的一个领域 (propertyLogo) 我使用 kendoUpload 上传图像。使用kendoUpload函数fileUploadEditor，我使用saveUrl: "./image.php",并将图像转换为base64格式保存到数据库中。当我添加/编辑时，我设法成功更新了所有字段，除了 propertyLogo 字段它返回一个 NULL 结果。我不知道我做错了哪一部分，但我无法将图像保存到数据库中。在这里我将提供我的脚本。

我的数据源和网格

/****************/
/** DATASOURCE **/
/****************/
  
  var dataSource = new kendo.data.DataSource({
    transport: {
      read: {
        url:  "./getPropertyMasterData.php",
        type: "POST",
        data: function() {
          return { 
            method: "getPropertyMasterData",
          }
        }
      },
     
      update: {
        url:  "./getPropertyMasterData.php",
        type: "POST",
        data: function () {
          console.log("I'm calling update!!");
          return {
            method: "editPropertyMasterData",
          }
        },	
        complete: function (e) {  
          $('#grid').data('kendoGrid').dataSource.read();
        } 
      },
      
      destroy: {
        url:  "./getPropertyMasterData.php",
        type: "POST",
        data: function () {
          return {
            method: "deletePropertyMasterData",
          }
        },
        complete: function (e) {  
          $('#grid').data('kendoGrid').dataSource.read();
        } 
      },
    },
    schema: {
      model: {
        id: "propertyID",
        fields: {
          propertyID: { editable: false, nullable: true }
          active: { editable: false, nullable: false, defaultValue: 'y'},
          propertyName: { editable: true,type: "string",validation: {required: {message: "Required"}} },
          propertyLogo: { editable: true, type: "string",validation: {required: {message: "Required"}} },
          propertyColor: { defaultValue: "#000", editable: true, validation: { required: {message: "Required"}} },
          businessRegistrationNo: { editable: true,type: "string",validation: {required: {message: "Required"}} },
          noOfRooms: { defaultValue: 1, editable: true,type: "number",validation: {min: 1, required: {message: "Required"}} }

        }
      }
    },
    pageSize: 25
  }); // End of Kendo DataSource
  
  
/****************/
/** KENDO GRID **/
/****************/
  
  var grid = $("#grid").kendoGrid({
  dataSource: dataSource,
  sortable: true,
  editable: {	mode: "inline" },
  columns: [ 
    { field: "active", title:" ", filterable: false,
       template: "# if (active=='y'){# <span class='k-icon ehors-status-active-icon'></span> #} else {# <span class='k-icon ehors-status-inactive-icon'></span> # }#"}, 

    { field: "propertyName", title:"Property Name",  width: "80" },

    { field: "businessRegistrationNo", title:"Business Reg. No.",  width: "80" },

    { field: "propertyLogo", title:"Logo",  width: "80", editor: fileUploadEditor
    ,template: "<div class='propertyLogo'><a></a>#=propertyLogo#</div>" },

    { field: "propertyColor", title:"Color", width: "80px",  editor : getColor, template:  function(dataItem) {
      return "<div style='background-color: " + dataItem.propertyColor + ";'>&nbsp;</div>";
    }},

    { field: "noOfRooms", title:"No of Rooms",  width: "80px", format: "", template: "<div class='unit'>#= noOfRooms#</div>" },

    //Button Name
    { command: [{ name: "edit", text: {	
      edit: "Edit", 
      update: "Update", 
      cancel: "Cancel"} } 
      ], title: "" }
  ],
  save: onSave, // <--  checking duplicate error.
  noRecords: {template: "No Records" }	
}).data("kendoGrid");  //end of kendo grid


function fileUploadEditor(container, options) {
  $('<input type="file" id="fileUpload" name="fileUpload" /> ')
  .appendTo(container)
  .kendoUpload({ 
    multiple:false,
    async: {
      saveUrl: "./image.php",
      autoUpload: true,
    },
    validation: {
      allowedExtensions: [".jpg", ".png", ".jpeg"]
    },
    success: onSuccess,    // just a console log to view progress
    upload: onUpload,      // just a console log to view progress
    progress: onProgress   // just a console log to view progress
  });
}

我的图片.php

图像将转换为base64 并存储到hexString 变量中。一旦getPropertyMasterData.php 被调用，它将获取hexString 值。目前在这里我可以看到它成功返回一个值。

<?php  
$file = $_FILES['fileUpload'];	
$fileName = $_FILES['fileUpload']['name'];
$fileTmpName = $_FILES['fileUpload']['tmp_name']; //directory location	
$fileSize = $_FILES['fileUpload']['size'];
$fileError = $_FILES['fileUpload']['error'];  //default 0 | 1 got error

$fileExt = explode('.', $fileName);	  //split file name to get ext name.
$fileActualExt = strtolower(end($fileExt)); //change to lowercase for the extension file
$allowed = array('jpg','jpeg','png');

  if (!in_array($fileActualExt, $allowed)) {
    return ['error' => 'You cannot upload files of this type!'];
  }

  if ($fileError !== 0) {
    return ['error' => 'Error occur when upload file!'];
  }

  if ($fileSize > 500000) {
    return ['error' => 'Your file size is too big!'];
  }

$fileDestination = './uploads/' . $fileName;                    
move_uploaded_file($fileTmpName, $fileDestination); 

$data = file_get_contents($fileTmpName);
return ['hexString' => base64_encode($data)];
?>

我的 getPropertyMasterData.php
假设$uploadPayload['hexString'] 将从image.php 获取一个变量，但不知何故它返回 NULL 结果。其他领域工作正常。

<?php
  $propertyID = "1";
  include($_SERVER['DOCUMENT_ROOT'] . '/TM.pdo.php'); 
  $ehorsObj = new TM();
  $ehorsObj->TM_CONNECT($propertyID);

  $uploadPayload = require "image.php";  // READ FILE FROM image.php  |  Return NULL result

  if (isset($uploadPayload['error'])) {
      // echo $uploadPayload['error']);
      /* do something in case of error */
  }

  $method = $_POST['method'];
  switch ($method){
    case "getPropertyMasterData" :
      $method($ehorsObj);
      break;

    case "editPropertyMasterData" :
      $method($ehorsObj, $uploadPayload['hexString']);
      break;
    default:
      break;
  }


  /** READ **/  
  function getPropertyMasterData($ehorsObj) {
      $getcheckbox = (isset($_POST['c1']) ? $_POST['c1'] : "all"); // by default select *
      $sql         = "SELECT * FROM tblAdmProperty ";
      if ($getcheckbox == "true") {
        $sql .= " WHERE active = 'y' ";
    } 
    $sql .= " ORDER BY 2 ASC " ;
    $array = array();	

    $GetResult = $ehorsObj->FetchData($sql, $ehorsObj->DEFAULT_PDO_CONNECTIONS);
    while ($row = $GetResult->fetch()){
      $array[] = $row;
    }
    header("Content-type: application/json");
    $result = json_encode($array);
    echo $result;
  }


  /** EDIT **/
  function editPropertyMasterData($ehorsObj, $NewHexString) {
    $propertyID     = (isset($_POST['propertyID']) ? $_POST['propertyID'] : '');
    $propertyName   = (isset($_POST['propertyName']) ? $_POST['propertyName'] : '');
    $propertyLogo   = (isset($_POST['propertyLogo']) ? $_POST['propertyLogo'] : '');
    $propertyColor   = (isset($_POST['propertyColor']) ? $_POST['propertyColor'] : '');
    $businessRegistrationNo   = (isset($_POST['businessRegistrationNo']) ? $_POST['businessRegistrationNo'] : '');
    $noOfRooms   = (isset($_POST['noOfRooms']) ? $_POST['noOfRooms'] : '');
    $active 		= (isset($_POST['active']) ? $_POST['active'] : '');

    $sqlUpdate = " UPDATE tblAdmProperty
      SET propertyName = '" . $propertyName . "',
      propertyLogo = '" . $NewHexString . "',
      propertyColor = '" . $propertyColor . "',
      businessRegistrationNo = '" . $businessRegistrationNo . "',
      noOfRooms = '" . $noOfRooms . "',
      active = '" . $active . "'
      WHERE propertyID = '" . $propertyID . "' ";  
    $ehorsObj->ExecuteData($sqlUpdate, $ehorsObj->DEFAULT_PDO_CONNECTIONS);
  }

?>

如果我使用 cookie 或会话，它会起作用，但我会尽量避免使用它。我希望我提供一个明确的解释。

Answer 1

最后，我设法让它工作。

1. 首先，我创建一个隐藏文本框<input type="hidden" id='uploadedFile' data-bind="value: propertyLogo" />

2. 修复了我的fileUploadEditor 函数并添加了remove.php（可选）。 onSucces 事件将在image.php 中获取服务器响应并推送到我之前创建的文本框值。

function onSuccess(e) {
	console.log(e.response);
	/* push server respoonse to texbox */
	$("#uploadedFile").val(e.response);
}

function fileUploadEditor(container, options){
	$('<input type="file" id="propertyLogo" name="propertyLogo"  /> ')
	.appendTo(container)
	.kendoUpload({
		multiple:false,
		async: {
			saveUrl: "image.php", 
			removeUrl: "remove.php", 
			autoUpload: true,
		},
		validation: {
			allowedExtensions: [".jpg", ".png", ".jpeg"]
	    },
		success: onSuccess
	});
	$("<span class='k-invalid-msg' data-for='propertyLogo'></span>").appendTo(container);
}

1. image.php 转换成base64后需要在json format

<?php

$fileParam = "propertyLogo";
$uploadRoot = "uploads/";
$files = $_FILES[$fileParam];

  if (isset($files['name'])){
    $error = $files['error'];
    if ($error == UPLOAD_ERR_OK) {

      $fileSize = $files['size'];
      if ($fileSize < 500000) { 		//500000 = 500mb

        $targetPath = $uploadRoot . basename($files["name"]);
        $uploadedFile = $files["tmp_name"];

        /* get a full paths */
        $fullpath = getcwd();
        $newTargetPath = $fullpath . '/' . $targetPath;

        move_uploaded_file($uploadedFile, $newTargetPath); 

        /* convert data into base64 */
        $data = file_get_contents($uploadedFile);
        $hex_string = base64_encode($data);

        header('Content-Type: application/json');
        echo json_encode($hex_string);

      } else {
       echo "Your file size is too big! ";
      }	
    } else {
     echo "Error code " . $error;
    }
  }

  // Return an empty string to signify success
  echo "";

?>

4. remove.php

<?php
  $fileParam = "propertyLogo";
  $uploadRoot = "uploads/";
  $targetPath = $uploadRoot . basename($_POST["name"]);

  unlink($targetPath);

  echo "";
?>

5. 最后在我的 Kendo ui Grid save 事件上我添加了这一行，基本上从文本框中获取值并设置到我的 propertyLogo 字段中

save: function(e){ e.model.set("propertyLogo",$("#uploadedFile").val()); }