Question

我在MVC中的文件上传工作正在运行但是我试图通过使用此处的示例来使设计更具引导性：

source-to-source compiler (aka transpiler)

这给了我想要的设计，但现在搞砸了我的上传。帖子被发送到控制器，但是当我看到文件还没有被发送时。在控制器上我得到了

public ActionResult UploadFile（HttpPostedFileBase file）＆lt;＆lt;＆lt; null在这里

以下是视图中的代码：

@using (Html.BeginForm("UploadFile", "Job", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
    <div class="input-group">
        <label class="input-group-btn">
            <span class="btn btn-primary">
                Browse <input type="file" style="display: none;" multiple>
            </span>
        </label>
        <input type="text" class="form-control" readonly>
    </div>

    <input class="btn btn-primary" type="submit" value="Send" />

    <h5><span class="label label-warning">@ViewBag.Message</span></h5>
}

我从该网页上使用过一些javascript，我想这个脚本是假设将文件添加到文件集中？所以他们被送回我看到的是：

用户通过点击浏览
选择文件
然后是名字文件显示在输入框
点击发送

但是，当我单击发送时，永远不会发送文件（没有收到错误）。我明显错过了什么吗？

过去常常使用：

@Html.TextBox("file", "", new { type = "file" })

以下是我所包含的JavaScript：

<script type='text/javascript'>
$(function() {

    // We can attach the `fileselect` event to all file inputs on the page
    $(document).on('change', ':file', function() {
        var input = $(this),
            numFiles = input.get(0).files ? input.get(0).files.length : 1,
            label = input.val().replace(/\\/g, '/').replace(/.*\//, '');
        input.trigger('fileselect', [numFiles, label]);
    });

    // We can watch for our custom `fileselect` event like this
    $(document).ready( function() {
        $(':file').on('fileselect', function(event, numFiles, label) {

            var input = $(this).parents('.input-group').find(':text'),
                log = numFiles > 1 ? numFiles + ' files selected' : label;

            if( input.length ) {
                input.val(log);
            } else {
                if( log ) alert(log);
            }

        });
    });

});

另外值得注意的是，如果我包含原始文件上传控件：

@Html.TextBox("file", "", new { type = "file" })

然后它可以正常工作，我似乎无法弄清楚，我唯一的选择可能是采用原始设计文件上传设计......

使用Bootstrap在MVC中上传文件

0 个答案: