增加附件上传功能

主题: 增加附件上传功能

作者: larkim, 发布日期: 2009-04-06 10:58:18, 浏览数: 24542

1.在KE.lang中加入accessory : '插入附件',

2.加入对附件格式的限制说明invalidAccessory : "请输入有效的URL地址。\n只允许doc,xls,pdf,txt,ppt,rar,zip格式。",

3.在defaultItems中加入'accessory',

4.增加附件的plugin

KE.plugin['accessory'] = {
    click : function(id) {
        KE.util.selection(id);
        var dialog = new KE.dialog({
            id : id,
            cmd : 'accessory',
            width : 310,
            height : 90,
            title : KE.lang['accessory'],
            yesButton : KE.lang['yes'],
            noButton : KE.lang['no']
        });
        dialog.show();
    },
    check : function(id) {
        var dialogDoc = KE.util.getIframeDoc(KE.g[id].dialog);
        var type = KE.$('type', dialogDoc).value;
        var url = '';
        if (type == 1) {
            url = KE.$('imgFile', dialogDoc).value;
        } else {
            url = KE.$('url', dialogDoc).value;
        }

        if (url.match(/\.(doc|xls|ppt|pdf|txt|rar|zip)$/i) == null) {
            alert(KE.lang['invalidAccessory']);
            window.focus();
            KE.g[id].yesButton.focus();
            return false;
        }
        return true;
    },
    exec : function(id) {
        KE.util.select(id);
        var dialogDoc = KE.util.getIframeDoc(KE.g[id].dialog);
        var type = KE.$('type', dialogDoc).value;
        if (!this.check(id)) return false;
        if (type == 1) {
            KE.$('editorId', dialogDoc).value = id;
            dialogDoc.uploadForm.submit();
            return false;
        } else {
            var url = KE.$('url', dialogDoc).value;
            var title = KE.$('imgTitle', dialogDoc).value;

            this.insert(id, url, title, ext);
        }
    },
    insert : function(id, url, title, ext) {
  var img
  switch (ext)
  {
  case "doc":
   img="./../images/ico/doc.gif";
  break;
  case "xls":
   img="./../images/ico/execl.gif";
  break;
  case "ppt":
   img="./../images/ico/ppt.gif";
  break;
  case "rar":
   img="./../images/ico/rar.gif";
  break;
  case "zip":
   img="./../images/ico/zip.gif";
  break;
  case "txt":
   img="./../images/ico/txt.gif";
  break;
  case "pdf":
   img="./../images/ico/pdf.gif";
  break;
  default:
   img="./../images/ico/attach.gif";
  }
  var html = '<img src="' + img + '" > ';
        html += '<a href="' + url + '" >';
        if (title) html += title;
        html += '</a>';
  alert(html)
        KE.util.insertHtml(id, html);
        KE.layout.hide(id);
        KE.util.focus(id);
    }
};

5.在plugins文件夹中增加上传附件的文件，文件内容如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Accessory</title>
<style type="text/css" rel="stylesheet">
    body {
    font-size:12px;
    margin: 0px;
    background-color:#F0F0EE;
    overflow: hidden;
    }
    td.left1 {
    font-size:12px;
    width: 50px;
    padding: 2px;
    }
    td.right1 {
    font-size:12px;
    padding: 2px;
    }
    td.left2 {
    font-size:12px;
    width: 35px;
    padding: 2px;
    }
    td.right2 {
    font-size:12px;
    padding: 2px;
    width: 50px;
    }
</style>
<script type="text/javascript">
    function changeType(obj) {
        if (obj.value == 1) {
            document.getElementById('url').style.display = 'none';
            document.getElementById('imgFile').style.display = 'block';
        } else {
            document.getElementById('url').style.display = 'block';
            document.getElementById('imgFile').style.display = 'none';
        }
    }
</script>
</head>
<body>
<form name="uploadForm" method="post" enctype="multipart/form-data" action="../php/uploadaccessory.php">
    <input type="hidden" id="editorId" name="id" value="" />
    <table border="0" cellpadding="0" cellspacing="0">
      <tr>
        <td class="left1">
          <select id="type" name="type" />             <option value="1" selected="selected">本地</option>
            <option value="2">远程</option>
          </select>
        </td>
        <td class="right1">
          <input type="file" id="imgFile" name="imgFile" style="width:220px;" />
          <input type="text" id="url" name="url" value="http://" maxlength="255" style="width:220px;display:none;" />
        </td>
      </tr>
      <tr>
        <td class="left1">说明:</td>
        <td class="right1">
          <input type="text" id="imgTitle" name="imgTitle" value="" maxlength="100" style="width:220px;" />
        </td>
      </tr>
    </table>
</form>
</body>
</html>

7.修改skins目录里的default.gif，增加附件图标,我是加在最后面

8.修改skins目录里的default.css,加入

.ke-icon-accessory {
    background-position: 0px -736px;
    width: 16px;
    height: 16px;
}

9.OK

增加附件功能后的编辑器

测试效果如下：

作者: aiml, 发布日期: 2009-04-20 14:29:30

大哥，写的不完整，你的第6条跑那里去了？呵呵加上吧谢谢！～

uploadaccessory.php文件跑那里去了》？

作者: larkim, 发布日期: 2009-04-28 22:06:59

6.增加uploadaccessory.php,内容如下:

<?php

//文件保存目录路径
$save_path = './../upload/';
//文件保存目录URL
$save_url = './../upload/';
//定义允许上传的文件扩展名
$ext_arr = array('doc', 'xls', 'ppt', 'pdf', 'txt', 'rar' , 'zip');
//最大文件大小
$max_size = 1000000;
//更改目录权限
@mkdir($save_path, 0777);

srand((double)microtime()*1000000);
$randval = rand();
$randval=time().$randval;
$img_id=$randval;

//有上传文件时
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;
$file_path = $save_path . $img_id .".". $file_ext;
    if (move_uploaded_file($tmp_name, $file_path) === false) {
        alert("上传文件失败。");
    }
    //$file_url = $save_url . $file_name;
$file_url = $save_url . $img_id .".". $file_ext;
    //插入图片，关闭层
    echo '<html>';
    echo '<head>';
    echo '<title>Insert Accessory</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["accessory"].insert("' . $_POST['id'] . '", "' . $file_url . '","' . $_POST['imgTitle'] . '","' . $file_ext . '");</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;
}
?>

作者: 涛声依旧, 发布日期: 2009-05-18 18:17:40

非常不错，已经在使用中了。谢谢作者分享！

作者: iixin, 发布日期: 2009-10-13 10:46:59

改了一下，插入附件没问题，提交时提示“令牌错误”，还得研究我的后台怎么回事。

作者: huangyun, 发布日期: 2010-08-14 17:27:11

请问大哥，如果是ASP的怎么处理呢?

作者: goad, 发布日期: 2010-08-31 13:57:42

思路就这样子了，请跟据自己的程序来合理使用上传撒，呵呵，asp的一样的可以实现

作者: 断鸿零雁, 发布日期: 2011-01-03 11:35:03

第六条怎么改成JSP的啊，就差这点了

作者: 断鸿零雁, 发布日期: 2011-01-03 16:50:47

我修改了一个JSP版本的KindEditor，能够上传附件，但是却报错，在编辑框中不显示上传的附件

作者: sky_xl, 发布日期: 2011-02-19 15:24:22

求JSP版本的附件上传,有的麻烦发我一份 443177847@qq.com ，谢谢了。

作者: 凡星追梦, 发布日期: 2011-03-21 15:24:39

我把它改成JSP的也不行哦，文件可以上传但是不能把附件插入到编辑器中哦，有没谁修改成功过的呢，分享下经验，谢谢

作者: 人在江湖飘, 发布日期: 2011-04-13 00:43:07

有做的，php完全版？

我看着修改一下弄成jsp版本的。

发到381309501@qq.com

作者: 牛儿吃草, 发布日期: 2011-05-03 11:50:21

支持一下！今天按照说明搞成了！

论坛 Forum