.net 2.0: contrôle image viewer / uploader

Soyez le premier à donner votre avis sur cette source.

Snippet vu 16 080 fois - Téléchargée 17 fois

Contenu du snippet

Ceci est un contrôle asp.net permettant: 1) de lister les images présentes dans un répertoire et de les afficher sous forme de diaporama 2) d'uploader une image dans ce même répertoire

Source / Exemple :


using System;
using System.Collections.Generic;
using System.Text;
using System.Web.UI.WebControls;
using System.IO;

namespace gldfdp.Web.UI
{
    /// <summary>
    /// An online Image Viewer
    /// </summary>
    public class ImageUploader : CompositeControl
    {

        /// <summary>
        /// Called by the ASP.NET page framework to notify server controls that use composition-based implementation to create any child controls they contain in preparation for posting back or rendering.
        /// </summary>
        protected override void CreateChildControls()
        {
            Controls.Clear();
            CreateControlHierarchy();
            ClearChildViewState();
        }

        private string _Titre = "Charger une image";

        /// <summary>
        /// Gets or sets the titre.
        /// </summary>
        /// <value>The titre.</value>
        protected string Titre
        {
            get { return _Titre; }
            set { _Titre = value; }
        }

        private string _ImageDirectory = "~/images";

        /// <summary>
        /// Gets or sets the image directory.
        /// </summary>
        /// <value>The image directory.</value>
        public string ImageDirectory
        {
            get { return _ImageDirectory; }
            set { _ImageDirectory = value; }
        }

        private FileUpload _fileUpload;
        private Button _validate;

        /// <summary>
        /// Creates the control hierarchy.
        /// </summary>
        private void CreateControlHierarchy()
        {
            _fileUpload = new FileUpload();
            this.Controls.Add(_fileUpload);

            _validate = new Button();
            _validate.Text = "Charger";
            _validate.Click += new EventHandler(_validate_Click);
            _validate.Style.Add("margin-left", "5px");
            _validate.Style.Add("margin-right", "5px");
            this.Controls.Add(_validate);

        }

        void _validate_Click(object sender, EventArgs e)
        {
            if (_fileUpload.PostedFile.ContentLength > 0)
            {
                _fileUpload.SaveAs(Path.Combine(Page.Server.MapPath(ImageDirectory), _fileUpload.FileName));
            }

        }

        /// <summary>
        /// Writes the <see cref="T:System.Web.UI.WebControls.CompositeControl"></see> content to the specified <see cref="T:System.Web.UI.HtmlTextWriter"></see> object, for display on the client.
        /// </summary>
        /// <param name="writer">An <see cref="T:System.Web.UI.HtmlTextWriter"></see> that represents the output stream to render HTML content on the client.</param>
        protected override void Render(System.Web.UI.HtmlTextWriter writer)
        {

            Page.ClientScript.RegisterStartupScript(Page.GetType(), "imageSelect", GetScript(), true);

            writer.AddStyleAttribute("border", "solid 1px black");
            writer.RenderBeginTag("div");

            writer.RenderBeginTag("h3");
            writer.Write("Liste des images déjà existantes");
            writer.RenderEndTag();

            writer.RenderBeginTag("table");
            writer.RenderBeginTag("tr");

            writer.RenderBeginTag("td");
            writer.AddStyleAttribute("border", "solid 1px silver");
            writer.AddStyleAttribute("width", "300px");
            writer.AddStyleAttribute("height", "200px");
            writer.AddStyleAttribute("margin", "5px");
            writer.AddStyleAttribute("overflow", "hidden");
            writer.AddStyleAttribute("text-align", "center");
            writer.AddStyleAttribute("vertical-align", "middle");
            writer.AddAttribute("id", "imgviewer");
            writer.RenderBeginTag("div");
            writer.RenderEndTag();
            writer.RenderEndTag();//td

            writer.RenderBeginTag("td");
            writer.AddStyleAttribute("height", "200px");
            writer.AddStyleAttribute("overflow-y", "scroll");
            writer.AddStyleAttribute("width", "90px");
            writer.RenderBeginTag("div");
            writer.RenderBeginTag("table");

            List<string> _files = new List<string>(Directory.GetFiles(Page.Server.MapPath(ImageDirectory), "*.jpg"));
            _files.AddRange(Directory.GetFiles(Page.Server.MapPath(ImageDirectory), "*.gif"));
            _files.AddRange(Directory.GetFiles(Page.Server.MapPath(ImageDirectory), "*.png"));

            foreach (string _file in _files)
            {
                writer.RenderBeginTag("tr");
                writer.RenderBeginTag("td");

                writer.AddStyleAttribute("width", "64px");
                writer.AddStyleAttribute("height", "64px");
                writer.AddAttribute("onClick", "imageSelect(this)");
                writer.AddAttribute("src", ResolveClientUrl(Path.Combine(ImageDirectory, (new FileInfo(_file)).Name)));
                writer.RenderBeginTag("img");

                writer.RenderEndTag();
                writer.RenderEndTag();
                writer.RenderEndTag();

            }
            writer.RenderEndTag();//table

            writer.RenderEndTag();//td
            writer.RenderEndTag();//tr
            writer.RenderEndTag();//table
            writer.RenderEndTag();//div

            writer.RenderBeginTag("h3");
            writer.Write(Titre);
            writer.RenderEndTag();

            base.Render(writer);

            writer.RenderEndTag();
        }

        /// <summary>
        /// Gets the script.
        /// </summary>
        /// <returns></returns>
        private string GetScript()
        {
            string script = @"function imageSelect(img)
            {
                var images=img.parentNode.parentNode.parentNode.getElementsByTagName('img');
                for(i=0;i<images.length;i++)
                    images[i].style.border = 'none';

                img.style.border = 'solid 2px black';
                document.getElementById('imgviewer').innerHTML='<img src=""'+img.src+'"" style=""width:300px;height:200px""/>';
            }";

            return script;
        }

    }
}

Conclusion :


Exemple d'utilisation:

<%@ Register Assembly="gldfdp" Namespace="gldfdp.Web.UI" TagPrefix="cc1" %>
<cc1:ImageUploader runat="server" ID="iu1" Height="200px" />

N'hésitez pas à poster vos remarques/questions

A voir également

Ajouter un commentaire

Commentaires

venantedj
Messages postés
1
Date d'inscription
vendredi 20 avril 2007
Statut
Membre
Dernière intervention
13 avril 2008
-
pas mal je t'encourage
hisham91
Messages postés
61
Date d'inscription
lundi 26 avril 2004
Statut
Membre
Dernière intervention
23 janvier 2013
-
LoL... pas mal ton bout de code ;)
gldfdp
Messages postés
91
Date d'inscription
lundi 30 juin 2003
Statut
Membre
Dernière intervention
21 février 2008
-
Pas besoin de zip, tu copies colles le code ci-dessus dans un fichier .cs que tu mets dans ton App_Code. Je vais pas faire un zip d'un seul fichier...
cs_Pedrosa
Messages postés
43
Date d'inscription
lundi 3 juillet 2006
Statut
Membre
Dernière intervention
2 juin 2008
-
Ce serait gentil de nous faire un ZIP.

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.