`
libudi
  • 浏览: 35925 次
  • 性别: Icon_minigender_1
  • 来自: 郑州
社区版块
存档分类
最新评论

为 KindEditor 实现图片上传

EXTPHPJavaScriptWebBBS 
阅读更多

用 Lysee 开发了一个 BBS，发贴和回复用的是 KindEditor ，图片上传这块用 Lysee 照抄了 upload.php，经测试没有问题，发上来大家看看。

 

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">';
<title>{:bbsys::SITE_NAME:} - Insert Image</title>
</head>
<body>  
<!--{:
string image_save_path(string file_sum)
{
  int hv = file_sum.hash();
  string rv = format("%.3d", [(hv % 256) + 1]);
  string sv = format("%.3d", [(hv \ 256) % 256 + 1]);
  string path = incPD(web_upload_path + rv) + sv;
  sys::mkdir(path);
  return incPD(path);
}

string img_URL = "";  
string tmp_file = ${request.imgFile->file};
string ext = ${request.imgFile}.fileExt().lower();
if (ext in [".jpg", ".jpeg", ".png", ".gif"]) { 
  string sum = tmp_file.md5sum(true);
  string path = image_save_path(sum);
  string img_file = path + sum + ext;
  if (isfile(img_file) or sys::cp(tmp_file, img_file))
    img_URL = veryUD(img_file.copy(length(web_path), length(img_file)));
}

= """<script language="javascript">"""; 
= (img_URL) ? @"""parent.KE.plugin["image"].insert("%{request.id}", 
                  "%(img_URL)", "%{request.imgTitle}", "%{request.imgWidth}",
                  "%{request.imgHeight}", "%{request.imgBorder}");"""
              :"""alert("Failed inserting image!");history.back();""";
= """</script>""";
:}-->
</body>
</html>
 
0
顶
0
踩
分享到：
| 今天面试的实操题
评论
1 楼 libudi 2009-09-26  
引用
JavaEye 的编辑器还有问题，重新编辑 BLOG 内容时如果原文最后是代码，新打开的编辑器光标无法移动到代码的后边


补充显示 upload.php 作作对照。

<?php

//文件保存目录路径
$save_path = './../attached/';
//文件保存目录URL
$save_url = './../attached/';
//定义允许上传的文件扩展名
$ext_arr = array('gif', 'jpg', 'jpeg', 'png', 'bmp');
//最大文件大小
$max_size = 1000000;
//更改目录权限
@mkdir($save_path, 0777);

//有上传文件时
if (empty($_FILES) === false) {
    //原文件名
    $file_name = $_FILES['imgFile']['name'];
    //服务器上临时文件名
    $tmp_name = $_FILES['imgFile']['tmp_name'];
    //文件大小
    $file_size = $_FILES['imgFile']['size'];
    //检查文件名
    if (!$file_name) {
        alert("请选择文件。");
    }
    //检查目录
    if (@is_dir($save_path) === false) {
        alert("上传目录不存在。");
    }
    //检查目录写权限
    if (@is_writable($save_path) === false) {
        alert("上传目录没有写权限。");
    }
    //检查是否已上传
    if (@is_uploaded_file($tmp_name) === false) {
        alert("临时文件可能不是上传文件。");
    }
    //检查文件大小
    if ($file_size > $max_size) {
        alert("上传文件大小超过限制。");
    }
    //获得文件扩展名
    $temp_arr = explode(".", $file_name);
    $file_ext = array_pop($temp_arr);
    $file_ext = trim($file_ext);
    $file_ext = strtolower($file_ext);
    //检查扩展名
    if (in_array($file_ext, $ext_arr) === false) {
        alert("上传文件扩展名是不允许的扩展名。");
    }
    //移动文件
    $file_path = $save_path . $file_name;
    if (move_uploaded_file($tmp_name, $file_path) === false) {
        alert("上传文件失败。");
    }
    $file_url = $save_url . $file_name;
    //插入图片，关闭层
    echo '<html>';
    echo '<head>';
    echo '<title>Insert Image</title>';
    echo '<meta http-equiv="content-type" content="text/html; charset=utf-8">';
    echo '</head>';
    echo '<body>';
    echo '<script type="text/javascript">parent.KE.plugin["image"].insert("' . $_POST['id'] . '", "' . $file_url . '","' . $_POST['imgTitle'] . '","' . $_POST['imgWidth'] . '","' . $_POST['imgHeight'] . '","' . $_POST['imgBorder'] . '");</script>';
    echo '</body>';
    echo '</html>';
}

//提示，关闭层
function alert($msg)
{
    echo '<html>';
    echo '<head>';
    echo '<title>error</title>';
    echo '<meta http-equiv="content-type" content="text/html; charset=utf-8">';
    echo '</head>';
    echo '<body>';
    echo '<script type="text/javascript">alert("'.$msg.'");history.back();</script>';
    echo '</body>';
    echo '</html>';
    exit;
}
?>
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    kindEditor+图片批量上传

    "KindEditor图片批量上传工具"是一款专为网页设计者和内容创作者打造的高效图片上传解决方案。这款工具允许用户在Web界面一次性上传多张图片，极大地提升了工作效率，特别是对于那些需要频繁处理文字和图像，比如...

    kindeditor图片上传携带token字段

    本文将详细讲解如何在KindEditor中实现图片上传时携带token字段，以确保数据的安全性和完整性。 首先，理解“token”在Web开发中的作用至关重要。Token通常用于验证客户端请求的合法性，防止跨站请求伪造（Cross-...

    kindeditor上传图片自动压缩过大的图片

    首先，我们需要了解KindEditor的图片上传流程。当用户在编辑器中选择图片并提交上传时，KindEditor会调用预设的上传处理程序，通常是通过一个服务器端脚本，如`upload_json.ashx`。这个脚本负责接收图片数据，验证，...

    KindEditor-4.1.9批量上传图片完整示例（可以上传到image目录下的子目录中，可返回上一级目录，并实现了按名称、大小、类型排序的功能）

    这是本人写的一个基于KindEditor-4.1.9的Java项目，采用Struts2框架，实现了KindEditor单张图片上传、批量图片上传，可以上传到image目录下的子目录中，可返回上一级目录，并实现了按名称、大小、类型排序的功能。...

    kindeditor上传视频、图片功能实现

    1. **KindEditor的图片上传功能**： KindEditor内建了图片上传的功能，用户可以通过点击编辑器内的“图片”按钮打开图片上传对话框。这个功能通常通过Ajax异步方式与服务器进行交互，将图片文件上传到指定的服务器...

    vue 使用kindeditor粘贴复制图片上传给自己服务器，单独图片上传

    vue 使用kindeditor粘贴复制图片上传给自己服务器，单独图片上传,避免用户到处寻找，解决了用户粘贴复制截图时候，图片变成base64,上传给后台的时候长度过于长，所以在粘贴的时候就上传给服务器，最后以形式显示在富...

    优化kindeditor，修改flash批量上传图片方式为H5上传

    对于上传本地视频，处理方式类似图片上传，只不过需要考虑视频文件的格式和大小限制。 “添加手机尺寸预览”意味着在编辑器中，用户可以看到内容在不同移动设备屏幕尺寸下的效果。这可能通过CSS媒体查询实现，根据...

    kindeditor多图上传H5版

    在H5版的KindEditor中，图片上传功能将基于HTML5的File API和FormData对象来实现，这使得用户无需Flash插件也能进行文件上传。 3. **File API**：这是HTML5引入的一套接口，允许JavaScript操作本地文件，包括读取、...

    kindeditor编辑器，可上传多图片，文件上传等功能

    KindEditor是一款开源的Web富文本编辑器，专为网页设计和开发者提供便利。它支持多图片上传、文件上传等丰富的功能，广泛应用于个人项目和公司项目。在ASP.NET环境中，KindEditor能很好地集成到Web应用中，提供一个...

    KindEditor图片上传相关问题

    本文将深入探讨与KindEditor图片上传相关的问题，并结合提供的`UploadService.java`文件，解析图片上传服务的实现细节。 首先，我们需要了解KindEditor的图片上传流程。当用户在编辑器中选择插入图片时，KindEditor...

    kindeditor上传图片Demo

    这个"kindeditor上传图片Demo"是一个示例项目，旨在演示如何在KindEditor中集成图片上传功能。在开发过程中，开发者可能会遇到各种问题，比如权限设置、服务器端处理、前端交互等。在这个Demo中，作者可能已经解决了...

    kindEditor4.1版修改上传图片宽高(图片自适应)

    ### kindEditor4.1 版本中实现图片自适应的方法 #### 一、问题背景与需求分析 在使用kindEditor4.1版本时，我们可能会遇到一个常见的问题：上传的图片无法很好地适配不同大小的屏幕，导致在某些设备上出现拉伸或...

    kindeditor添加图片压缩功能(Asp.net版)

    KindEditor是一款开源的在线富文本编辑器，常...总的来说，通过这个项目，你可以了解到如何在Asp.net环境中结合KindEditor实现图片上传和压缩的完整流程，这对于开发任何涉及用户上传图片的Web应用都是十分有价值的。

    jquery + kindEditor 单个图片上传

    为了实现图片上传功能，需要配置KindEditor的相关选项，并利用jQuery处理表单提交过程中的数据交互。 1. **启用图片上传**： - 在创建编辑器实例时设置`allowImageUpload`选项为`true`。 - 指定图片上传接口的URL...

    KindEditor 4.1.11 完整图片上传 表单提交Demo

    KindEditor 4.1.11 是一个流行的开源富文本编辑器，专为网页内容编辑设计，支持多种功能，如图片上传、URL回显、图片预览等。在这个"完整图片上传 表单提交Demo"中，我们主要关注的是如何在Java环境下，特别是在...

    kindEditor批量传图配置

    其中，`uploadJson`参数非常重要，它指定了图片上传的服务器端处理脚本地址。这里需要注意的是，实际开发中需要将`'{url:/block/upload_img_from_editor}'`替换为实际的服务器端处理脚本地址。 3. **解决常见问题*...

    kindeditor富文本，多图上传，去除flash插件，解决无法展示选择图片按钮问题，以及添加上传后结果展示

    KindEditor提供了一套回调机制，可以在图片上传成功后执行自定义函数。在这个函数中，你可以解析服务器返回的数据，创建代表每个图片的HTML元素，并将其插入到编辑器的适当位置。服务器返回的数据通常包括图片的URL...

    优化kindeditor，修改flash批量上传图片方式为H5上传，添加第三方视频代码功能，添加手机尺寸预览，粘

    随着Flash技术的逐渐淘汰，将KindEditor中原有的基于Flash的图片批量上传方式替换为H5（HTML5）上传，这是一个必要的优化步骤。HTML5引入了File API，使得在浏览器中处理文件变得更加便捷和安全。通过使用`...

    kindeditor-4.1.11多图上传按钮无法出现且无法点击flash无法上传

    首先，我们需要理解KindEditor的上传机制。它使用Flash作为上传插件，因为Flash在过去的浏览器中具有较好的跨平台兼容性。然而，随着HTML5技术的发展，现代浏览器逐渐淘汰了Flash，转向了更安全、更高效的HTML5 API...

Magicbox
Global site tag (gtag.js) - Google Analytics