文件上傳不能在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中正確渲染文本

回答

相關問題