zoukankan      html  css  js  c++  java
  • 使用ueditor实现多图片上传案例——前台数据层(Index.jsp)

    <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
    <%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
    %>
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
            "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
        <title>完整demo</title>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
        <script type="text/javascript" src="jquery-1.8.3.js"></script>
        <script type="text/javascript" charset="utf-8" src="ueditor.config.js"></script>
        <script type="text/javascript" charset="utf-8" src="ueditor.all.min.js"> </script>
        
        <!--建议手动加在语言,避免在ie下有时因为加载语言失败导致编辑器加载失败-->
        <!--这里加载的语言文件会覆盖你在配置项目里添加的语言类型,比如你在配置项目里配置的是英文,这里加载的中文,那最后就是中文-->
        <script type="text/javascript" charset="utf-8" src="lang/zh-cn/zh-cn.js"></script>
        <style type="text/css">
            div{
                100%;
            }
        </style>
    </head>
    <body>
        <form action="UploadServlet" method="post" id="form_add">
       <div>
        	商品名称:<input type="text" name="name" />
        	<input type="hidden" value="" id="picture" name="picture"/>
        	
    </div>
    <div>
        <h1>完整demo</h1>
        <script id="editor" type="text/plain" style="100%; margin:0px auto;height:300px;"></script>
    </div>
     <input type="button" value="提交" id="btn_sub"/>
        </form>
    <script type="text/javascript">
    
        //实例化编辑器
        //建议使用工厂方法getEditor创建和引用编辑器实例,如果在某个闭包下引用该编辑器,直接调用UE.getEditor('editor')就能拿到相关的实例
        var ue = UE.getEditor('editor');
    
        function getContent() {
            var content = UE.getEditor('editor').getContent();
            var picture = document.getElementById("picture");
            picture.value = content;
        }
      
       
    </script>
    <script type="text/javascript">
    $(function(){
    	$("#btn_sub").click(function(){
    		getContent();
    		$("#form_add").submit();  //提交
    	});
    });
    </script>
    
    </body>
    </html>

  • 相关阅读:
    【洛谷 4613】Olivander
    【洛谷 1385】密令
    【洛谷 4439】Aron
    【洛谷 3383】线性筛素数
    【洛谷 2412】查单词
    【洛谷 1980】计数问题
    【洛谷 3372】(模板)线段树 1
    Luogu P3743 kotori的设备
    Luogu P2340 [USACO03FALL]Cow Exhibition G
    Luogu P3047 [USACO12FEB]Nearby Cows G
  • 原文地址:https://www.cnblogs.com/a1111/p/12816149.html
Copyright © 2011-2022 走看看