在一个项目里使用到了FCKEditor.它的文件上传管理系统做得还是很不错的.我们能不能借用一下呢?

第一步,当然是得搞清楚这个页面的url了.

在FireFox里打开FCKEditor的插入图片对话框,点击"浏览服务器",在弹出的新对话框里右击,选"页面信息",于是看到了此页面的url: /FCKeditor/editor/filemanager/browser/default/browser.html?Type=Image&Connector=connectors/aspx/connector.aspx .

第二步,搞清楚这个对话框与主页面的交互方式(比如如何把选择的图片地址传回到原页面).

我们在对话框里右击,"查看源代码",结果却是一些<frameset><frame>代码.追踪下去,我们会发现它使用用了嵌套的Frame,结构非常复杂.我们还是用最简单的方法吧:选中文件列表中的内容,右击,"查看选中部分源代码":

<tr>
  <td width="16">
    <a href="#" οnclick="OpenFile('/files/Image/parts/google2sogo.JPG');return false;">
      <img alt="" src="data:images/icons/jpg.gif" border="0" height="16" width="16">
    </a>
  </td>
  <td>
    &nbsp;<a href="#" οnclick="OpenFile('/files/Image/parts/google2sogo.JPG');return false;">google2sogo.JPG</a>
  </td>
  <td align="right" nowrap="nowrap">&nbsp;16 KB</td>
</tr>

很明显了,点选文件时会调用OpenFile这个函数.那么它是在哪里定义的,具体内容是什么呢?

使用UltraEdit,在FCKEditor文件夹内搜索包含OpenFile的*.html,*.js,结果是:

E:\work\websites\FCKeditor\editor\filemanager\browser\default\frmresourceslist.html(77): function OpenFile( fileUrl )

好了,找到了这个OpenFile的定义了:

function OpenFile( fileUrl )
{
    window.top.opener.SetUrl( fileUrl ) ;
    window.top.close() ;
    window.top.opener.focus() ;
}

很显然,它的主要作用就是调用打开这个窗口的页面的SetUrl()函数,把选中的文件链接传递过去.这样,我们的页面上只需要定义一个SetUrl()函数就可以接收这个选中的文件地址了,下面是一个简单的示例:

aspx:

<script type="text/javascript">
    function SetUrl(url)
    {
       var labels=document.getElementsByTagName('input');
       for(var i=0; i<labels.length; i++)
       {
            if(labels[i].className=="picture-url-save-position")
            {
                labels[i].value=url;
                break;
            }
       }
    }
    function OpenImageBrowser()
    {
        window.open('/FCKeditor/editor/filemanager/browser/default/browser.html?Type=Image&Connector=connectors/aspx/connector.aspx','Browse/Upload Images','toolbar=no,status=no,resizable=yes,dependent=yes,scrollbars=yes,width=600,height=400')
    }
</script>

<asp:GridView runat="server" ...>
    ...
    <asp:TemplateField HeaderText="图片">
      <EditItemTemplate>
        <asp:TextBox ID="textbox1" CssClass="picture-url-save-position" runat="server" Text='<%# Bind("picture") %>'></asp:TextBox>
      <input type="button" value="选择/上传" οnclick="OpenImageBrowser();" />
      </EditItemTemplate>
      <ItemTemplate>
        <img src="<%#Eval("picture") %>" alt="无图片" />
      </ItemTemplate>
    </asp:TemplateField>
</asp:GridView>

运行时效果:

转载于:https://www.cnblogs.com/deerchao/archive/2007/07/10/812669.html

借用 FCKEditor 的文件上传/管理界面相关推荐

  1. oracle apex接口文件,Oracle Apex 实用笔记系列 2 - 文件上传管理

    1. 页面设计 页面A有若干region, 其中一个region用于文件列表管理(包括显示,下载,删除),如图A.在页面A有一button,点击它会调用页面B,页面B负责文件上传,如图B. 图A 图B ...

  2. PHP文件上传和文件操作案例

    <?php /**文件配置变量$dirname是目录名称*/ session_start(); $dirname = 'upload'; $fileClass = new fileClass($ ...

  3. themyleaf 图片上传_javaEE --springboot #实现图片上传和回显 #单文件上传 #多文件上传 #ajax异步文件上传 (非常详细,从创建项目开始)...

    实现文件上传和回显 1.新建一个SpringBoot项目,选择 Spring Web 和 thymeleaf 依赖 .pow.xml文件下的依赖如下 2.根据下图,创建如下文件 3.直接上代码 配置文 ...

  4. 用fileupload处理文件上传

    用fileupload处理文件上传 作者:◇ 刘冬 发文时间:2003.07.09 15:52:43 Commons是Apache开放源代码组织中的一个Java子项目,该项目主要涉及一些开发中常用的模 ...

  5. web渗透之文件上传漏洞

    目录 一.原理 二.利用方式 三.文件上传的风险处 四.文件上传漏洞的危害 五.文件上传漏洞常见的绕过方式 1.前端绕过检测 2.mime类型检测绕过 3.黑名单绕过 (1).相似扩展名 (2).ap ...

  6. asp.net 文件上传和下载管理源码

    利用asp.net进行文件上传和下载时非常常用的功能,现做整理,将源码上传,提供给初学者参考,以下代码中的样式文件就不上传了,下载者请将样式去掉. 效果图如下: <%@ Page Languag ...

  7. SpringBoot实现文件上传到七牛云

    在做项目的过程中需要存储图片,所以选择将图片存储到七牛云上面,并将存储路径返回存储到数据库里.在网上看了很多篇文章,参考了一篇文章,结合自己的功能需求跑了一遍,记录下整个完成的过程. 目录 一.引入七 ...

  8. vue自定义组件-文件上传后端接口

    学习目标: vue自定义组件-文件上传后端接口 学习内容: 准备工作: 后端环境:JAVA-Springboot项目数据库表(这里使用psql数据库):sys_file_record保存上传文件的信息 ...

  9. ubuntu 搭建一个没有上传限制,支持多用户访问,管理用户下载上传,界面优雅,文件互通的网盘(支持nas)

    一个没有上传限制,支持多用户访问,管理用户下载上传,界面优雅,文件互通的网盘! (Alist + Samba) 运行环境 ubuntu 20.04 Alist `Alist` 官网  https:// ...

最新文章

  1. python三维图-python 三维坐标图
  2. 【C++11新特性】 C++11智能指针之shared_ptr
  3. GridView调用setAdapter()函数时发生错误
  4. 深入理解java虚拟机JVM(上)
  5. AutoIT: ControlCommand是一个非常重要的指令
  6. SQL Server 审计操作概念
  7. 2018上半年掘金微信群日报优质文章合集:前端篇
  8. QCC3020/QCC3040 TWS耳机按键切换EQ,APP切换EQ功能实现
  9. 朴素贝叶斯,凉鞋问题
  10. vue调用手机扫描二维码
  11. 【计算机组成原理】码距怎么计算
  12. //苏嵌//张朋//2018.07.11
  13. 部分蓝牙耳机 电脑 连接 不畅 的处理办法
  14. 请说说自己对鲁迅本人他作品的了解计算机,26 回忆鲁迅先生课堂实录及点评
  15. python 股票交易接口 github_GitHub - Higgsbit/vnpy: 基于python的开源交易平台开发框架...
  16. 【洛谷】P1456 Monkey King
  17. 腾讯云从业者题库整理
  18. Eclipse+Java+Swing+Mysql实现医院挂号系统
  19. jquery 获取tr中的td,td中的input
  20. 病毒组学数据分析 -03 DRAM-V 病毒序列识别(剔除假阳性)

热门文章

  1. ceph搭建_如何一键搭建并管理Filecoin集群节点 | Gamma OS新功能上线
  2. 交换机 链路层无法udp通讯_一文读懂计算机底层网络原理,包括TCP、UDP、header,什么是包、帧、段等关键问题...
  3. C语言排序方法------快速排序
  4. Java中JTextField.getText() 和 JPassword.getPassword() 的区别
  5. NYOJ-单调递增最长子序列(dp)
  6. 图像算法七:【形态学图像处理】二值运算、膨胀、腐蚀
  7. mybatis-generator-maven-plugin插件自动生成代码的配置方法
  8. simplejson.scanner.JSONDecodeError: Extra data: line 1 column 22089 - line 1 column 22090
  9. Processing编程学习指南1.5 颜色透明度
  10. jsp if else c标签 总结