.net 2.0: contrôle image viewer / uploader

Commenter

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

S'inscrire maintenant

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.

Du même auteur (gldfdp)