@{

    Layout = null;

}

<html>

<head>

    <script type="text/javascript" src="~/scripts/jquery-1.10.2.min.js"></script>

    <meta name="viewport" content="width=device-width,height=device-height, minimum-scale=0.1">

    <style>

        img {

            text-align: center;

            position: absolute;

            margin: auto;

            top: ;

            right: ;

            bottom: ;

            left: ;

        }

        .overflowingVertical {

            cursor: zoom-out;

        }

        .shrinkToFit {

            cursor: zoom-in;

        }

        body {

            background-color: #;

            color: #eee;

            margin: ;

        }

    </style>

</head>

<body>

    <img src="@ViewBag.PicURL" alt="@ViewBag.PicURL" onload="initImg();" />

    <script>

        function initImg() {

            drawImage($("img"), document.body.clientWidth, document.body.clientHeight);

        }

        function drawImage(ImgD, FitWidth, FitHeight) {

            var image = new Image();

            image.src = ImgD.attr("src");

            if (image.width >  && image.height > ) {

                if (image.width / image.height >= FitWidth / FitHeight) {

                    if (image.width > FitWidth) {

                        ImgD.css("width", FitWidth);

                        ImgD.css("height", (image.height * FitWidth) / image.width);

                        $("img").attr("class", "shrinkToFit");

                        ImgD.css("margin-top", );

                    } else {

                        ImgD.css("width", image.width);

                        ImgD.css("height", image.height);

                    }

                } else {

                    if (image.height > FitHeight) {

                        ImgD.css("height", FitHeight);

                        ImgD.css("width", (image.width * FitHeight) / image.height);

                        $("img").attr("class", "shrinkToFit");

                        ImgD.css("margin-top", );

                    } else {

                        ImgD.css("width", image.width);

                        ImgD.css("height", image.height);

                    }

                }

            }

        }

        $("img").mousedown(function () {

            if (typeof $(this).attr("class") != "undefined") {

                $(this).toggleClass("shrinkToFit overflowingVertical");

                if ($(this).hasClass("overflowingVertical")) {

                    var img = new Image();

                    img.src = $(this).attr("src");

                    var imgWidth = img.width; //图片实际宽度

                    var imgHeight = img.height; //图片实际高度

                    drawImage($(this), imgWidth, imgHeight);

                }

                if ($(this).hasClass("shrinkToFit")) {

                    drawImage($("img"), document.body.clientWidth, document.body.clientHeight);

                }

            }

        });

    </script>

</body>

</html>

后台：

/// <summary>

        /// 图片自适应居中打开，非图片浏览器下载

        /// </summary>

        /// <param name="dirRelativePath">文件路径，包含文件名</param>

        /// <param name="fileName">文件名</param>

        /// <returns></returns>

        public ActionResult OpenPicture(string dirRelativePath, string fileName)

        {

            Regex regex = new Regex(@"\.jpg|\.bmp|\.png|\.gif|\.tiff");

            fileName = fileName.ToLower();

            var isMatch = regex.IsMatch(fileName);

            //图片

            if (isMatch)

            {

                ViewBag.PicURL = "/Home/DownLoad?dirRelativePath=" + dirRelativePath + "&fileName=" + fileName;

            }

            else

            {

                return RedirectToAction("DownLoad", "Home", new { dirRelativePath = dirRelativePath, fileName = fileName });

            }

            return View();

        }

        /// <summary>

        /// 下载附件

        /// </summary>

        /// <param name="dirRelativePath"></param>

        /// <param name="fileName"></param>

        /// <returns></returns>

        public ActionResult DownLoad(string dirRelativePath, string fileName)

        {

            string uploadPath = System.Configuration.ConfigurationManager.AppSettings["BPMAttachments"];

            string dirAbsolutePath = uploadPath + dirRelativePath;

            if (!System.IO.File.Exists(dirAbsolutePath))

            {

                return Content("提示：文件在磁盘上不存在");

            }

            //HttpContext.Response.AddHeader("content-disposition", "attachment;filename=" + fileName);

            //return File(dirAbsolutePath, "application/octet-stream");

            var contentType = MimeMapping.GetMimeMapping(fileName);

            HttpContext.Response.AddHeader("content-disposition", "inline;filename=" + fileName);

            return File(dirAbsolutePath, contentType);

        }

图片浏览 h5的更多相关文章

  1. 图片浏览（CATransition）转场动画

    Main.storyboard ViewController.m // //  ViewController.m //  8A04.图片浏览(转场动画) // //  Created by huan ...

  2. Android 高级UI设计笔记14：Gallery（画廊控件）之 3D图片浏览

    1. 利用Gallery组件实现 3D图片浏览器的功能,如下: 2. 下面是详细的实现过程如下: (1)这里我是测试性代码,我的图片是自己添加到res/drawable/目录下的,如下: 但是开发中不 ...

  3. 用CSS和第三方库来提升图片浏览体验

    你是否关注过浏览.点击图片这个微妙的过程,不同的图片展现.交互方式各带来什么样的观感?本文聚焦于图片浏览这个过程以及如何使用CSS3和第三方库来提升体验. 先看下Pinterest.Flickr等时下 ...

  4. 第17讲- UI常用组件之ImageView图片浏览

    第17讲 UI常用组件之ImageView图片浏览 二.图片浏览ImageView ImageView就是一个用来显示图片的视图: ImageView常见属性 常见属性 对应方法 说明 android ...

  5. [置顶] ios 一个不错的图片浏览分享框架demo

    demo功能:一个不错的图片浏览分享框架demo.iphone6.1 测试通过.可以浏览图片,保存,微博分享到新浪,腾讯,网易,人人等. 注:(由于各个微博的接口有时候会有调整,不一定能分享成功.只看 ...

  6. WPF 图片浏览 伪3D效果

    原文:WPF 图片浏览 伪3D效果 首先上效果图: 因项目要求,需要把图片以"好看"."炫"的效果展示出来,特地研究了一下WPF关于3D方面的制作,奈何最终成果 ...

  7. Ubuntu下几个命令行方式使用的图片浏览工具

    想找几个Ubuntu下可以以命令行方式使用的图片浏览工具. Google了一些资料,找到下面几个web: 1.pho:轻巧的命令行图片查看器 其中介绍了工具pho,其功能特点,见下面的转帖内容: ph ...

  8. 【MVC】快速构建一个图片浏览网站

    当抄完MusicStore时,你应该对MVC有一个比较清晰的认识了.接下来就需要做个网站来继续增加自己的知识了.那么,该做个什么网站呢.做个图片浏览网站吧,简单而实用. 简单设计 1.首先,页面中间是 ...

  9. iOS Swift WisdomScanKit二维码扫码SDK，自定义全屏拍照SDK，系统相册图片浏览，编辑SDK

    iOS Swift WisdomScanKit 是一款强大的集二维码扫码,自定义全屏拍照,系统相册图片编辑多选和系统相册图片浏览功能于一身的 Framework SDK [1]前言:    今天给大家 ...

随机推荐

  1. Execution failed for task':app;clean'

    Execution failed for task':app;clean' >Unable to delete directory:f:xxxxxbuild\output\apk当程序出先这个错 ...

  2. git的一些基本命令

    1.创建一个新的仓库:(选择一个合适的地方,创建一个空目录) $mkdir learngit //learngit是用git新建的一个目录 $cd learngit $pwd //pwd命令用于显示当 ...

  3. Dapper.Rainbow 简单使用

    一.  Dapper 简介        一个效率比较高的微型ORM.   二 . Dapper.Rainbow        Dapper的扩展,在这个扩展里面实现了 Dynamic 的 插入和更新 ...

  4. kali ssh服务连接问题，无法远程管理

    1.修改sshd_config文件,命令为:vi /etc/ssh/sshd_config 2.将#PasswordAuthentication no的注释去掉,并且将NO修改为YES 3.将#Per ...

  5. angularjs-1.3代码学习 模块

    花了点时间,阅读了下angularjs的源码.本次先从模块化开始. angular可以通过module的api来实现前端代码的模块化管理.跟define类似.但不具备异步加载脚本的功能.先从最基本的m ...

  6. nyoj_68:三点顺序（计算几何）

    题目链接 根据 AB*AC的值进行判断即可(ps,结果为0时不构成三角形) #include<iostream> #include<cstdio> #include<cs ...

  7. 利用Fiddler修改请求信息通过Web API执行操作(Action)实例

    本人微信和易信公众号: 微软动态CRM专家罗勇 ,回复261或者20170724可方便获取本文,同时可以在第一间得到我发布的最新的博文信息,follow me!我的网站是 www.luoyong.me ...

  8. Docker for windows10 配置镜像加速

    windows玩docker的时候,经常碰到这种问题: Error response from daemon: Get https://registry-1.docker.io/v2/: net/ht ...

  9. JS浏览器对象：window对象、History、Location对象、Screen对象

    一.JS浏览器对象-window 1.window对象 window对象是BOM的核心,window对象指当前的浏览器窗口 所有JavaScript全局对象.函数以及变量均自动成为window对象的成 ...

  10. Javascript跨域后台设置拦截

    子域名之间互相访问需要跨域 结论放在开头: 服务端必须设置允许跨域 客户端带cookie需要设置withCredentials 无论服务端是否允许跨域,该request都会完整执行 options预请 ...