精华内容
下载资源
问答
  • 总结为两种方法,一种是后端使用freemarker,一种是前端使用js插件。...一般更加倾向于后端的写法。 一、后端使用freemarker 1、导入maven依赖 <dependency> <groupId>org.freemarke...

    总结为两种方法,一种是后端使用freemarker,一种是前端使用js插件。两种方法各有利弊。前端的比较简单,但是格式容易出现问题。后端的比较稳定,但是较前端来说更为繁琐。一般更加倾向于后端的写法。

    一、后端使用freemarker

    1、导入maven依赖

            <dependency>
                <groupId>org.freemarker</groupId>
                <artifactId>freemarker</artifactId>
                <version>2.3.28</version>
            </dependency>

    2、制作模板文件

    首先创建一个doc文档,如下图:

    这个文档就是你大致需要生成的样子。图片可以随意,这里这是利用这张图片在这里占个位置。

    将该文档保存为2003 xml:

    然后用XML文本编辑器打开该文件,这里推荐一个工具Firstobject free XML editor,下载地址:Firstobject free XML editor

     

    用工具打开这个文件,可以看到里面的代码很多很乱,不要慌,用ctrl+F找到你需要动态生成的标题或者文字:

    将其改为${title}:

    接下来改图片占位符,找到结尾为preserve的标签:

    将后面的一大堆图片的代码删除,然后改为你图片的占位符:${img}:

    将该文件另存为ftl文件:

    3、使用getDataURl()方法获取echarts图片base64码,并传给后台

                   var stinkEcharts1 = function (data) {
                        option = {
                            legend: {},
                            tooltip: {},
                            dataset: {
                                dimensions: ['time', 'CH4', 'NH3', 'H2S','VOCs'],
                                source: data
                            },
                            xAxis: {type: 'category'},
                            yAxis: {},
                            // Declare several bar series, each will be mapped
                            // to a column of dataset.source by default.
                            series: [
                                {animation: false,type: 'bar'},
                                {animation: false,type: 'bar'},
                                {animation: false,type: 'bar'},
                                {animation: false,type: 'bar'},
                            ]
                        };
                        var chart = echarts.init(document.getElementById('stink1'),'macarons');
                        chart.setOption(option);
                        imgStink1 = chart.getDataURL();
                    }
            $.ajax({
                type: 'post',
                url: "/appcenter/envAssessReport/export1",
                data : {
                    title:$("#ty").text(),
                    imgStink1:imgStink1,
                   
                },
                dataType : "json",
                success : function (data) {
                    var map = data.data;
                    if (map.num==1){
                        window.location.href='/statics/download/word.docx'
                    }else {
    
                    }
    
    
                },
            })

    4、WordUtil工具类

    import java.io.File;
    import java.io.FileOutputStream;
    import java.io.IOException;
    import java.io.OutputStreamWriter;
    import java.io.Writer;
    import java.util.Map;
    import freemarker.template.Configuration;
    import freemarker.template.Template;
    import org.springframework.beans.factory.annotation.Value;
    import org.springframework.stereotype.Component;
    
    /**
     * @author 
     * @description
     * @Date 2020/4/23 15:13
     **/
    @Component
    public class WordUtils {
        private static final String FTL_FP = "D:/file/"; //模板路径
    
        private static Configuration configuration = null;
        static{
            configuration = new Configuration(Configuration.VERSION_2_3_28);
            configuration.setDefaultEncoding("utf-8");//设置默认的编码
    
        }
    
        public  Boolean writeWordReport(String wordFilePath,String wordFileName,String templateFileName, Map<String, Object> beanParams) {
            Writer out = null;
            try {
                configuration.setDirectoryForTemplateLoading(new File(FTL_FP));
                Template template = configuration.getTemplate(templateFileName, "UTF-8");
    
                //获取文件目录,如果不存在则创建
                String filePath = "";
                int index = wordFilePath.lastIndexOf(File.separator);
                if(index != wordFilePath.length()-1){
                    filePath = wordFilePath+ File.separator;
                }else {
                    filePath = wordFilePath;
                }
                File file1 = new File(filePath);
                if(!file1.exists()){
                    file1.mkdirs();
                }
    
                //输出文件
                File file = new File(filePath+wordFileName);
                FileOutputStream fos = new FileOutputStream(file);
                out = new OutputStreamWriter(fos, "UTF-8");
                template.process(beanParams, out);
                return true;
            } catch (Exception e) {
                e.printStackTrace();
                return false;
            }finally{
                try {
                    if(out != null) {
                        out.close();
                    }
                } catch (IOException e) {
                    e.printStackTrace();
                }
            }
        }
        /**
         * 字符串转换
         */
        public static String turn(String str){
            String base64 = str.replaceAll(" ", "+");
            String[] arr = base64.split("base64,");
            String image = arr[1];
            return image;
    
        }
    }

    5、调用WordUtil.java工具类,生成word文档

    public Map<String, Object> export(String title,String imgStink1) {
    
            Map<String, Object> map = new HashMap<>();
            String base64 = imgStink1.replaceAll(" ", "+");
            // 数据格式为data:image/png;base64,iVBORw0KGgoAA...  在"base64,"之后的才是图片信息
            String[] arr = base64.split("base64,");
            String image = arr[1];
    
    
            //添加模板数据
            Map<String,Object> dataMap = new HashMap<>();
            dataMap.put("title",title);
            dataMap.put("imgStink1",WordUtils.turn(imgStink1));
            
    
    
            //文件生成路径
            String wordFilePath = "D:/download/";
            //文件生成名称
            String wordFileName = "word.doc";
            //模板文件名称
            String templateFileName = "word (18).ftl";
    
            //生成word文档
            Boolean result =new WordUtils().writeWordReport(wordFilePath, wordFileName, templateFileName, dataMap);
            if(result){
                map.put("num",1);
            }else {
                map.put("num",0);
            }
            return map;
    
        }

      以上就是全部代码,敲完就可以下载成word文档了!

       注意:如果生成的图片看上去或圆或扁,可以在下载的doc文档中调整好图片格式,然后重复步骤2,重新生成模板文件,这样生成的图片就是你调整后的样子。


    二、前端js

    1、html页面引入js文件

    <script  src="/FileSaver.js"></script>
    <script src="/jquery.wordexport.js"></script>

    js文件网盘地址:

    链接:https://pan.baidu.com/s/1TtrJObbLPq6Mq3hQBd7UcQ 
    提取码:f7c4

     

    2、html页面

                 <div id="main">         
                        <h1 align="center" id="ty">环境评估报表年表</h1>                   
                        <h2>1、园区臭气监测</h2>
                        <h4>表 1.1 臭气数据超标情况汇总柱状图</h4>
                        <div  class="chart" id="stink1"></div>
                 </div>

    3、js页面代码

    $("#export").click(function (event) {
    
            var clone = $("#main").clone();//现将页面clone,以免格式收到影响
            var charts = clone.find(".chart");
            var flag = charts.length;
    
            var  count=0;
            for(var i = 0; i < charts.length; i++) {
                var curEchart = echarts.getInstanceByDom(charts[i]);
                if(curEchart) {
                    var base = curEchart.getDataURL();
                    flag--;
                }
                if(base!=undefined){
                    var img = $('<img style="margin:0 auto;" src="' + base + '"/>');
                    $(charts[i]).html(img);
                }
            }
    
    
            //
            var interval = setInterval(function() {
                if(true) {
                    clearInterval(interval);
                    //导出word
                    clone.wordExport("word文档");
                }
            }, 200)
    
    
        })

     

    展开全文
  • charset=UTF-8” language=“java” %> <%@ taglib prefix=“c” uri=“http://java.sun.com/jsp/jstl/core” %> <%@ taglib prefix=“fmt” uri=“http://java.sun.com/jsp/jstl/fmt” %>

    <%@ page contentType=“text/html;charset=UTF-8” language=“java” %>
    <%@ taglib prefix=“c” uri=“http://java.sun.com/jsp/jstl/core” %>
    <%@ taglib prefix=“fmt” uri=“http://java.sun.com/jsp/jstl/fmt” %>

       <style>
            * {
                margin: 0;
                padding: 0;
            }
    
            /*图片上传*/
    
            html,
            body {
                width: 100%;
                height: 100%;
            }
    
            .container {
                width: 100%;
                height: 100%;
                overflow: auto;
                clear: both;
            }
    
            .z_photo img {
                width: 1rem;
                height: 1rem;
            }
    
            .z_addImg {
                float: left;
                margin-right: 0.2rem;
            }
    
            .z_file {
                background: url(../../img/z_add.png) no-repeat;
                width: 1rem;
                height: 1rem;
                background-size: 100% 100%;
                float: left;
                margin-right: 0.2rem;
            }
    
            .z_file input::-webkit-file-upload-button {
                width: 1rem;
                height: 1rem;
                border: none;
                position: absolute;
                outline: 0;
                opacity: 0;
            }
    
            .z_file input#file {
                display: block;
                width: auto;
                border: 0;
                vertical-align: middle;
            }
    
            /*遮罩层*/
    
            .z_mask {
                width: 100%;
                height: 100%;
                background: rgba(0, 0, 0, .5);
                position: fixed;
                top: 0;
                left: 0;
                z-index: 999;
                display: none;
            }
    
            .z_alert {
                width: 3rem;
                height: 2rem;
                border-radius: .2rem;
                background: #fff;
                font-size: .24rem;
                text-align: center;
                position: absolute;
                left: 50%;
                top: 50%;
                margin-left: -1.5rem;
                margin-top: -2rem;
            }
    
            .z_alert p:nth-child(1) {
                line-height: 1.5rem;
            }
    
            .z_alert p:nth-child(2) span {
                display: inline-block;
                width: 49%;
                height: .5rem;
                line-height: .5rem;
                float: left;
                border-top: 1px solid #ddd;
            }
    
            .z_cancel {
                border-right: 1px solid #ddd;
            }
    
            .z_cancel {
                border-right: 1px solid #ddd;
            }
    
        </style>
    
    •         </li>
              <li>
                  <div class="detail_div">
                      <label>上传描述图片</label>
                      <!--    照片添加    -->
                      <div class="z_photo">
                          <div class="z_file">
                              <input type="file" name="file" id="fileNew" value="" accept="image/*" multiple
                                     onchange="imgChange('z_photo','z_file');"/>
                          </div>
                          <c:forEach items="${list}" var="o" varStatus="m">
                              <div id="${m.index}" class="z_addImg">
                                  <div class="z_sure" onclick="imgRemove('${m.index}','${o.imgUrl}')"
                                       style=" float: right;  color: red;cursor: pointer "><i class="iconfont">x</i></div>
                                  <img
                                          src="${o.imgUrl}"></div>
                          </c:forEach>
                      </div>
                    
              </li>
              <li style="border-bottom: 0px">
                  <div class="detail_div">
                      <label>上传商品头图</label>
                      <button onclick="clickFile()" type="button" style="border: none;background-color: #589cf6;  color: #FFFFFF;  padding: 10px 15px;  font-size: 15px;  border-radius: 5px; cursor: pointer;" class=" borderRadius3">上传图片</button>
                      <input type="file" style="display:none" name="file" id="file"
                             onchange="fileImport();">
                  </div>
              </li>
              <li>
                  <div class="detail_div">
                      <img id="img" style="height: 50%;width: 50%" src="=">
                  </div>
              </li>
      
          </ul>
          <input type="hidden" value="${shopping.id}" name="" id="shopId">
          <input type="hidden" value="${shopping.imgurl}" name="" id="filePath">
          <input type="hidden" value="${filesUrl}" name="" id="describePath">
          <input type="hidden" value="${filesSize}" name="" id="listSize">
          <div class="edit_div">
              <button type="button" class="edit_btn borderRadius3 ruizi" style="margin-top: 25%;" onclick="sumbit ()">保存
              </button>
          </div>
      </div>
      
    js
    
    <script type="text/javascript">
        function sumbit() {
            var shopId = document.getElementById("shopId").value;
            var commodity = document.getElementById("commodity").value;
            var price = document.getElementById("price").value;
    //        var shopDescribe = document.getElementById("shopDescribe").value;
            var filePath = document.getElementById("filePath").value
            var describePath = document.getElementById("describePath").value
           
        
            $.ajax({
                url: '${pageContext.request.contextPath}/manage/updateShopping.json',
                data: {
                    "id": shopId,
                    "commodity": commodity,
                    "price": price,
                    // "shopDescribe": shopDescribe,
                    "filePath": filePath,
                    "describePath": describePath,
                },
                dataType: "json",
                success: function (data) {
                    if (data.msg == '0') {
                        window.location.href = "${pageContext.request.contextPath}/manage/shoppingList.json"
                    } else {
                        alert(data.msg);
                    }
                },
                error: function () {
                    alert("提交失败!")
                }
            });
        }
        function clickFile() {
            document.getElementById("file").click();
        }
    
        function fileImport() {
            //获取读取我文件的File对象
            var file = document.getElementById('file').files[0];
            if (file == undefined) {
                return;
            }
            var name = file.name; //读取选中文件的文件名
            var filechk = file.name.substring(file.name.lastIndexOf('.') + 1);
            if ((filechk == 'jpg') || (filechk == 'jpeg') || (filechk == 'png')) {
                $.ajaxFileUpload({
                    url: '${pageContext.request.contextPath}/manage/uploadImg.json',
                    secureuri: false, //是否需要安全协议,一般设置为false
                    fileElementId: 'file', //文件上传域的ID
                    dataType: 'json', //返回值类型 一般设置为json
                    success: function (data) {
                        if (data.msg != '0') {
                            document.getElementById("filePath").value = data.msg;
                            document.getElementById("img").src = data.msg;
                            document.getElementById("img").style.width = "50%";
                            document.getElementById("img").style.height = "50%";
                            document.getElementById("file").value = "";
                        } else {
                            alert("上传失败");
                        }
                    },
                    error: function () {
                        cancel_shield()
                        alert("提交失败,请认真核对格式是否正确!")
                    }
                })
                return false;
            } else {
                alert('请选择图片文件');
            }
        }
    
        (function (doc, win) {
            var docEl = doc.documentElement,
                resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
                recalc = function () {
                    var clientWidth = docEl.clientWidth;
                    if (!clientWidth) return;
                    if (clientWidth >= 640) {
                        docEl.style.fontSize = '100px';
                    } else {
                        docEl.style.fontSize = 100 * (clientWidth / 640) + 'px';
                    }
                };
    
            if (!doc.addEventListener) return;
            win.addEventListener(resizeEvt, recalc, false);
            doc.addEventListener('DOMContentLoaded', recalc, false);
        })(document, window);
    
        function imgChange(obj1, obj2) {
            //获取点击的文本框
            var listIndex = document.getElementById("listSize").value;
            alert(listIndex)
            var formData = new FormData();
            var file = document.getElementById("fileNew");
            //存放图片的父级元素
            var imgContainer = document.getElementsByClassName(obj1)[0];
            //获取的图片文件
            var fileList = file.files;
            //文本框的父级元素
            var input = document.getElementsByClassName(obj2)[0];
    
            var imgArr = [];
            //遍历获取到得图片文件
            for (var i = 0; i < fileList.length; i++) {
                var imgUrl = window.URL.createObjectURL(file.files[i]);
                imgArr.push(imgUrl);
                var img = document.createElement("img");
                img.setAttribute("src", imgArr[i]);
                var imgAdd = document.createElement("div");
                imgAdd.setAttribute("class", "z_addImg");
                imgAdd.appendChild(img);
                imgContainer.appendChild(imgAdd);
                var body = document.getElementsByClassName('z_addImg')[listIndex]
                body.id = ''+listIndex
                document.getElementById("listSize").value = Number(listIndex) +1;
                formData.append("file", fileList[i]);
                $.ajax({
                    type: "post",
                    url: "${pageContext.request.contextPath}/manage/uploadFilesImg.json",
                    data: formData,
                    processData: false,
                    contentType: false,
                    success: function (data) {
                        var f = document.getElementById("describePath").value
                        document.getElementById("describePath").value = f + "@" + data.msg;
                        var modelStr = "<div class='z_sure'  οnclick='imgRemoveAdd("+listIndex+")'style=' float: right;  color: red;cursor: pointer '><i class='iconfont'>x</i></div>";
                        modelStr =modelStr +"<input id='asd"+listIndex+"' type='hidden' value='"+ data.msg+"'   ></input>";
                        $("div[class=z_addImg]:last").append(modelStr);
                    },
                    error: function (e) {
                    }
                });
            };
        };
    
        function imgRemove(id, url) {
            var listIndex1 = document.getElementById("listSize").value ;
            document.getElementById("listSize").value = Number(listIndex1) -1;
            document.getElementById(id).remove();
            var path = document.getElementById("describePath").value
            var newstr = path.replace("@" + url, "");
            document.getElementById("describePath").value = newstr;
        };
        function imgRemoveAdd(id) {
            var listIndex1 = document.getElementById("listSize").value ;
            var urlUp = document.getElementById("asd"+id).value;
            var path = document.getElementById("describePath").value
            var newstr = path.replace("@" + urlUp, "");
            document.getElementById("describePath").value = newstr;
            document.getElementById(id).remove();
            document.getElementById("listSize").value = Number(listIndex1) -1;
        };
    
    </script>
    
    
    展开全文
  • 前端js基础写法

    2020-06-27 14:45:04
    本人后端开发,前端小白,因项目需要学习了一些关于angularJs的前端语法。后又因项目缘故,学习基础js写法和ajax请求。这里分享一些js常用的写法(主要关于交互)。 1 href href是调用后端接口最简单的写法 在...

    0 背景

    本人后端开发,前端小白,因项目需要学习了一些关于angularJs的前端语法。后又因项目缘故,学习基础js写法和ajax请求。这里分享一些js常用的写法(主要关于交互)。

    1 href

    href是调用后端接口最简单的写法

    <!--在html里-->
    <a href="后端路径"></a>
    
    <!--在js里-->
    window.location.href="后端路径"    //当前窗口打开
    window.open="后端路径"     //新窗口打开

    2 form表单

    采用href表单提交数据

    <!--html-->
    <form id="testForm" action="后端路径" mothod="post"> 
        <div>
            <input id="testName" name="username">    //id用来在js里绑定数据 name为后端接收数据命名
        </div>
        <div>
            <input id="testDescription" name="description">    //id用来在js里绑定数据 name为后端接收数据命名
        </div>
        <div class="hide">                  //表单里要绑定的数据,但不需显示
            <input name="id" value="id">       //直接在html里绑定
            <input id="otherId" name="otherId" >     //通过id在js里绑定
        </div>
    </form>
    <div>
        <button class="default_btn">返回</button>
        <button id="submitId" class="blue_btn">提交</button>
    </div>
    
    <!--js-->
    <script>
        $("#submitId").click(function(){
            var otherId="";
            $("#otherId").val(otherId);  //绑定值
            $("#testForm").ajaxSubmit({        //点击btn提交form表单
                dataType:"json",
                success:function(res){
                    alertMsg("提交成功","success");
                    setTimeout(function(){
                        window.location.reload();
                    },2000);
                },
                error:function(res){
                    alertMsg("提交失败");
                }           
            });
        });
    </script>

    3 ajax请求

    <script>
    function getAjaxTest(queryString){
        $.ajax({
            url:"后端路径",
            dataType:"json",  //表示返回json数据
            type:"get",
            contentType:"application/json;charset=UTF-8",
            data:{
                queryString:queryString      //get请求时路径参数
            },
            success:function(data){
                //成功操作
            },
            error:function(){
                //失败操作
            }
        });
    };
    <!--get简单请求-->
    $.get("后端路径",function(data){
        //get返回处理
    });
    function postAjaxTest(){
        var data={"id":id,"username":username};
        var jsonData=JSON.stringify(data);
        $.ajax({
            url:"后端路径",
            dataType:"json",       //表示返回json数据
            type:"post",
            contentType:"application/json;charset=UTF-8",
            data:jsonData,        //get请求时路径参数
            success:function(data){
                //成功操作
            },
            error:function(){
                //失败操作
            }
        });
    };
    </script>

    4 其他常用

     

    展开全文
  • 最近需要写多文件上传功能,用到了layui.js控件,现进行总结,因为内容太多这里只总结了html页面的内容,java后台配置对接另一篇文章《layui上传多文件后台代码总结(java》,其实官网《layui.js文件上传示例》已经...

    最近需要写多文件上传功能,用到了layui.js控件,现进行总结,因为内容太多这里只总结了html页面的内容,java后台配置对接另一篇文章《layui上传多文件后台代码总结(java》,其实官网《layui.js文件上传示例》已经写的很详细了,我再啰嗦一下。

    参考文章如下:

    layui 上传组件后台代码分享( PHP 和 Java 的版本)

    layui 上传组件后台代码分享( Python 的版本)

    layui上传文件相关参数详解

    首先要进行的步骤:

    1.下载layui.js相关文档,《layui.js下载》,下载之后里面的内容如下:

    只需要把layui文件夹拷贝到自己项目中即可

    2.页面引入,在自己要实现文件上传功能的html页面引入下面两个文件:

    <script src="${basePath?if_exists}/demp/layui/layui.js" charset="utf-8"></script>
    <link rel='stylesheet' href='${basePath?if_exists}/demp/layui/css/layui.css' media="all">

     注:代码里的文件路径就是项目里的实际文件路径

    3.具体在页面的用法可参考官网示例《layui.js文件上传示例》,因为本人按照官网的示例加了点东西,现在贴出来(注解中会分开说明自己添加的内容):

    <body>
        <div class="layui-upload">
    		<button type="button" class="layui-btn layui-btn-normal" id="testList" style="margin-left:10px;">选择场地模型文件</button> 
    		<span style="color:red;font-size:14px;position:fixed;margin-top:20px;">(上传的场地模型文件名称必须为:basepoint.xml、Collect.xml、lane.xml或subitem.xml)</span>
    	  	<div class="layui-upload-list" style="margin-left:10px;width:96%">
    	    	<table class="layui-table">
    	      		<thead>
    			        <tr><th>文件名</th>
    			        <th>大小</th>
    			        <th>状态</th>
    			        <th>操作</th>
    	      			</tr></thead>
    	      		<tbody id="demoList"></tbody>
    	   	 	</table>
    	  	</div>
    	  	<button type="button" class="layui-btn" id="testListAction" style="margin-left:10px;">开始上传</button>
    	</div>
        <input type="hidden" id="isCoverSourceFile" name="isCoverSourceFile" value="">
        <input type="hidden" id="schoolId" name="schoolId" value="">
    </body>
    <script>
    layui.use('upload', function(){
      var $ = layui.jquery
      ,upload = layui.upload;
      //多文件列表示例
      var demoListView = $('#demoList')
      ,uploadListIns = upload.render({
        elem: '#testList'
        ,url: basePath + '/demp/model/uploadAreaFile.do?'
        ,data: {
    		  schoolId: function(){
    		    return $('#schoolId').val();
    		  },
    		  isCoverSourceFile: function(){
    		    return $('#isCoverSourceFile').val();
    		  }
    	}
        ,accept: 'file'
        ,multiple: true
        ,auto: false
        ,bindAction: '#testListAction'
        ,choose: function(obj){
        	var school_id = $('#schoolId').val();
        	if(school_id == null || school_id =="" || school_id == undefined){
        		layer.msg("请选择驾校");
        	}
          var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
          //读取本地文件
          obj.preview(function(index, file, result){
            var tr = $(['<tr id="upload-'+ index +'">'
              ,'<td>'+ file.name +'</td>'
              ,'<td>'+ (file.size/1014).toFixed(1) +'kb</td>'
              ,'<td>等待上传</td>'
              ,'<td>'
                ,'<button class="layui-btn layui-btn-xs demo-reload layui-hide">重传</button>'
                ,'<button class="layui-btn layui-btn-xs layui-btn-danger demo-delete">删除</button>'
              ,'</td>'
            ,'</tr>'].join(''));
            
            //单个重传
            tr.find('.demo-reload').on('click', function(){
              obj.upload(index, file);
            });
            
            //删除
            tr.find('.demo-delete').on('click', function(){
              delete files[index]; //删除对应的文件
              tr.remove();
              uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值,以免删除后出现同名文件不可选
            });
            
            demoListView.append(tr);
          });
        }
        ,done: function(res, index, upload){
        	document.getElementById("isCoverSourceFile").value="";
          if(res.code == 0){ //上传成功
          
            var tr = demoListView.find('tr#upload-'+ index)
            ,tds = tr.children();
            tds.eq(2).html('<span style="color: #5FB878;">上传成功</span>');
            tds.eq(3).html(''); //清空操作
            return delete this.files[index]; //删除文件队列已经上传成功的文件
          }else if(res.code == -2){ //上传提示
          	layer.confirm('该驾校已上传过此文件,是否选择重新上传?', {
    		  btn: ['是','否'] //按钮
    		}, function(){
    			document.getElementById("isCoverSourceFile").value="true";
    			var tr = demoListView.find('tr#upload-'+ index)
          		,tds = tr.children();
          		layer.closeAll('dialog');//关闭询问框
          		tds.eq(3).find('.demo-reload').click(); //触发重新上传点击事件
    		}, function(){
    			//和错误提示操作相同
    			document.getElementById("isCoverSourceFile").value="";
    	      	uploadListIns.config.error(index, upload,res.msg);
    		});
          }else{
        	  this.error(index, upload,res.msg);
          }
        }
        ,error: function(index, upload,msg){
          var tr = demoListView.find('tr#upload-'+ index)
          ,tds = tr.children();
          tds.eq(2).html('<span style="color: #FF5722;">'+msg+'</span>');
          tds.eq(3).find('.demo-reload').removeClass('layui-hide'); //显示重传
        }
      });
    });
    </script>

    注:(1)函数里的url和ajax中的url原理相同,写法可参考ajax中的。

           (2)传参数到后台写法如下:

    <body>
        <input type="hidden" id="schoolId" name="schoolId" value="">
        <input type="hidden" id="isCoverSourceFile" name="isCoverSourceFile" value="">
    </body>
    <script>
    ...
    ,data: {
        schoolId: function(){
    		return $('#schoolId').val();
    	},
    	isCoverSourceFile: function(){
    	    return $('#isCoverSourceFile').val();
    	}
    }
    ...
    </script>

          (3)在done方法里和在里面的layer.confirm询问框调用errorr,两种写法如下所示:

    var uploadListIns = upload.render({
    ....
    ,done: function(res, index, upload){
        if(res.code == 0){
            layer.confirm('该驾校已上传过此文件,是否选择重新上传?', {
                btn: ['是','否'] //按钮
            }, function(){
                layer.msg("您选择了是")
            }, function(){
                layer.msg("您选择了否");
                uploadListIns.config.error(index, upload,res.msg);//对error方法的调用
            });
        }else{
            this.error(index, upload,res.msg);//对error方法的调用
        }
    }
    ,error: function(index, upload,msg){
          ...
        }
    });
    展开全文
  • 前端h5调用安卓方法,并传参给安卓 window.javaInterface && window.javaInterface.loadAMapActivity(val) (备注:javaInterface为安卓定义的,以安卓定义的为准,loadAMapActivity是安卓定义的方法,...
  • 前端页面 controller @RequestMapping("/queryitems") 限制请求的方法method={RequestMethod.POST,RequestMethod.GET} 包装类型的pojo参数类型绑定 数组类型的参数绑定 jsp页面,controller,...
  • java前端:鼠标悬浮显示图片

    千次阅读 2018-08-06 16:18:19
    html写法如下,注意:放图片一定需要一个DIV或者LI等,一定要有一个容器,且固定大小 &lt;div id="idd" class="classs"&gt; &lt;img src="images/***/***.png"/&...
  • 页面导入样式时,使用link和@import有什么区别? 介绍一下你对浏览器内核的理解? 常见的浏览器内核有哪些? html5有哪些新特性、移除了那些元素?如何处理HTML5新标签的浏览器兼容问题?如何区分 HTML 和 HTML5...
  • 前端页面优化

    千次阅读 2016-08-29 11:59:06
    前端优化是复杂的,针对方方面面的资源都有不同的方式。那么,前端优化的目的是什么   1. 从用户角度而言,优化能够让页面加载得更快、对用户的操作响应得更及时,能够给用户提供更为友好的体验。 2. 从...
  • 前后端传值和前端的thymeleaf写法

    千次阅读 2021-03-12 11:14:23
    //从前端传的data中通过key获取值 String id= request.getParameter("id"); String value= request.getParameter("key"); Integer valueInt= Integer.parseInt(request.getParameter("keyInt"));//int类型 j.setMsg...
  • 前端进行转化成yyyy-MM-dd格式、在页面的一个区域打开一个页面写法、jquery中选中单选框的方法 1、jsp页面后端传入Date类型,前端进行转化成yyyy-MM-dd格式 <fmt:formatDate value='${person.dateTime}' ...
  • 几种java上传文件简单的写法

    千次阅读 2019-04-03 09:28:56
    在做java web项目时候,大多数情况下有上传文件或者是图片的功能需求,这里介绍的主要是java后台的集中写法,至于判断是否是哪种问价类型或者是是否是图片,前后端都可以,我的做法是前端的上传插件功能很强大,一般...
  • 前端调用后端的写法

    千次阅读 2018-11-08 19:42:28
    前端代码: &lt;div v-if="vmCheckItem.installType === '自动安装'"&gt; &lt;!--&lt;FormItem :label="$t('用户名:')" prop="email" &gt;--&gt; &...
  • 微信小程序-获取用户信息-前端写法

    千次阅读 2018-08-12 13:30:36
    //从后台获取的token,前端自己保存到全局变量中,备用;以后每次使用request都把该变量存入header变量 console.log("token : " + res.data); app.globalData.token = res.data; } } }) }, fail: ...
  • 前端页面到后台数据中文乱码问题 我在做web项目的时候遇到,页面输入中文数据,后台接收到的是乱码;一个简单的解决办法就是,直接在Tomcat中指定字符编码; 在Tomcat安装路径下,打开config路径下的server.xml文件...
  • 一前言  JavaScript 是互联网上最...这篇文章有点长,但是有需要的可以耐心看完 web前端的必须学会的三技术: HTML 定义了网页的内容CSS 描述了网页的布局JavaScript 网页的行为 二javaScript的功能 1.直接写入 HTML
  • SpringBoot个人博客—前端页面功能介绍(一) 一、前端框架Semantic UI Semintic UI官网:https://semantic-ui.com/ 前端页面主要采用了Semantic前端开发框架对页面骨架进行快速搭建。 Semantic作为一款开发框架...
  • vue前端java后端交互

    千次阅读 2019-07-02 21:47:49
    前端写法: 后端布局:
  • Web项目中前端页面引用外部Js和Css的路径问题 一般我们在做Web项目时,通常会将多个页面引入的公共js和css文件抽取出来,单独写成一个公共文件,以期方便各个页面单独引入,达到复用。 1. 抽取分离公共的js和css...
  • 相比于上一篇博客 WebStorm开发应用——前端页面,这次又做了一个登陆页面。就是这个样子!   我们都知道登录时账号和密码和如果正确的话,就跳转到相应页面上。那么该如何实现这一功能呢?如果是账户密码固定的...
  • 项目整理–Echarts前端后台的贯通写法注:以下所有内容建立在FH admin开源框架和eharts插件基础上,建议观看本案例者进行了解。业务逻辑绘制两张图表,分别显示城市空间库和其他数据仓库的信息(城市空间库单独绘制...
  • jsp页面规范写法

    千次阅读 2016-08-30 08:00:30
    页面整体布局应如下:引用一些java类。。 %> <!-- 放置css样式--> 引用css.jsp 引用该页面自己单独用的css <!-- 其他代码 --> 。。。。。 引用头部head.jsp <!-- 其他代码 --> 。。。。 引用尾部foot.jsp <!--...
  • java web 前端开发框架和流程

    千次阅读 2016-12-06 13:45:04
    1 通常 Java Web 开发框架 举个例子,对于广告系统的来说, 我们先不管一些job, by Ominent Shopper Helper" style="color:rgb(59,115,175); border:none!important; display:inline-block!important; float...
  • 前端网页页面优化

    千次阅读 2017-02-24 10:57:49
    前端优化是复杂的,针对方方面面的资源都有不同的方式。那么,前端优化的目的是什么 从用户角度而言,优化能够让页面加载得更快、对用户的操作响应得更及时,能够给用户提供更为友好的体验。 从服务商角度而言,...
  • springboot项目用jsp作为前端页面展示

    千次阅读 2019-05-31 13:24:17
    springboot项目用jsp作为前端页面展示 1、pom.xml文件配置依赖: <!--springboot内嵌tomcat对jsp的解析包--> <dependency> <groupId>org.apache.tomcat.embed</groupId> <artifactId>...
  • 继昨天的code review后,想尝试前端页面的include标签,之前一直是使用jquery.load(),但基于js的加载会存在网络延迟,若网络延迟很大,则用户体验会非常差。之前的写法: &lt;script type="text/...
  • 但遵守 AngularJS 的约定时,生产力会很高,对 Java 程序员友好。 2、AngularJS不利于SEO,因为所有内容都是动态获取并渲染生成的,搜索引擎没法爬取。 性能问题:AngularJS作为 MVVM 框架,因为实现了数据的双向...
  • 我要从数据库中多表查询,将数据展示在前端页面,首先是sql语句: &lt;select id="queryByCondition" parameterType="map" resultType="com.wit.bm.entity.ClassDetail"&...
  • 摘要:本文说明了微信前端页面开发的基本架构,说明了组成文件各自的详细结构,通过这几个文件的协同工作,微信小程序开发框架可以实现页面Page中视图层和逻辑层的统一。0. 简介根据之前开发者工具和开发框架简介的...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 15,814
精华内容 6,325
关键字:

java的前端页面的写法

java 订阅