master

分支 (1)

管理

管理

master

bootstrap-learn
/
day04
/
upload-modal.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文件上传</title>
    <style type="text/css">
        #intro_control {
            cursor: pointer;
            font-size: 12px;
            font-weight: bold;
        }

    </style>

    <script src="codeSeven-toastr/build/toastr.min.js"></script>
</head>
<body>
<div class="modal-header">
    <!-- 关闭按钮的代号&times -->
    <!-- 加上data-dismiss就有关闭效果了!点&times或者页面其它地方就可以关闭按钮了! -->
    <button id="close_btn" class="close" data-dismiss="modal" style="display: none">&times;</button>
    <div class="col-xs-4 col-sm-3">
        <h2>文件上传</h2>
    </div>
    <div class="col-xs-8 col-sm-9">
        <div id="intro_control">关于文件上传的介绍 <span id="intro_dis_icon"
                                                class="glyphicon glyphicon-chevron-down"></span></div>
        <p style="color: #969493;display: none;" id="intro">
            0.&ensp;<span style="color: #e44e4e;">若要上传文件，请先登录；</span> <br>
            1.&ensp;请注意，上传文件大小不能超过5GB大小；<br>
            2.&ensp;如是多个文档文件，请压缩成压缩包进行上传； <br>
            3.&ensp;请注意填写文件名，文件的简略介绍，给他人提供参考；<br>
            4.&ensp;注意："-&#45;&#45;请选择-&#45;&#45;"部分，你上传的文件所处的类别，由它决定；<br>
            5.&ensp;在上传文件途中点击"取消"会造成文件上传终止；<br>
            6.&ensp;在文件上传成功之后右上角会出现"x"点击关闭即可，也可点击取消进行关闭。 <br>
            7.&ensp;<span style="color: #e44e4e;">以下输入文件描述以及文件名时：一个中文等于两个字符，一个英文字母等于一个字符。 </span><br>
        </p>
    </div>


</div>
<div class="modal-body">

    <div class="row">
        <form role="form" style="font-family: 华文新魏;">
            <div class="form-group col-xs-offset-1 col-xs-3" style="padding-left: 0px;">
                <input id="fileDescribeName" name="fileDescribeName" class="form-control" type="text" placeholder="文件名(30个字符以内，勿输入空格)" onkeyup="javascript:checkFileDescribeName(this);" onmousedown="javascript:checkFileDescribeName(this);">
            </div>
            <span style="float:left; font-family: Georgia; font-size: 24px;" id="inputWordCheck">30</span>
            <div class="col-xs-offset-1 col-xs-2">
                <select class="form-control" id="level1" name="option1">
                    <option disabled selected>---请选择---</option>
                </select>
            </div>
            <div class="col-xs-2">
                <select class="form-control" id="level2" name="option2">
                    <option disabled selected>---请选择---</option>
                </select>
            </div>
            <div class="form-group col-xs-offset-1 col-xs-10" style="padding-left: 0px;">
                <!--style="overflow-y: scroll"-->
                <textarea class="form-control"
                          rows="3"
                          placeholder="请输入文件简略介绍（140字中文以内或者280个英文字符）"
                          onkeyup="javascript:checkFileDescribe(this);"
                          onmousedown="javascript:checkFileDescribe(this);"
                          id="fileDescribe"
                          name="fileDescribe"></textarea>
            </div>
            <div>
                还可以输入<span style="font-family: Georgia; font-size: 26px;" id="areaWordCheck">280</span>个字
            </div>
        </form>

    </div>
    <br>
    <div class="row">
        <!-- 样式1 -->
        <!--显示选中的名字-->
        <!--form-control使宽度等于100% 或者auto-->
        <input id='location' class="col-xs-offset-1 col-xs-6  file_loc" disabled>
        <input type="button" id="i-check" value="浏览" class="btn col-xs-offset-1 col-xs-2"
               onclick="$('#i-file').click();">
        <input type="file" name="file" id='i-file' onchange="$('#location').val($('#i-file').val());"
               style="display: none">
        <!-- <input type="file" name="file" id="file" style="display: none"/>
         <button class="btn btn-success fileinput-button" type="button">上传</button>-->

        <div class="col-xs-10 col-xs-offset-1">
            <div class="row">
                <br/>
                <span id="time"></span>
                <br/>
                <!--进度条-->
                <div class="col-xs-6"
                     style="padding-left: 0; padding-right: 0; margin-bottom: 0px;">
                    <div class="progress progress-striped active" style="display: none;">
                        <div id="progressBar" class="progress-bar"
                             role="progressbar" aria-valuemin="0" aria-valuenow="0"
                             aria-valuemax="100" style="width: 20%"></div>
                    </div>
                </div>

                <!-- 显示上传速度 -->
                <div id="showInfo" class="col-xs-4"></div>
                <br><br>
                <!-- 显示文件信息 -->
                <div id="showFieInfo" class="row">
                    <label name="upfileName"></label><br/>
                    <label name="upfileSize"></label><br/>
                    <label name="upfileType"></label><br/>
                </div>
                <input class="btn btn-primary" type="button" name="upload" value="上传"/>
                <input class="btn btn-primary" type="button" name="cancelUpload" value="取消"/>


            </div>

        </div>

    </div>
</div>
<div class="modal-footer">
    &copy blog.mzywucai.club
</div>
<!-- 使用javascript控制对话框的打开和关闭 -->
<script type="text/javascript">


    /*
     * toast-bottom-right表示下右、
     * toast-bottom-center表示下中、
     * toast-top-center表示上中等，更过位置信息请查看文档。
     */

    /*
    1  toastr.success('提交数据成功');
    2  toastr.error('Error');
    3  toastr.warning('只能选择一行进行编辑');
    4  toastr.info('info');
    */


    var cancelUploadBtn = $("input[name=cancelUpload]");

    // console.log(xhr);
    cancelUploadBtn.click(function () {
        // $('#upload-modal').modal('show');

        $('#upload-modal').modal('hide');

    });


</script>
</body>
</html>