Aperçu de l'image avant de télécharger à l'aide de AsynFileUpload

Il est toujours agréable d'afficher l'aperçu de l'image qui doit être chargé par l'utilisateur.

Après beaucoup de recherches, j'ai trouvé que le savoir de téléchargement HTML input type = « file »... n'est pas utile car il n'expose pas suffisamment événements du côté serveur.Dans ce scénario, le meilleur contrôle est Ajax control AjaxFileUpload du ToolKit, qui a suffisamment de serveur manifestations et événements du côté client.

Après que le fichier est téléchargé au lieu de les enregistrer dans l'emplacement sur le serveur plutôt HttpHandler peut être utilisé que peut écrire l'image téléchargée directement dans la réponse.Si aucun stockage et moins maux de tête.

Ce qui a été fait.

1) Utiliser AjaxFileUpload pour télécharger le fichier.
2) Stocker le fichier dans l'objet de session.
3) Utiliser l'objet de session dans le gestionnaire d'événements.Définir la source du contrôle image au gestionnaire d'événements.

Dans. aspx.cs

chaîne publique readonly static STORED_IMAGE = « SessionImage ».

protégé void OnAsyncFileUploadComplete (object sender, AsyncFileUploadEventArgs e)
{
Si (asyncFileUpload.PostedFile! = null)
{
Fichier de HttpPostedFile = asyncFileUpload.PostedFile ;

Byte [] données = ReadFile(file) ;
//Store l'image lors de la session.
Session [STORED_IMAGE] = données.
}
}

privé byte [] ReadFile (fichier HttpPostedFile)
{
Byte [] données = nouvelle Byte[file.ContentLength].
file.InputStream.Read (données, 0, file.ContentLength).
renvoyer les données.
}

En .aspx

Remarque : Utilisez le randomnumber dans la chaîne de requête du gestionnaire d'ailleurs, le navigateur met en cache de la première image et retourne la même image encore et encore.

Le gestionnaire

Remarque utiliser le IRequiresSessionState pour les variables de session dans le gestionnaire d'accès.

public class ImageRequestHandler : IHttpHandler, IRequiresSessionState
{
public void ProcessRequest (HttpContext context)
{
Context.Response.Clear() ;

Si (context.Request.QueryString.Count! = 0)
{
//Get l'image stockée et écriture dans la réponse.
var storedImage = context.Session[_Default.STORED_IMAGE] comme byte [].
Si (storedImage! = null)
{
Image image = GetImage(storedImage) ;
Si (image! = null)
{
Context.Response.ContentType = « image/jpeg ».
image.Save (context.Response.OutputStream, ImageFormat.Jpeg).
}
}
}
}

privé Image GetImage(byte[] storedImage)
{
flux de var = nouvelle MemoryStream(storedImage) ;
Retour à Image.FromStream(stream).
}

public bool IsReusable
{
get {return false;}
}
}

Dans web.config

Vous trouverez le code source complet lié.

ImagePreviewUploadDemo (40887-12539-ImagePreviewDemo.rar)