文件上传不能在Modal中正确渲染文本

我在ASP.NET MVC的Twitter Bootstrap中使用Modal，它允许用户上传图像。文件上传不能在Modal中正确渲染文本

我使用的可以在这里找到一个文件上传控件：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实际上是一个字符串，表示“没有选择文件”。但由于某种原因，整个控制系统看起来有些重叠。

enter image description here

有谁知道我要去的地方错了吗？

来源

2013-04-28 Subby

您可以在Firefox的Firefox或Developer工具中使用firebug来检查页面上是否有'jquery.fileupload-ui.css'。 – 2013-05-03 15:56:28

您的模态内容是否在iframe中？ – HerrSerker 2013-05-08 10:53:02

不是它不在iFrame中。 – Subby 2013-05-14 10:51:39

看来你还没有jquery.fileupload-ui.css在你看来，因为你不能有'选择文件'和'没有选择文件'。必须有“上传图像”按钮。

enter image description here

首先确保你有你的观点链接jquery.fileupload-ui.css然后btn类添加到包含输入的股利。如果您有样式表，则fileinput-button类必须已被其他样式表覆盖。通过萤火虫或 Chrome开发者工具进行检查。

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

来源

2013-05-02 13:28:03

啊好吧，这是有道理的。当我回家时，我会尽快尝试。 – Subby 2013-05-14 10:51:21

文件上传不能在Modal中正确渲染文本

回答

相关问题