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)); ;
        }

 






相关文章
|
5月前
|
Web App开发 前端开发 Java
基于Spring3 MVC实现基于HTML form表单文件上传
基于Spring3 MVC实现基于HTML form表单文件上传
45 7
基于Spring3 MVC实现基于HTML form表单文件上传
|
5月前
|
存储 前端开发 JavaScript
最简单的ExtJS4的MVC实例
最简单的ExtJS4的MVC实例
30 0
|
JavaScript 前端开发 容器
ExtJs 4.x MVC 架构
ExtJs 4.x MVC 架构
|
JSON 前端开发 JavaScript
C# MVC 向页面传值方式
C# MVC 向页面传值方式
|
前端开发 Java 网络协议
MVC文件上传 及其他
文件上传 1.添加jar包,maven中 dependency>commons-fileuploadcommons-fileupload1.3.3 2.在springxml文件中,设置上传文件的配置信息 bean id="multipartResolver" p:defaul.
679 0
|
Web App开发 前端开发 JavaScript
MVC 上传文件并展示
最近悟出来一个道理,在这儿分享给大家:学历代表你的过去,能力代表你的现在,学习代表你的将来。    十年河东十年河西,莫欺少年穷    学无止境,精益求精    最近在做自学MVC,遇到的问题很多,索性一点点总结下。
969 0
|
前端开发 JavaScript 数据格式
|
前端开发 vr&ar JavaScript
|
Web App开发 前端开发 索引