Caricamento file non Rendering testo correttamente in Modal

Question

Sto utilizzando una modale in Twitter Bootstrap in ASP.NET MVC che consente all'utente di caricare un'immagine.

Sto usando un controllo di caricamento di file che può essere trovato qui: https://github.com/blueimp/jQuery-File-Upload

Il seguente è un frammento di codice che mostra il controllo di caricamento di file:

<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> 

C'è più codice dopo il tag </form> ma questa è la parte principale.

Quanto segue mostra il controllo del caricamento del file e la lettera "N" accanto ad esso. La lettera N è in realtà una stringa che dice "Nessun file scelto". Ma per qualche ragione sembra che ci sia qualcosa che si sovrappone all'intero controllo.

Qualcuno sa dove sto andando male?

Answer 1

Sembra che tu non abbia jquery.fileupload-ui.css sulla tua vista, perché non devi avere 'scegliere file' e 'nessun file scelto'. Ci deve essere solo il pulsante "Carica immagine".

In primo luogo assicuratevi di avere link per jquery.fileupload-ui.css sulla vostra vista quindi aggiungere btn classe al div che contiene ingresso. Se si dispone del foglio di stile, la classe fileinput-button deve essere stata sostituita da un altro foglio di stile. controllalo con firebug o con gli strumenti di sviluppo di Chrome.

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