码迷,mamicode.com
首页 > 其他好文 > 详细

在客户端展示本地图片

时间:2017-08-07 11:47:52      阅读:126      评论:0      收藏:0      [点我收藏+]

标签:alt   用户   路由设置   本地图片   new   combine   hid   amt   oid   

当用户在客户端上请求本地图片的时候,我们需要把本地的图片展示。

1.在控制器端把图片转换成流的形式

2.前台请求控制器端的方法,输出图片

控制器端:

技术分享
 public class ImageController : Controller {
        private static readonly string PATH = @"C:\Users\xiechongxi\Desktop\";
        //这个key就是图片的名字和后缀名
        public ActionResult GetImage(string key) {
            //path就包含了路径和文件名,后缀
            string path = Path.Combine(PATH, key);
            //ext是用GetExtension方法获取路径的后缀名
            string ext = System.IO.Path.GetExtension(path);
            //判断这个路径是否有图片
            if (System.IO.File.Exists(path)) {
                //通过http返回一个image类型的文件
                using (FileStream fs = System.IO.File.OpenRead(path)) {
                    return File(StreamToBytes(fs), "image/" + ext);
                }
            }
            else {
                return null;
            }
        }

        private byte[] StreamToBytes(Stream stream) {
            byte[] bytes = new byte[stream.Length];
            stream.Read(bytes, 0, bytes.Length);
            // 设置当前流的位置为流的开始
            stream.Seek(0, SeekOrigin.Begin);
            return bytes;
        }
    }
Cotroller

前台获取:

技术分享
//image表示的是ImageCotroller,@scene.LocalKey表示的是文件名,包含后缀名
<img src="/image/@scene.LocalKey"/>
Html

是不是感觉Html里面很奇怪,<img src="/image/40ed9c2c-1d1c-470c-a760-7f860e9c309c.jpg">这种形式

实际上为了美观更改了路由,可以参考一下以下路由设置

技术分享
public static void RegisterRoutes(RouteCollection routes) {
            routes.IgnoreRoute("{resource}.axd/{*pathInfo}");

            routes.MapRoute(
                "Image",//路由名称
                "Image/{key}",
                new { controller = "Image", action = "GetImage" }
            );

            routes.MapRoute(
                "Default", // 路由名称
                "{controller}/{action}/{id}", // 带有参数的 URL
                new { controller = "Follow", action = "Index", id = UrlParameter.Optional } // 参数默认值
            );

        }
路由设置

新添加的路由一定要放在默认路由上面,这里有个优先级,我也就不多说。

 

流程是这样的img标签里面的src后面这个地址,是请求ImageCotroller中的GetImage方法(路由设置效果),并且传递参数(文件名和后缀),然后GetImage返回的是文件。

 

 


注:此篇随笔只供参考使用,而且也有很多小瑕疵,最主要的不是代码,逻辑才是最重要的。

在客户端展示本地图片

标签:alt   用户   路由设置   本地图片   new   combine   hid   amt   oid   

原文地址:http://www.cnblogs.com/Joker37/p/7297773.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!