file_page.hbs 3.27 KB
<div class="pageheader">
    <div class="media">
        <div class="pageicon pull-left">
            <i class="fa fa-th-list"></i>
        </div>
        <div class="media-body">
            <ul class="breadcrumb">
                <li><a href=""><i class="glyphicon glyphicon-home"></i></a></li>
                <li>静态资源</li>
            </ul>
            <h4>活动上传</h4>
        </div>
    </div>
    <!-- media -->
</div>
<!-- pageheader -->
<div class="contentpanel">
    <div class="row">
        <div class="col-sm-12">
            <div class="form-horizontal">
                <div class="form-group col-sm-12">
                    <label class="control-label col-sm-1">上传地址:</label>
                    <div class="input-group col-sm-5">
                        <span class="input-group-addon">http://localhost:9000/</span>
                        <input type="text" class="form-control col-sm-10" placeholder="例:files/page">
                    </div>
                </div>
                <div class="form-group col-sm-12">
                    <label class="control-label col-sm-1">上传文件:</label>
                    <div class="input-group col-sm-3">
                        <input type="file" accept="application/x-zip-compressed" name="file" id="fileInput" class="btn btn-default btn-block">
                        <p class="form-control-static">注:仅支持zip格式</p>
                        <button id="upload" class="btn btn-primary btn-block">上传</button>
                    </div>
                </div>
                <div class="form-group col-sm-12">
                    <label class="control-label col-sm-1">上传记录:</label>
                    <div class="input-group col-sm-11">
                        <table class="table table-bordered table-hover">
                            <tr>
                                <th style="text-align:center;">文件路径</th>
                                <th style="text-align:center;">文件大小</th>
                                <th style="text-align:center;">文件格式</th>
                                <th style="text-align:center;">上传时间</th>
                            </tr>
                            {{#if fileList}}
                            {{#fileList.items}}
                            <tr>
                                <td>{{key}}</td>
                                <td>{{fsize}}</td>
                                <td>{{mimeType}}</td>
                                <td>{{putTime}}</td>
                            </tr>
                            {{/fileList.items}}
                            {{/if}}
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    $('#upload').on('click', function() {
        var formData = new FormData();
        var file = $('#fileInput').prop('files')[0];

        formData.append('file', file);
        
        $.ajax({
            type: 'POST',
            url: '/files/upload',
            cache: false,
            data: formData,
            dataType: 'json',
            processData: false,
            contentType: false,
            success: function(result) {
                console.log(result);
            }
        });
    });
</script>