<!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. mvc cookie

    Response.Cookies["userName"].Value = "ddd"; <%     if (Request.Cookies[" ...

  2. STM32F103定时器输出PWM波控制直流电机

    这个暑假没有回家,在学校准备九月份的电子设计竞赛.今天想给大家分享一下STM32高级定时器输出PWM波驱动直流电机的问题.. 要想用定时器输出的PWM控制直流电机,,首先要理解“通道”的概念..一个定 ...

  3. DB2数据库性能优化介绍

    DB2数据库性能优化介绍 作者:chszs,转载需注明.博客主页:http://blog.csdn.net/chszs 前段时间,我从CSDN得到了这本书<DB2数据库性能调整和优化(第2版)& ...

  4. [Angular2 Form] Display Validation and Error Messaging in Angular 2

    Angular 2’s ngModel provides error objects for each of the built-in input validators. You can access ...

  5. GIT分支管理是一门艺术

    英文原文:http://www.nvie.com/posts/a-successful-git-branching-model/ 原文作者:Vincent Driessen 本文经Linux大棚博主总 ...

  6. Load Balancing 折半枚举大法好啊

    Load Balancing 给出每个学生的学分.   将学生按学分分成四组,使得sigma (sumi-n/4)最小.         算法:   折半枚举 #include <iostrea ...

  7. 1.7.3 Relevance-相关性

    1. 相关性 相关性是一个查询响应满足用户搜索信息的一个度(程度). 查询响应的相关性主要依赖于上下文的查询.单个搜索应用程序可以通过用户的不同需求和期望被用来在不同的上下文.例如,气候数据的搜索引擎 ...

  8. JSON3-翻译(不当之处,请指正)

    http://bestiejs.github.io/json3/JSON 3 显示了两个功能:stringify():序列化一个javaScript值为一个JSON,和parse():将一个json字 ...

  9. xcode5项目图标添加

    转载文章 地址http://www.360doc.com/content/14/0103/08/14615320_342227413.shtml 最近提交itunesconnect应用时,有个警告说缺 ...

  10. UIWebView获得内容的高 高度自适应 宽度自适应

    UIWebView获得内容的高-作出自适应高的UIWebView- (void)webViewDidFinishLoad:(UIWebView *)webView { NSString *height ...