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

2024-05-27

我有 Kendo UI Gridinline编辑和我的领域之一(propertyLogo) I use 剑道上传 https://demos.telerik.com/kendo-ui/upload/index上传图像。使用kendoUpload函数fileUploadEditor, I use 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 或会话,它会起作用,但我尽量避免使用它。我希望我能提供一个明确的解释。


最后,我设法让它发挥作用。

  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. 图片.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 "";

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

  unlink($targetPath);

  echo "";
?>
  1. 最后在我的 Kendo ui 网格上save事件我添加这一行,基本上从文本框中获取值并将其设置到我的propertyLogo field
save: function(e){ e.model.set("propertyLogo",$("#uploadedFile").val()); }
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

使用 Kendo Upload 进行 Kendo Grid 内联编辑返回空结果 的相关文章

随机推荐

  • 有什么简单的方法可以完全忽略带有 java url 连接的 ssl ?

    我正在构建一个应用程序 定期检查一些 RSS 提要是否有新内容 其中一些提要只能通过 https 访问 有些具有自签名或以某种方式损坏的证书 我仍然希望能够检查它们 请注意 安全性在此应用程序中不是问题 目标是以最小的努力访问内容 我使用此
  • JavaScript 单选按钮

    我正在尝试制作一些项目 其中我希望在选择专家按钮时显示一个文本框 而在单击学习者按钮时不显示文本框 我已经编写了这段代码 但无法解决问题 请帮忙
  • 为什么我不能将 this 指针显式传递给成员函数?

    c 标准 ISO c 11 中提到第 9 3 1 节 that 可以为其类的对象调用非静态成员函数 类型 或从其类派生的类的对象 第 10 条 类型 使用类成员访问语法 5 2 5 13 3 1 1 尝试使用 g 版本 4 8 2 编译此代
  • 在 azure Web 应用程序容器上部署 .net Core 3 Linux 容器,出现 IdentityServer4 认证/http 错误

    我正在尝试使用 Net Core 干净架构应用程序模板 https github com jasontaylordev CleanArchitecture并使其在容器中运行并通过 Azure CI CD 管道进行部署 我在 Linux 容器
  • Nodejs 在 Windows 上找不到已安装的模块

    我现在正在Windows上学习nodejs 使用npm cmd全局安装了几个模块 nodejs找不到已安装的模块 以玉石为例 npm install jade g Jade安装在目录中 C Program Files x86 nodejs
  • Windows 上 PE 文件 (exe) 的最小文件大小是多少?以及最小内存分配? [复制]

    这个问题在这里已经有答案了 Windows 上 PE 文件 exe 的最小文件大小是多少 以及最小内存分配 我 使用 VS 10 附带的 MASM ml exe 和 link exe 组装了以下代码 我不能忽略 kernel32 lib 和
  • mysql 修改全文搜索的停用词列表

    我搜索了很多 据说我必须编辑 my cnf 文件来更改停用词列表 我将 my medium cnf 重命名为 my cnf 并添加了 ft query expansion limit 和 ft stopword file 条件 我已经重新启
  • 修改 GGplot2 对象

    然而 我很好奇 是否可以添加任何特定的图例或将哪个物种对应于观察到的预期绘图中 以分别知道它是哪个圆圈 我目前使用的是一个名为 finches 的假数据集 该包称为 cooccurr 它创建一个 ggplot 对象 我很好奇如何实际编辑它以
  • 无法在 PHP shell_exec() 中运行“cd”命令

    我最近在我的大学以太网连接上安装了 Apache 设置的笔记本电脑 现在 只要我有 IP 地址或主机名 我可以选择 我就可以从任何地方连接到我的计算机 现在我想创建一个基于 Web 的命令提示符 让我可以从任何设备在笔记本电脑上运行命令 一
  • 有没有办法阻止dll在reflector之类的软件中被打开?

    你好 有没有办法防止 C 中的特定 dll 在反射器中打开 我可以打开许多 dll 并且可以使用反射器获取代码 但是 当尝试打开某些 dll 时 它会显示一条错误消息 指出 特定 dll 不包含 CLI 标头 我怎样才能制作这样的dll 您
  • Django 数据库迁移与 postgres 失败

    我对模型做了一些更改 然后运行了 python 管理 py makemigrations python 管理 py 迁移 我得到了这个回溯 Operations to perform Synchronize unmigrated apps
  • 清理 tan(x) 的图

    我想形象化的根源tan xi tanh xi xi gt 0和我的情节 plot tan pi xi tanh pi xi xi 0 4 ylim 1 2 像这样出来 在那里人们看到真正的根源 xi i approx pi n 1 4 n
  • 通知中的 showInputMethodPicker 在 Android 9 中不起作用

    我的应用程序有时会显示一条通知 以简化切换到应用程序的内部输入法的过程 因此 我正在执行 InputMethodManager getSystemService INPUT METHOD SERVICE showInputMethodPic
  • 使用 jQuery 禁用超链接

    a href gohere aspx class my link Click me a I did my link attr disabled true 但没用 有没有一种简单的方法可以使用 jquery 禁用超链接 删除href 我宁愿不
  • 由于垃圾收集,Haskell 程序中会出现多长时间的暂停?

    关于我的另一个问题Haskell 集合可以保证每个操作的最坏情况范围 https stackoverflow com q 12393104 1333025 我很好奇 垃圾收集会导致多长时间的暂停 Haskell 是否使用某种增量垃圾收集 以
  • Python子进程Exec格式错误

    抱歉 如果这个问题很愚蠢 我正在使用Pythonsubprocess在 Ubuntu Natty 11 04 中调用 bat 文件的语句 但是 我收到错误消息 Traceback most recent call last File pfa
  • APEX动态定义默认文件名?

    在 APEX 应用程序中 我有一个交互式报告 In Report Attributes gt Report Export gt Filename 您可以指定下载的默认文件名 问题 有没有办法动态定义这个默认文件名 是的 我知道 用户在下载时
  • Scikit Learn GridSearchCV 无需交叉验证(无监督学习)

    是否可以在没有交叉验证的情况下使用 GridSearchCV 我正在尝试通过网格搜索优化 KMeans 聚类中的聚类数量 因此我不需要或想要交叉验证 The 文档 http scikit learn org stable modules g
  • 相当于 Java 中 C++ 的 std::bind 吗?

    有没有一种方法可以像 C 中的 std bind 一样将 Java 中的参数绑定到函数指针 Java 中类似的东西会是什么 void PrintStringInt const char s int n std cout lt lt s lt
  • 使用 Kendo Upload 进行 Kendo Grid 内联编辑返回空结果

    我有 Kendo UI Gridinline编辑和我的领域之一 propertyLogo I use 剑道上传 https demos telerik com kendo ui upload index上传图像 使用kendoUpload函