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 = ;
string result="";
if (Request.Files.Count > )
{
for (int i = ; 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], , );
}
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 > && file.ContentType.IndexOf("image/") >= )
{
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)); ;
}


MVC 图片预览的更多相关文章

  1. dropzonejs中文翻译手册 DropzoneJS是一个提供文件拖拽上传并且提供图片预览的开源类库.

    http://wxb.github.io/dropzonejs.com.zh-CN/dropzonezh-CN/ 由于项目需要,完成一个web的图片拖拽上传,也就顺便学习和了解了一下前端的比较新的技术 ...

  2. 适用于各浏览器支持图片预览,无刷新异步上传js插件

    文件上传无疑是web应用中一个非常常用的功能,不管是PHP.jsp还是aspx.mvc等都会需要文件上传,但是众所周知当使用自带的文件上传功能时总会出现页面刷新的情况.当然现在有了html5这个好东西 ...

  3. DropzoneJS是一个提供文件拖拽上传并且提供图片预览的开源类库.

    DropzoneJS是一个提供文件拖拽上传并且提供图片预览的开源类库. 它是轻量级的,不依赖任何其他类库(如JQuery)并且高度可定制. 试试看! 将文件拖至此处或点击上传.(这仅仅是 dropzo ...

  4. JS魔法堂之实战:纯前端的图片预览

    一.前言 图片上传是一个普通不过的功能,而图片预览就是就是上传功能中必不可少的子功能了.在这之前,我曾经通过订阅input[type=file]元素的onchange事件,一旦更改路径则将图片上传至服 ...

  5. js实现图片预览

    <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...

  6. 普通图片预览及demo(非分块)

    演示地址: http://codeman35.itongyin.com:19003/v2/image.html 功能:通过加载大图预览,这种方式无法和google art 比较.只能应用于简单的图片预 ...

  7. html5 图片上传,支持图片预览、压缩、及进度显示,兼容IE6+及标准浏览器

    以前写过上传组件,见 打造 html5 文件上传组件,实现进度显示及拖拽上传,兼容IE6+及其它标准浏览器,对付一般的上传没有问题,不过如果是上传图片,且需要预览的话,就力有不逮了,趁着闲暇时间,给上 ...

  8. js 图片预览

    图片预览 $('#pac_recipe').change(function() { var imgsrc = ''; ]) { //chrome firefox imgsrc = window.URL ...

  9. 如何通过js实现图片预览功能

    一.效果预览 效果图: 二.实现代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &quo ...

随机推荐

  1. 【代码笔记】iOS-判断字符串是否为空

    一,代码. - (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view. ...

  2. (转)postman中 form-data、x-www-form-urlencoded、raw、binary的区别

    1.form-data:  就是http请求中的multipart/form-data,它会将表单的数据处理为一条消息,以标签为单元,用分隔符分开.既可以上传键值对,也可以上传文件.当上传的字段是文件 ...

  3. iOS开发之 用第三方类库实现轮播图

    在github上面有很多的第三方类库,大大节约了大家的开发时间 下载地址:https://github.com/gsdios/SDCycleScrollView 现已支持cocoapods导入:pod ...

  4. 14、SEO工程师要阅读的书籍 - IT软件人员书籍系列文章

    SEO工程师是Web项目中比较重要的一个角色.他主要负责网站的针对搜索引擎的优化方案的编写和实施.因为现在网站数量庞大,在全世界的这么多网站当中,想要让用户访问你的网站,就需要一些技巧性的内容.很多用 ...

  5. nodejs学习笔记(2)--Express下安装模版引擎ejs

    成功安装完express后,输入express -help,根据提示安装ejs(如下图): 根据提示-e实现安装ejs,注意此处有坑:之前安装的时候根据教程(node.js开发指南第五章5.2.2节) ...

  6. ListView的监听器中OnItemClick各个参数的作用

    方法的原型如下 public void onItemClick(AdapterView<?> arg0, View arg1, int arg2, long arg3){ } 后面有4个参 ...

  7. 安卓普通类通过classloader访问资源文件

    Android studio不知道怎么设置,才可以在生成APK时把一些文件打包进去. 但是不管怎么样,放在res文件夹下的东西是一定得打包的.所以把一些资源文件放在res/raw这个文件夹里是科学的. ...

  8. Asp.net MVC验证那些事(4)-- 自定义验证特性

    在项目的实际使用中,MVC默认提供的Validation Attribute往往不够用,难以应付现实中复杂多变的验证需求.比如, 在注册用户的过程中,往往需要用户勾选”免责声明”,这个checkbox ...

  9. 【Linux】将Oracle安装目录从根目录下迁移到逻辑卷

    [Linux]将Oracle安装目录从根目录下迁移到逻辑卷 1.1  BLOG文档结构图 1.2  前言部分 1.2.1  导读和注意事项 各位技术爱好者,看完本文后,你可以掌握如下的技能,也可以学到 ...

  10. ASP.NET MVC 监控诊断、本地化和缓存

    这篇博客主要是针对asp.net mvc项目的一些常用的东东做一个讲解,他们分别是监控诊断.本地化和缓存.虽然前两者跟asp.net mvc看上去好像是没什么关联. 但其实如果真正需要做asp.net ...