file_page.hbs 4.33 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">
            <form class="form-horizontal" method='post' action='/files/upload' enctype="multipart/form-data">
                <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" name="file" id="fileInput" class="btn btn-default btn-block">
                        <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>文件名</th>
                                <th>文件大小</th>
                                <th>上传时间</th>
                                <th>上传人</th>
                            </tr>
                            <tr>
                                <td>你懂的HD1080p.avi</td>
                                <td>3.7G</td>
                                <td>2017-10-19</td>
                                <td>迪迦奥特曼</td>
                            </tr>
                            <tr>
                                <td>你懂的HD1080p.avi</td>
                                <td>3.7G</td>
                                <td>2017-10-19</td>
                                <td>迪迦奥特曼</td>
                            </tr>
                            <tr>
                                <td>你懂的HD1080p.avi</td>
                                <td>3.7G</td>
                                <td>2017-10-19</td>
                                <td>迪迦奥特曼</td>
                            </tr>
                            <tr>
                                <td>你懂的HD1080p.avi</td>
                                <td>3.7G</td>
                                <td>2017-10-19</td>
                                <td>迪迦奥特曼</td>
                            </tr>
                            <tr>
                                <td>你懂的HD1080p.avi</td>
                                <td>3.7G</td>
                                <td>2017-10-19</td>
                                <td>迪迦奥特曼</td>
                            </tr>
                            <tr>
                                <td>你懂的HD1080p.avi</td>
                                <td>3.7G</td>
                                <td>2017-10-19</td>
                                <td>迪迦奥特曼</td>
                            </tr>
                        </table>
                    </div>
                </div>
            </form>
        </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>