<!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. hdu 3681 Prison Break （TSP问题）

    Prison Break Time Limit: 5000/2000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Tot ...

  2. js设置控件的隐藏与显示的两种方法

    js设置控件的隐藏与显示,设置控件style的display和visibility属性就可以了,下面有个示例,需要的朋友可以参考下用JavaScript隐藏控件的方法有两种,分别是通过设置控件的sty ...

  3. Microsoft.AlphaImageLoader滤镜解说

    Microsoft.AlphaImageLoader是IE滤镜的一种,其主要作用就是对图片进行透明处理.尽管FireFox和IE7以上的IE浏览器已经支持透明的PNG图片,可是就IE5-IE6而言还是 ...

  4. Hello_IOS ios开发transform属性

    #import "ViewController.h" @interface ViewController () @property (weak, nonatomic) IBOutl ...

  5. Browser 與 Server 持續同步的作法介紹 (Polling, Comet, Long Polling, WebSocket)长连接

    對 Comet 的懵懂 記得兩年多前,第一次看到 Gmail 中的 GTalk 覺得很好奇:「咦?線上聊天且是 Google 的熱門系統,只用傳統的 AJAX 應該會操爆伺服器吧?」很幸運的,當時前公 ...

  6. 基于Raft构建弹性伸缩的存储系统的一些实践

    基于Raft构建弹性伸缩的存储系统的一些实践 原创 2016-07-18 黄东旭 聊聊架构 最近几年来,越来越多的文章介绍了 Raft 或者 Paxos 这样的分布式一致性算法,但主要集中在算法细节和 ...

  7. ls显示文件大小时显示单位

    在Linux中显示文件大小的时候,通常的做法是使用“ls -l”,显示的大小是文件的字节大小. 但是,如果文件比较大的话,显示起来不是特别易读,这个时候,可以使用“ls -lh”,就可以使用比较接近文 ...

  8. springMVC与struts2的区别

    1. 机制:spring mvc的入口是servlet,而struts2是filter,这样就导致了二者的机制不同. 2. 性能:spring会稍微比struts快.spring mvc是基于方法的设 ...

  9. 分享10款常用的jQuery焦点图插件

    爱编程一直在收集整理编程相关的知识和解决方案,今天小编为大家带来10款非常常用的jquery焦点图插件. 1.jQuery可自动播放动画的焦点图插件 之前我们已经分享过很多非常实用的jQuery焦点图 ...

  10. ORB：新一代 Linux 应用

    Orbital Apps 给我们带来了一种新的软件包类型 ORB,它具有便携软件.交互式安装向导支持,以及离线使用的能力. 便携软件很方便.主要是因为它们能够无需任何管理员权限直接运行,也能够带着所有 ...