文件上传未在模态中正确呈现文本

Question

我在 ASP.NET MVC 的 Twitter Bootstrap 中使用模态，它允许用户上传图像。

我正在使用可以在这里找到的文件上传控件：https://github.com/blueimp/jQuery-File-Upload

以下是显示文件上传控件的sn-p代码：

<div class="modal-body">
<form id="imageUpload" action="@Url.Content("~/Listing/ReturnBase64Data")" method="POST" enctype="multipart/form-data">
    @Html.HiddenFor(m => m.ListingGuid)
    <div class="fileupload-buttonbar">
        <div class="progressbar fileupload-progressbar" id="progressbar">
        </div>
            <div class="fileinput-button">Upload Image
                <input type="file" id="fileupload" name="image"/>
            </div>

    </div>
    @if (Model.SelectedImage == null)
    {
        <div id="show_image">
        </div>
    }
    else
    {
        <div id="show_image">
            <img style="height:200px ! important;" src="data:image/png;base64, @Model.SelectedImage.Content"/>
        </div>
    }

    <div id="show_error" >
    </div>
</form>

</form> 标签后面还有更多代码，但这是主要部分。

下面显示了文件上传控件及其旁边的字母“N”。字母 N 实际上是一个表示“未选择文件”的字符串。但由于某种原因，似乎有一些东西与整个控件重叠。

有人知道我哪里出错了吗？

Answer 1

您似乎没有jquery.fileupload-ui.css，因为您不能有“选择文件”和“未选择文件”。必须只有“上传图片”按钮。

首先确保您的视图上有指向jquery.fileupload-ui.css 的链接，然后将btn 类添加到包含输入的div。如果您有样式表，fileinput-button 类必须已被其他样式表覆盖。通过萤火虫检查或 Chrome 开发者工具。

   <div class="btn fileinput-button">Upload Image
     <input type="file" id="fileupload" name="image"/>
   </div>