css – 文件上传不能在模态中正确呈现文本

我在ASP.NET MVC的Twitter Bootstrap中使用Modal,允许用户上传 Image.

我正在使用文件上传控件,可在此处找到：https://github.com/blueimp/jQuery-File-Upload

以下是显示文件上传控件的代码片段：

<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实际上是一个表示“没有选择文件”的字符串.但由于某种原因,似乎有一些东西与整个控件重叠.

有谁知道我哪里出错了？

解决方法

看来你的视图上没有jquery.fileupload-ui.css,因为你不能有’选择文件’和’没有选择文件’.必须只有“上传图片”按钮.

首先确保在视图上链接到jquery.fileupload-ui.css然后将btn类添加到包含输入的div.如果您有样式表,则fileinput-button类必须已被其他样式表覆盖.用firebug或者检查一下
Chrome开发者工具.

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

原文地址：https://www.jb51.cc/css/215741.html