FCKeditor的确是个错的编辑器,从ASP.NET 1.1就开始在用。

之前没做过图片上传,最近要做个产品发布的小东西,使用ASP.NET2.0的文件上传组件老是出问题。考虑到FCKeditor中的图片上传功能不错,而且有浏览服务器文件的功能,所以就直接拿来用了。下面实现了不修改FCKeditor本身的任何代码,对FCKeditor的文件浏览器加以利用。

首先,放一个TextBox和Button。TextBox当然是放图片文件路径的,Button按钮用于浏览服务器:

<asp:TextBox ID="txt_PicUrl_Insert" runat="server" MaxLength="100" Width="280px"></asp:TextBox>
<input id="btn_OpenFileBrowser_Insert" οnclick="openFileBrowser('/FCKeditor/editor/filemanager/browser/default/browser.html?Type=Image&Connector=connectors/aspx/connector.aspx',800,600);" type="button" value="浏览服务器" />

在点击Button的时候执行打开FCKeditor图片浏览器窗口的一个javascript方法:openFileBrowser()。
该方法代码:
function openFileBrowser(url, width, height )
{
 var iLeft = ( window.ScreenWidth  - width ) / 2 ;
 var iTop  = ( window.ScreenHeiht - height ) / 2 ;

var sOptions = "toolbar=no,status=no,resizable=yes,dependent=yes" ;
 sOptions += ",width=" + width ;
 sOptions += ",height=" + height ;
 sOptions += ",left=" + iLeft ;
 sOptions += ",top=" + iTop ;

var oWindow = window.open( url, '服务器文件浏览', sOptions  ) ;
}
另/FCKeditor/editor/filemanager/browser/default/browser.html为图片浏览器的路径,Type=Image&Connector=connectors/aspx/connector.aspx为FCKeditor必需的参数。

然后,在浏览服务器的过程中,选择了需要的文件,需要把值赋给TextBox(txt_PicUrl_Insert),
这里又需要写一个javascript 方法SetUrl( ),注意该方法必须是下面的参数格式,并且方法名不能改成其他的:
function SetUrl( url, width, height, alt )
{

if(document.getElementById('txt_PicUrl_Insert')!=null)
  {
  document.getElementById('txt_PicUrl_Insert').value = url ;
  }
  else
 {
     alert("对象赋值失败:对象不存在!");
 }
//注意该方法不仅传如了文件的URL地址,还传入了另外三个参数,width,height,alt,如果需要的话可以加以利用。这里虽然没使用,但也不能删除掉。
}

转载于:https://www.cnblogs.com/liping19851014/archive/2007/07/25/831333.html

使用FCKeditor2.2图片上传的小技巧相关推荐

  1. php 点击选择图片上传,微信小程序图片选择、上传到服务器、预览(PHP)实现实例...

    微信小程序图片选择.上传到服务器.预览(PHP)实现实例 小程序实现选择图片.预览图片.上传到开发者服务器上 后台使用的tp3.2 图片上传 请求时候的header参考时可以去掉(个人后台验证权限使用 ...

  2. SecureCRT的上传下载小技巧(Linux)

    1.查看SecureCRT的配置位置: "选项"--"会话选项"--"X/Y/Zmodem" 选择好上传的目录以及下载的目录 2.常用命令使 ...

  3. Fckeditor2.6图片上传,JS没有权限_se7en3_新浪博客

    上传图片的时候一直报错IE:Js没有权限. 出错的是window.parent.OnUploadCompleted( Chrome说跨域,Url分明是一个域. 找到源码 http://sourcefo ...

  4. JPG图片上传在IE下的问题

    前一段时间做了一个图片上传的小程序,今天有人说jpg图片上传不了.我在本地Chrome.Firefox测了下,发现没有问题,上传正常.我问他用什么浏览器,原来是世界之窗.还有360......我囧.我 ...

  5. 微信支付:小微商户申请入驻第二步:图片上传

    回顾 第一步:平台序列号获取 开始图片上传 微信官方图片上传文档 阅读文档可知 请求的url: api.mch.weixin.qq.com/secapi/mch/- 提交方式: multipart/f ...

  6. 图片上传成功但是图片显示不出来_小程序上传图片到腾讯云

    这是小程序开发第二篇,主要介绍如何上传图片到腾讯云,之所以选择腾讯云,是因为腾讯云免费空间大 准备工作 上传图片主要是将图片上传到腾讯云对象存储(COS). 要使用对象存储 API,需要先执行以下步骤 ...

  7. 微信小程序图片上传(文字识别)

    要点:OCR文字识别 图片上传 在最近的项目中遇到需要进行OCR识别,中间遇到的坑记录一下 OCR接口:采用百度OCR通用文字识别 在进行调试过程中遇到下列问题: 百度ocr接口1.对图片经行base ...

  8. php微信小程序多图上传,tp5实现微信小程序多图片上传到服务器功能

    最近在做一个教育类的小商城的微信小程序,用到了上传多个图片文件到服务器端,这里做一个讲解,希望对大家有所帮助. 1,小程序端: 在wxml文件中: 删除 点击上传作业 在js文件中: Page({ / ...

  9. java 微信图片上传_微信小程序图片上传java端以及前端实现

    小程序的图片上传与传统的图片上传方式有一些不一样 如果你有幸看到这篇文章,恭喜你,你可以完美解决了. 话不多说,前后端代码一并奉上: (基于springmvc ) @Controller @Reque ...

最新文章

  1. 【OpenCV学习笔记4】OpenCV GUI 之VCWin32+OpenCV 实现细胞计数
  2. eclipse中hadoop2.3.0环境部署及在eclipse中直接提交mapreduce任务
  3. LCAOSCF自洽场氟化氢HF斯莱特函数
  4. 电影点评系统论文java_毕业设计(论文)-基于web的电影点评系统分析与设计.docx...
  5. Redis的入门(一)常用命令
  6. WPF Application 类介绍以及怎样修改启动方式
  7. AutoFac自动注入时报错
  8. 如何在VMware Player中设置和安装Windows Home Server“ Vail”
  9. Git版本控制使用方法入门教程?
  10. 【英语学习】【English L06】U06 Banking L5 I'd like to change Chinese *yuan* into pounds
  11. zookeeper能做什么?
  12. Update与JOIN使用
  13. 2018.12月问题整理杂记
  14. Pikachu靶机系列之目录遍历、任意文件下载、敏感信息泄露、越权
  15. Linux下tar压缩解压命令详解
  16. 实现图片的裁切缩放添加水印等
  17. 如何用cocos2d-x来开发简单的Uphone游戏:(一) 下载安装和HelloWorld
  18. 关于华为和荣耀手机升级鸿蒙系统之后无法连接magicbook多屏协同的问题
  19. linux企业实战-haproxy(2)动静分离
  20. 新技术加速隐私暴露,我们该怎么办?(二)

热门文章

  1. 如何判断web应用是否添加到主屏幕
  2. Linux基本命令 帮助命令
  3. 什么是语义化的HTML?有何意义?为什么要做到语义化?
  4. eclipse-4.4.2安装Groovy插件(其他版本eclipse可参考)
  5. JavaScript螺纹的问题和答案
  6. java来做Web Service,用哪个框架最好?
  7. 编译安装postfix+sasl+mysql+dovecot+extmail构建完成的邮件系统(一)
  8. C# DEV 树、Grid、下拉框等设定数据源对比
  9. C# 中的 gdi 而不是 gdi+
  10. 混IT,靠的是能力,不是技能