<!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. hotfix分析

    使用System Update Readiness Tool for Windows Server 2008 R2 x64 可以分析hotfix是否有安装失败的情况 示例:http://blogs.t ...

  2. 六、Linux/UNIX操作命令积累【kill、netstat、df、du】

    在使用Linux/UNIX下,常常会使用文本界面去设置系统或操作系统,作者本人在工作的过程也在不断接触这方面的命令,所以为此特酝酿.准备.開始了本文的编写. 本文主要记录自己平时遇到的一些Linux/ ...

  3. bootstrap适配移动端

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

  4. 【JavaScript】理解与使用Javascript中的回调函数

    在Javascript中,函数是第一类对象,这意味着函数可以像对象一样按照第一类管理被使用.既然函数实际上是对象:它们能被“存储”在变量中,能作为函数参数被传递,能在函数中被创建,能从函数中返回. 因 ...

  5. Perl小知识点之排序sort

    脚本这种东西,就是要常用,否则一段时间不用就生疏了,因此决定时时记一些小知识点,一来回顾一下,二来需要的时候可以迅速获得提示. Sort by number You could now write a ...

  6. SQL Sever 2008 数据库文件的备份和还原

    数据库文件备份保存的方式我知道的有两种,第一种就是我们知道到的简单的分离,生成.mdf和.ldf文件,然后使用的时候直接进行附加数据库就可以了. 那么还有生成备份的文件.bak 的,这个操作要在步骤: ...

  7. IOS 设置定时器

    IOS 设置定时器  自动滚动视图 定时发送坐标信息 即时显示 时钟 NSTimer *timer; - (void)start {//1second 调用一次 timer = [NSTimer sc ...

  8. 2dx解析cocosbuilder中使用layer时的缺陷

    2dx解析cocosbuilder中使用layer时的缺陷 cocos2d-x 3.7 cocosbuilder中的layer通常会用到触摸属性: 但是在2dx解析布局文件的时候,却很多属性都没解析: ...

  9. leetcode题解：Search in Rotated Sorted Array（旋转排序数组查找）

    题目: Suppose a sorted array is rotated at some pivot unknown to you beforehand. (i.e., 0 1 2 4 5 6 7  ...

  10. iOS - UI - UIPageControl

    1.UIPageControl 分页控件 //分页控件初始化 UIPageControl * pageControl = [[UIPageControl alloc] init]; //分页页数 pa ...