老杂毛博客
  青青子衿,悠悠我心。但为君故,沉吟至今。
博客首页 | 人生历程 | 编程开发 | 机关门  
  文章分类
 
博客首页 > 软件网络编程 > 文章正文

【网页编辑器开发】html在线网页编辑器开发第七讲,图片插入,上传图片插入

2011/3/14 17:00:53
 

前 言

         上传图片的功能并不属于编辑器开发的范畴,但是做编辑器开发我们还是有必要把这个功能拿出来简单的说一下,asp的上传功能很简单了,只需去网上下载一个组件调用就可以了,在asp.net中我们只需要调用一个系统的控件也可以轻易的完成上传功能,为此我还专门写过一个独立的多文件上传功能,如果还不会上传功能的朋友请看这篇文章“动态生成控件,多文件上传”也可以去网上找找其它的文章,总之在看这篇文章的时候你应该对文件的上传有一定的了解,并且手里有现成的代码。

上传原理

         在编辑器上放置一个按钮,当用户点击时弹出一个新窗口,在新窗口上传文件,然后得到文件路径返还给主窗口,经过相关拼装之后输出到编辑器里,这样图片就上传完了。

showModalDialog对话框

         很多高级一点的编辑器都是用div弹出窗来做的,我们在初学的时候没必要搞的那么华丽主要以实现功能为主所以就用一个简单的弹出窗来实现这个功能,之所以用showModalDialog这个弹出框,是因为我们需要用到里面的一个功能,returnValue用这个属性值来获得上传之后的图片路径。

编辑器上传图片功能具体实现

我们的编辑器又增加了一个新按钮,上传图片功能。按钮代码如下:

#lt;input type="button" name="Pic" value="UploadPic" onClick="pic()" /#gt;

用这个按钮触发了pic这个函数,pic函数代码如下:

//上传图片函数
function pic()
{
 message.focus();
 var range =message.document.selection.createRange();
 var arr = showModalDialog("pic.html", "", "dialogWidth:22em; dialogHeight:8em; status:0;help:0");
 if (arr != null)
 {var str1;str1="#lt;P#gt;#lt;img src=''"+arr+"''#gt;#lt;/P#gt;#lt;br#gt;";range.pasteHTML(str1);}
 else {message.focus();}
}

在这个函数中,我们定义的arr变量是把从showMoadalDialog这个函数返回的值拿来拼装成了一个img标记,然后输出到了页面上,那么我们关键就看showModalDialog这个函数所完成的功能就可以了。

showModalDialog是一个弹出窗口,pic.html是这个窗口所加载的文件名,pic.html代码如下:

#lt;script language="jscript"#gt;
function moni()
{
    document.form1.imgurl.value="1.jpg";
}
function insertImg()
{
 window.returnValue = document.form1.imgurl.value;
 window.close();
}
#lt;/script#gt;

#lt;style type="text/css"#gt;
#lt;!--
body,td,th {
 font-size: 12px;
}
--#gt;
#lt;/style#gt;
#lt;form name="form1" method="post" action=""#gt;
  #lt;table width="350" border="1"#gt;
    #lt;tr#gt;
      #lt;td height="35"#gt;图片上传:#lt;/td#gt;
      #lt;td#gt;#lt;input type="file" name="file1" size="15"#gt;#lt;input name="button" type="button" value="模拟上传" onClick="moni()" #gt;#lt;/td#gt;
    #lt;/tr#gt;
    #lt;tr#gt;
      #lt;td height="35"#gt;图片地址:#lt;/td#gt;
      #lt;td#gt;#lt;input type="text" id="imgurl" name="imgurl"#gt;#lt;/td#gt;
    #lt;/tr#gt;
    #lt;tr#gt;
      #lt;td height="35"#gt; #lt;/td#gt;
      #lt;td#gt;#lt;input name="button" type="button" title=点击“插入”按钮,在编辑器中插入该图片 value="插 入" onClick="insertImg()"#gt;#lt;/td#gt;
    #lt;/tr#gt;
  #lt;/table#gt;
#lt;/form#gt;

在这里没有任何动态代码,我只是用js模拟了一个插入过程,因为在前言中我们说过具体的上传代码需要根据不同的语言自己编写的,不属于我们编辑器开发范畴之内,我们这一讲的目的就是把上传之后的图片放到编辑器里,那么我们在上传之后得到图片路径的时候就可以想办法输出到页面的输入框中,如我用asp.net代码来举例子:

this.TxtImgurl.Text="图片路径";

而在asp中则可以在用户点击上传按钮得到文件路径之后直接输出输入框,如:

Response.write("#lt;input type=""text"" id=""imgurl"" name=""imgurl"" value=""图片地址"" /#gt;")

这样我们页面上输入框里就可以显示刚刚上传的图片地址了,如图:

我这里是利用了moni这个函数写死的一个图片路径然后赋值给了imgurl这个文本框,所以上面的代码需要大家拿下去之后加以简单的修改,加上一部分自己的上传代码才可以用。

我们来看一下效果:


点击插入按钮之后,将会执行insertImg()这个函数,将图片路径赋值给returnValue,以便在上一级页面中的pic函数中能得到这个变量值,点击插入后:

因为插入图片函数同时也执行了window.close(); 所以弹出窗口随之也关闭掉了,这样我们的图片就顺利的插入了。

同样我们也可以利用这个原理做一个更多表情插入的功能,将所有的表情都放到一个新页面里,点击弹出,然后点击表情插入到编辑器中,原理都是一样的,我就不单独写文章详细介绍了,只要是弹出窗口的其原理都和这个差不多。

注意:表情如何和编辑器同在一个页面的时候会出现光标闪动过快的问题,我在第六讲的时候已经提到过了,这里重申一遍,以免朋友们直接搜索到这篇文章,关于页面光标闪动过快的解决办法请看这篇文章:

网页文本框中光标闪动过快的解决办法

好了,今天这一讲就讲这么多,如果你在上传图片的过程中还遇到什么问题,请给我留言。

本文系博主老杂毛原创,版权没有,转载不究。

阅读: (2814)  评论(16)  
 
网友评论:
 
 1.全来主机_韩枫2011/3/14 21:32:16 
哟,竟然是沙发。
 2.124.200.53.1582011/3/14 22:50:22 
8错8错,好文章,学习。
 3.116.226.53.2152011/3/15 11:04:57 
好像缺点上传代码
 4.lai2011/5/10 13:54:29 
谢谢你
 5.202.43.158.342011/6/2 12:50:00 
haoahaoa
 6.xiaomi2012/4/29 13:39:38 
bucuo
 7.2016/8/11 13:33:29 
 8.2016/8/22 20:07:00 
 9.2016/11/2 7:29:38 
 10.2016/12/12 7:32:34 
 11.2018/1/24 1:12:36 
 12.2018/1/24 1:12:43 
 13.2018/2/8 1:40:15 
 14.2018/2/26 0:05:01 
 15.2018/3/14 17:50:28 
 16.2018/3/31 9:07:32 
 
相关文章:
 微信支付asp.net V3.3.7 sys
 ERRORLOG 文件太大的处理办法
 Attempted to read or w
 Ctrl键自动按下,Ctrl键和Alt总感觉
 解决 Your project contai
 adb install 多设备id号一样,如
 如何去掉优酷,土豆等网站的广告?
 webview的loadData方法加载乱码
 让iis7支持apk文件下载
 sql利用游标循环,遍历表循环结果集
 
 
     
联系作者: QQ: 657603425 Email: [email protected]
Copyright © 2007-2014 www.laozamao.com All Rights Reserved
京ICP备09002242号 北京海淀分局备案号:1101084842