<!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. bootstrap适配移动端

    上次在pythonanywhere上挂上去的页面,是这个样子的 而在手机上看是这个样子的 总之简直不能看= = 看了一下学校几个微信公众号的页面.都是用的bootstrap,好吧我也去试试看好了. 在 ...

  2. C++字节对齐问题

    关于C++字节对齐问题 关于C/C++的字节对齐 这两天写解析SWF文件的程序,在结构体指针和从文件里读出来的进行转换的时候遇到一些问题,就是有一个struct A,比如: struct A { ch ...

  3. \r，\n，\t

    \r:回车符,返回到这一行的开头,return的意思. \n:换行符,到下一行的同一位置,纵坐标相同,new line的意思. \t:制表符,为了在不使用表格的情况下,上下对齐,table的意思. E ...

  4. C++在堆上申请和释放内存 - new & delete

    // 动态申请内存, 指向一个未初始化的整型 int *pi = new int; // pi指向一个整型值,初始化为0 int *pi = new int(); // value of i is 1 ...

  5. Codeforces Good Bye 2015 C. New Year and Domino 前缀和

    C. New Year and Domino 题目连接: http://www.codeforces.com/contest/611/problem/C Description They say &q ...

  6. Visual Studio原生开发的10个调试技巧（一）

    最近碰巧读了Ivan Shcherbakov写的一篇文章,<11个强大的Visual Studio调试小技巧>.这篇文章只介绍了一些有关Visual Studio的基本调试技巧,但是还有其 ...

  7. 自定义WM_NOTIFY消息

    自定义WM_NOTIFY消息 习惯了用自定义用户消息进行各种状态的通知,特别是子窗口与父窗口之间的交互.但ON_MESSAGE没有控件ID的限制,如果有多个子窗口发送同一个消息给父窗口时,父窗口就不知 ...

  8. Visual C++内存泄露检测—VLD工具使用说明[转]

    Visual C++内存泄露检测—VLD工具使用说明 一．        VLD工具概述 Visual Leak Detector(VLD)是一款用于Visual C++的免费的内存泄露检测工具.他的 ...

  9. Android C2DM学习 - 云端推送

    一.基础知识 当我们开发需要和服务器交互的应用程序时,基本上都需要获取服务器端的数据,比如<地震及时通>就需要及时获取服务器上最新的地震信息.要获取服务器上不定时更新的信息一般来说有两种方 ...

  10. jquery控制css的display(控制元素的显示与隐藏)

    使用jquery控制div的显示与隐藏: $("#div的id").show()表示display:block, $("#div的id").hide()表示di ...