<!DOCTYPE html>

 <html>

 <head>

     <title></title>

     <script src="/scripts/jquery-1.8.3.min.js"></script>

     <script src="/ueditor/ueditor.config.js" type="text/javascript"></script>

     <script src="/ueditor/ueditor.all.min.js" type="text/javascript"></script>

     <!-- 当然还要引入jquery  -->

     <script type="text/javascript">

         var editor;

         var _editor;

         $(function () {

             //重新实例化一个编辑器，防止在上面的editor编辑器中显示上传的图片或者文件

             _editor = UE.getEditor('upload_ue');

             _editor.ready(function () {

                 //设置编辑器不可用

                 _editor.setDisabled();

                 //隐藏编辑器，因为不会用到这个编辑器实例，所以要隐藏

                 _editor.hide();

                 //侦听图片上传

                 _editor.addListener('beforeInsertImage', function (t, arg) {

                     //将地址赋值给相应的input,只去第一张图片的路径

                     $("#picture").attr("value", arg[0].src);

                     //图片预览

                     $("#preview").attr("src", arg[0].src);

                 })

                 //侦听文件上传，取上传文件列表中第一个上传的文件的路径

                 _editor.addListener('afterUpfile', function (t, arg) {

                     $("#file").attr("value", _editor.options.filePath + arg[0].url);

                 })

             });

         });

         //弹出图片上传的对话框

         function upImage() {

             var myImage = _editor.getDialog("insertimage");

             myImage.open();

         }

         //弹出文件上传的对话框

         function upFiles() {

             var myFiles = _editor.getDialog("attachment");

             myFiles.open();

         }

     </script>

 </head>

 <body>

     <script type="text/plain" id="myEditor">

     </script>

     <script type="text/plain" id="upload_ue">

     </script>

     调用的页面：<br /><br />

     <input type="text" id="picture" name="cover" /><a href="javascript:void(0);" onclick="upImage();">上传图片</a><br /><br />

     <input type="text" id="file" /><a href="javascript:void(0);" onclick="upFiles();">上传文件</a><br /><br />

 </body>

 </html>

单独调用Ueditor的图片上传功能的更多相关文章

  1. 在SAE上使用Ueditor的图片上传功能

    SAE上是没有文件夹读写权限的,所以要在SAE使用Ueditor的图片上传功能须要借助SAE的Storage服务. 一.开通Storage服务 在SAE控制台开通Storage服务,并新增一个doma ...

  2. springboot整合ueditor实现图片上传和文件上传功能

    springboot整合ueditor实现图片上传和文件上传功能 写在前面: 在阅读本篇之前,请先按照我的这篇随笔完成对ueditor的前期配置工作: springboot+layui 整合百度富文本 ...

  3. Spring+SpringMVC+MyBatis+easyUI整合优化篇（七）图片上传功能

    日常啰嗦 前一篇文章<Spring+SpringMVC+MyBatis+easyUI整合优化篇(六)easyUI与富文本编辑器UEditor整合>讲了富文本编辑器UEditor的整合与使用 ...

  4. uEditor独立图片上传

    项目中.上传图片,非常希望有一款比较兼容的查件. 网上找了一些,图片上传立刻显示的js代码,还有uploadify.都会碰到这样那样的不兼容和其它头疼的问题. 后来想,干脆就用php的上传类最干脆.但 ...

  5. 前端丨如何使用 tcb-js-sdk 实现图片上传功能

    前言 tcb-js-sdk 让开发者可以在网页端使用 JavaScript 代码服务访问云开发的服务,以轻松构建自己的公众号页面或者独立的网站等 Web 服务.本文将以实现图片上传功能为例,介绍 tc ...

  6. thinkphp达到UploadFile.class.php图片上传功能

    片上传在站点里是非经常常使用的功能.ThinkPHP里也有自带的图片上传类(UploadFile.class.php) 和图片模型类(Image.class.php).方便于我们去实现图片上传功能,以 ...

  7. PHP语言学习之php做图片上传功能

    本文主要向大家介绍了PHP语言学习之php做图片上传功能,通过具体的内容向大家展示,希望对大家学习php语言有所帮助. 今天来做一个图片上传功能的插件,首先做一个html文件:text.php < ...

  8. [Ting's笔记Day8]活用套件carrierwave gem:（3）Deploy图片上传功能到Heroku网站

    前情提要: 身为Ruby新手村民,创造稳定且持续的学习步调很重要,我用的方法就是一周在IT邦写三篇笔记,希望藉由把笔记和遇到的bug记录下来的过程,能帮助到未来想用Ruby on Rails架站的新手 ...

  9. H5 利用vue实现图片上传功能。

    H5的上传图片如何实现呢? 以下是我用vue实现的图片上传功能,仅供参考. <!DOCTYPE html> <html> <head> <meta chars ...

随机推荐

  1. EXchange2010配置

    DAG配置: 组织配置:如果见证服务器是DC不是exchange服务器,那么需要在AD用户和计算机里面,将exchange trusted subsystem 添加到 DC的本地管理员组(/built ...

  2. ［原创］jQuery的this和$(this)

    网上有很多关于jQuery的this和$(this)的介绍,大多数只是理清了this和$(this)的指向,其实它是有应用场所的,不能一概而论在jQuery调用成员函数时,this就是指向dom对象. ...

  3. IIS 7.0 and Web Farms

    1. IIS 6 IIS 6.0 was capable of scaling out to virtually any number of web servers and had tools lik ...

  4. (转)用AGG实现高质量图形输出（一）

    AGG是一个开源.高效的跨平台2D图形库.AGG的功能与GDI+的功能非常类似,但提供了比GDI+更灵活的编程接口,其产生的图形的质量也非常高(自称超过GDI+) 使用前AGG的准备工作 下载AGG库 ...

  5. 次表面散射(SubSurface Scattering) Shader 【转】

    原文 http://www.azure.com.cn/article.asp?id=231 用深度值近似模拟物体的厚度,厚度越小处透光越多. varying vec4 position;varying ...

  6. Swift编程语言学习4.3—— 控制语句

    控制传递语句(Control Transfer Statements) 控制转移语句改变你代码的运行顺序,通过它你能够实现代码的跳转.Swift有四种控制转移语句. continue break fa ...

  7. Android程序开发0基础教程(一)

    程序猿学英语就上视觉英语网 Android程序开发0基础教程(一)   平台简单介绍   令人激动的Google手机操作系统平台-Android在2007年11月13日正式公布了,这是一个开放源码的操 ...

  8. [Angular2 Router] CanDeactivate Route Guard - How To Confirm If The User Wants To Exit A Route

    In this tutorial we are going to learn how we can to configure an exit guard in the Angular 2 Router ...

  9. spring mvc 3.0 ModelAndView模型视图类

    见名知意,从名字上我们可以知道ModelAndView中的Model代表模型,View代表视图.即,这个类把要显示的数据存储到了Model属性中,要跳转的视图信息存储到了view属性.我们看一下Mod ...

  10. cocos2d win7 安卓环境配置开发

    相关工具 下载 Android SDK 下载和安装 Android NDK版本不要选r9的.用r8e!r9会报错 下载安装JDK版本是 jdk-7u13-windows-x64.exe 下载和安装Cy ...