需要春季引导帮助

时间:2018-11-02 07:30:31

标签: html css

这个论坛的新手。因此,对不起,如果我缺少任何有关需要帮助的信息。让我的网页作为带有角的弹簧靴运行。需要帮助。需要在一行中具有“浏览”按钮(用于选择/选择要上传的文件)和“提交”按钮(用于上传文件),但是两者应该分开。提交按钮应位于同一行/行的最右端,与附件图像中的“浏览”按钮旁边不同。

这是我正在使用的代码:

    <div class="row">

        <div class="form-group">

        <input type="file" name="img[]" class="file" style="display: none">
        <div class="input-group col-xs-6 text-left">
        <span class="input-group-addon"><i
        class="glyphicon glyphicon-picture"></i></span> <input type="text"
        class="form-control input-lg" disabled
        placeholder="Upload xxxx xlsx format file"> <span
        class="input-group-btn">
        <button class="browse btn btn-primary input-lg" type="button">
            <i class="glyphicon glyphicon-search"></i> Browse

        </button>                           
        </span>                                     

        <input type="submit" class="btn btn-info btn-lg pull-right"
            align="right" value="Submit" /> 
        </div>                      
    </div>  


    <div class="form-group">

    <input type="file" name="img[]" class="file" style="display: none">
    <div class="input-group col-xs-6">
    <span class="input-group-addon"><i
    class="glyphicon glyphicon-picture"></i></span> <input type="text"
    class="form-control input-lg" disabled
    placeholder="Upload xxxx xlsx format file"> <span
    class="input-group-btn">
    <button class="browse btn btn-primary input-lg" type="button">
    <i class="glyphicon glyphicon-search"></i> Browse
    </button>
    </span>
    <input type="submit" class="btn btn-info btn-lg pull-right"
    align="right" value="Submit" />

    </div>

    </div>
    </div>
    </div>
    </div>
    </div>
    </body>
    </html>

![enter image description here][1]


  [1]: https://i.stack.imgur.com/t7ZfH.jpg

and here is the complete HTML tag from my JSP file
    <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <%@ page isELIgnored="false"%>
    <title>xxxxx </title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script
    src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4  
    /angular.min.js"></script>   
    <script src="././javascript/dm.js"></script>
    <link rel="stylesheet"
        href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7   
    /css/bootstrap.min.css">
    <script
        src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"> 
    </script>
    <script
        src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7`  
    /js/bootstrap.min.js"></script>`
    <link
        href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker
    /1.5.0/css/bootstrap-datepicker.css"
        rel="stylesheet">
    <script
        src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker
    /1.5.0/js/bootstrap-datepicker.js"></script>
    <script
        src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4
    /js/i18n/defaults-zh_TW.min.js"></script>
    <!-- <script src="././javascript/week.js"></script> -->
    </head>
    <script type="text/css">
    .file {
      visibility: hidden;
      position: absolute;
    }

    </script>
    <script type="text/javascript">
        $(document).on('click', '.browse', function() {
            alert("work in progress No file will be saved");
            var file = $(this).parent().parent().parent().find('.file');
            file.trigger('click');
        });
        $(document).on(
                'change',
                '.file',
                function() {
                    alert("work in progress No file will be saved");
                    $(this).parent().find('.form-control').val(
                            $(this).val().replace(/C:\\fakepath\\/i, ''));
                });
        var dmId = "${dmId}";
        function dateChange(newdate) {
            var scope =   
        angular.element(document.getElementById('dashboard'))
                    .scope();
            scope.dateChange(newdate);
        }

        // When the document is ready
        $(document).ready(function() {

            $('#dpeDate, #depCal').datepicker({
                minViewMode : 1,
                autoclose : true,
                format : 'MM, yyyy'
            }).datepicker('setDate', 'today');

            var date = "";
        });
        $(".dropdown-menu li a").click(
                function() {

                    $(this).parents(".dropdown").find('.btn').html(
                            $(this).text() + ' <span class="caret">
         </span>');
                    $(this).parents(".dropdown").find('.btn').val(
                            $(this).data('value'));
                });
    </script>
    <body>
        <div ng-app="myApp" ng-controller="myCtrl" id="dashboard">
            <!--        {{dmId}}
     -->

            <c:set var="weekList">document.get("dpe").value</c:set>
            <div class="container">
                <p>
                    <input type="button" class="btn btn-success btn-lg 
      pull-right"
                        onclick="location.href='/AdMetrics/welcome';" 
       value="Home" />
                </p>

                <div class="page-header">
                    <h1>
                        Welcome to xxxx | <b>xxxx</b>
                    </h1>
                    <div class="row">
                        <div class="col-lg-5"></div>
                        <div class="col-lg-3">
                            <div class="input-group">
                                <div class="form-group">
                                    <div id="wait"
                                        style="display: none; width: 69px; 
     height: 89px; position: absolute; top: 50%; left: 30%; padding: 2px;">
                                        <img src='demo_wait.gif' 
     width="200" height="200" /> <br>&nbsp;&nbsp;Loading..
                                    </div>

                                    <div class='input-group date' 
     id="dpeDate">
                                        <input class="form-control" 
      type="text" id="selDate"
      onchange="dateChange(this.value);"

      placeholder="click to Select Month & Year"> <span
    class="input-group-addon"> <span
    class="glyphicon glyphicon-calendar"></span>
                                        </span>
                                    </div>
                                </div>
                                <div class="col-lg-4"></div>
                            </div>
                        </div>
                    </div>

                    <div class="row">

                        <div class="form-group">

        <input type="file" name="img[]" class="file" style="display: none">
                            <div class="input-group col-xs-6 text-left">
                                <span class="input-group-addon"><i
        class="glyphicon glyphicon-picture"></i></span> <input type="text"
                        class="form-control input-lg" disabled
                    placeholder="Upload xxxx xlsx format file"> <span
                class="input-group-btn">
            <button class="browse btn btn-primary input-lg" type="button">
            <i class="glyphicon glyphicon-search"></i> Browse

            </button>   </span>                             


            <input type="submit" class="btn btn-info btn-lg pull-right"
                                    align="right" value="Submit" /> 
                                </div>                      
                            </div>  




                        <div class="form-group">

        <input type="file" name="img[]" class="file" style="display: none">
                            <div class="input-group col-xs-6">
                                <span class="input-group-addon"><i
        class="glyphicon glyphicon-picture"></i></span> <input type="text"
        class="form-control input-lg" disabled
        placeholder="Upload xxxx xlsx format file"> <span
        class="input-group-btn">
        <button class="browse btn btn-primary input-lg" type="button">
        <i class="glyphicon glyphicon-search"></i> Browse
                                    </button>
                                </span>
            <input type="submit" class="btn btn-info btn-lg pull-right"
                                    align="right" value="Submit" />

                            </div>

                        </div>

                    </div>
                </div>
            </div>
        </div>
    </body>
    </html>

0 个答案:

没有答案