MVC 图片预览-阿里云开发者社区

开发者社区> 芝麻软件> 正文

MVC 图片预览

简介: 1.页面cshtml 图片一 ...
+关注继续查看

 

1.页面cshtml

<form name="frmInput" id="frmInput" method="post" action="@Url.Action(ViewContext.RouteData.Values["Action"].ToString())" enctype="multipart/form-data" >
   <div class="form-group col-md-6">
    <label class="control-label col-md-4">
        图片一
    </label>
    <div class="col-md-8 input-group">
        <ul class="list-unstyled">
            <li style="float: left; width: 180px;position:relative;">
                <img src="@Url.Content(Model.MDetailImageUrl)" alt="图片" width="140" />
                <input class="input_file" id="TDetailImageUrl" type="file" name="TDetailImageUrl"  tid="5" onchange="ImagePreview(this)" />
            </li>
        </ul>
    </div>
</div>
<div class="form-group col-md-6">
    <label class="control-label col-md-4">
        图片二
    </label>
    <div class="col-md-8 input-group">
        <ul class="list-unstyled">
            <li style="float: left; width: 180px;position:relative;">
                <img src="@Url.Content(Model.MDetailImageUrl)" alt="图片" width="140" />
                <input class="input_file" id="MDetailImageUrl" type="file" name="MDetailImageUrl"  tid="6" onchange="ImagePreview(this)" />
            </li>
        </ul>
    </div>
</div>
<input type="button" value="保存" onclick="Input.Save(this)" class="btn-8" />
</from>

2.脚本提交

路径:@Html.Hidden("ImagePreviewUrl", Url.Action("ImagePreview"))

//图片预览
    function ImagePreview(e) {
        if ($(e).val() == "") {
            alert("请选择一个图片文件,再点击上传。");
            return;
        }

        $(e).closest("form").ajaxSubmit({
            url: $("#ImagePreviewUrl").val() + "?name=" + $(e).attr("name"),
            success: function (data, status) {
                if (status == "success" && data != "") {
                    $(e).parent().children("img").attr("src", data);
                }
                else {
                    alert("图片格式不对");
                }
            }
        });
    }

3. 控制器方法

ImagesAPPI.PreviewDataForSingle为自定义方法,返回的是base64数据

public string ImagePreview(string name)
        {
            int fileIndex = 0;
            string result="";
            if (Request.Files.Count > 0)
            {
                for (int i = 0; i < Request.Files.Count; i++)
                {
                    if (!string.IsNullOrWhiteSpace(Request.Files[i].FileName))
                    {
                        string inputName = Request.Files.AllKeys[i];
                        if (!string.IsNullOrWhiteSpace(inputName) && name == inputName)
                        {
                            fileIndex = i;
                            break;
                        }
                    }
                }
                result = ImagesAPPI.PreviewDataForSingle(Request.Files[fileIndex], 150, 150); 
            }
            return result;
        }

 PreviewDataForSingle静态方法

/// <summary>
        /// 上传图片预览
        /// </summary>
        /// <param name="files">文件数据</param>
        /// <param name="width">宽度</param>
        /// <param name="height">高度</param>
        /// <returns>返回图片预览数据</returns>
        public static string PreviewDataForSingle(HttpPostedFileBase file, int width, int height)
        {
            if (file.ContentLength > 0 && file.ContentType.IndexOf("image/") >= 0)
            {
                return "data:image/jpeg;base64," + Convert.ToBase64String(ResizeImg(file.InputStream, width, height).GetBuffer());
            }

            return "";
        }

 

附:使用图片路径预览

/// <summary>
        /// 图片转为base64编码
        /// </summary>
        /// <param name="Imagefilename">图片绝对路径</param>
        /// <returns></returns>
        public static string ImgToBase64String(string Imagefilename)
        {
            if(string.IsNullOrWhiteSpace(Imagefilename)) return "";
            return "data:image/jpeg;base64," + Convert.ToBase64String(System.IO.File.ReadAllBytes(Imagefilename)); ;
        }

 






版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
ExtJs十二(ExtJs Mvc图片管理之二)
接着图片管理一http://www.cnblogs.com/aehyok/archive/2013/04/27/3048278.html。 先来完成树目录的显示。开始前,现在解决方案中创建一个Upload目录用来存放上传的图片,为了便于测试,在Upload目录下随便添加两个目录,这里添加1和2。
716 0
阿里云服务器怎么设置密码?怎么停机?怎么重启服务器?
如果在创建实例时没有设置密码,或者密码丢失,您可以在控制台上重新设置实例的登录密码。本文仅描述如何在 ECS 管理控制台上修改实例登录密码。
10075 0
ExtJs十一(ExtJs Mvc图片管理之一)
前言 图片管理要在两个地方使用:一是标签页内的图片管理,一是文章内容编辑时嵌套到插入图片的窗口内。因而,将图片管理做成一个扩展比较方便。当然,做成MVC模式也行,不争论,不讨论。 要记住,扩展要写在Scripts\ExtJS\Ux目录下,因为在路径的设置中,扩展目录是指向这里的。
764 0
实现图片预览效果及模糊效果
一、图片的预览效果 本次实现是在vue-cli中实现的路由来实现图片的预览效果 第一步定义两个组件命名为HelloWorld.vue和Layer.vue 第二步需要配置两个组件的前端路由 代码如下: 第三步在HelloWorld的组件中...
886 0
图片上传预览原理及实现
目前网上有很多支持图片上传时进行预览的插件,功能完备,界面优雅,使用起来也很方便。一直以来也就只是用用,没有想过这些插件背后的实现原理。趁着今天有点时间,也来学习学习。 追根溯源 设想 原理 DataURL浅析 格式 预览实现 HTML JavaScript控制 预览效果 打包封装 简易封装 使用方式 测试 总结 追根溯源 设想 一开始,按照我的思路,预览可能是这么来实现的。
1182 0
使用JCrop进行图片裁剪,裁剪js说明,裁剪预览,裁剪上传,裁剪设计的图片处理的工具类和代码
 1.要想制作图片裁剪功能,可以使用网上的裁剪工具JCrop,网址是:https://github.com/tapmodo/Jcrop/ 案例效果如下: 2.引入JCrop的js代码,具体要引入那些js可以参考JCrop案例: 3.编写的html代码如下: &lt;div id="light" class="white_content"&gt;        &lt
2305 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,阿里云优惠总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系.
13882 0
【HTML5+MVC4】xhEditor网页编辑器图片上传
准备工作: 创建一个MVC项目中,添加好xhEditor插件 相关用法:http://www.cnblogs.com/xcsn/p/4701497.html   注意事项:xhEditor分为v1.
999 0
图片上传预览
     最近做需求时遇到的,上传的时候预览一下,一开始并没有想着用插件什么的,太复杂,只是个预览效果,不如自己写省事。前前后后也就几十行代码(包含头尾HTML、注释、输出调试),反正是比引用插件少多了,自己写也是个锻炼。
652 0
+关注
芝麻软件
编程语言,框架相关专家
579
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载