ASP.NET AJAX Control Toolkit - Modifier l'apparence du contrôle AsyncFileUpload?

Question

J'ai essayé de poser cette question sur les forums ASP.NET mais personne n'avait de solution. Je commence à penser qu'il n'y en a pas.

Ce que je voudrais faire est de personnaliser l'aspect et la taille du bouton 'Parcourir' du contrôle AsyncFileUpload tout en cachant sa zone de texte. Alternativement, cacher complètement AsyncFileUpload et appeler sa fonctionnalité à partir d'un bouton dont je peux personnaliser l'apparence serait aussi magnifique.

Answer 1

Peut-être que c'est un peu dans le champ gauche, mais peut-être une meilleure solution serait d'utiliser une solution basée sur Flash. Il y en a quelques-uns qui sont spécialement conçus pour ASP.NET et qui ont apparemment une bonne quantité de personnalisation.

• Multiple File Upload With Progress Bar Using Flash
• ASP.NET Flash File Uploader

Ce n'est pas une solution à votre problème directement, mais une autre façon d'obtenir des résultats similaires.

Answer 2

Cette méthode a fonctionné pour moi.

http://www.shauninman.com/archive/2007/09/10/styling_file_inputs_with_css_and_the_dom

Answer 3

Vous pouvez toujours utiliser la solution qui SLaks offert même pour le contrôle AsyncFileUpload.

Le code:

<div id="fileUploadDiv"> 
    <asp:AsyncFileUpload ID="AsyncFileUpload1" runat="server" /> 
</div> 

sera rendu ainsi:

<div id="fileUploadDiv">    
    <span id="MainContent_AsyncFileUpload1">    
        <input type="hidden" name="ctl00$MainContent$AsyncFileUpload1$ctl00" id="MainContent_AsyncFileUpload1_ctl00" />    
        <div id="MainContent_AsyncFileUpload1_ctl01" name="MainContent_AsyncFileUpload1_ctl01">    
            <input name="ctl00$MainContent$AsyncFileUpload1$ctl02" type="file" id="MainContent_AsyncFileUpload1_ctl02" id="MainContent_AsyncFileUpload1_ctl02" onkeydown="return false;" onkeypress="return false;" onmousedown="return false;" style="width:355px;" />    
        </div>    
    </span>    
</div> 

conséquent, en utilisant un sélecteur CSS entrée #fileUploadDiv [type = fichier] vous pouvez modifier le style de la AsyncFileUpload contrôle de la même manière que vous le faites avec < d'entrée de type standard = 'fichier' élément >.

Je blogué sur cette solution dans plus de détails here.

Answer 4

En réglant la opacity du contrôle, et en ajoutant d'autres commandes avec la même taille que vous pouvez maintenir ce que vous voulez voir.

S'il vous plaît trouver cette référence:

http://blog.rptea.com/post/Customize-AsyncFileUpload-(MS-ajax-control-toolkit-)-cross-browser-too.aspx