@{
ViewBag.Title = "Home Page";
}

<!DOCTYPE HTML PUBLIC>
<html>
<head>
<meta charset="utf-8">
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<title>使用html5 FileReader获取图片，并异步上传到服务器(not iframe)</title>

<style type="text/css">
body {
margin: 0px;
background: #f2f2f0;
}

p {
margin: 0px;
}

.title {
color: #FFFF00;
background: #000000;
text-align: center;
font-size: 24px;
line-height: 50px;
font-weight: bold;
}

.file {
position: absolute;
width: 100%;
font-size: 90px;
}

.filebtn {
display: block;
position: relative;
height: 110px;
color: #FFFFFF;
background: #06980e;
font-size: 48px;
line-height: 110px;
text-align: center;
cursor: pointer;
border: 3px solid #cccccc;
}

.filebtn:hover {
background: #04bc0d;
}

.showimg {
margin: 10px auto 10px auto;
text-align: center;
}
</style>

<script type="text/javascript">

window.onload = function () {

// 选择图片
document.getElementById('img').onchange = function (event) {

var img = event.target.files[0];

// 判断是否图片
if (!img) {
return;
}

// 判断图片格式
if (!(img.type.indexOf('image') == 0 && img.type && /\.(?:jpg|png|gif)$/.test(img.name))) {
alert('图片只能是jpg,gif,png');
return;
}

var reader = new FileReader();
reader.readAsDataURL(img);
console.log(3434);
reader.onload = function (e) { // reader onload start
// ajax 上传图片
$.post("@Url.Content("~/Home/SaveFile")", { img: e.target.result }, function (ret) {

console.log(ret.Path);

alert(ret.Path);
$('#showimg').html('<img src="' + ret.Path + '">');
alert(ret);
}, 'json');
} // reader onload end
}

}
</script>

</head>

<body>
<p class="title">使用html5 FileReader获取图片，并异步上传到服务器(not iframe)</p>
<p><input type="file" class="file" id="img"><label class="filebtn" for="img" title="JPG,GIF,PNG">请选择图片</label></p>

<div style="height:400px;"></div>
<div class="showimg" id="showimg" style="border:solid 1px red;"></div>

</body>
</html>

-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

using Html5Image.Tools;
using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace Html5Image.Controllers
{
public class HomeController : Controller
{
public ActionResult Index()
{
return View();
}

public JsonResult SaveFile( string img)
{
int pos = img.IndexOf("base64,");
if(pos >= 0)
{
img = img.Substring(pos + 7);
}

string file = "UploadedImage\\testimg.jpg";
string path = Path.Combine(HttpRuntime.AppDomainAppPath, file);
ImageTool.SaveFile(img, path, System.Drawing.Imaging.ImageFormat.Jpeg);

var obj = new { Path= Url.Content("~/" + file) };
return Json(obj);
//return "233";
}

public ActionResult About()
{
ViewBag.Message = "Your application description page.";

return View();
}

public ActionResult Contact()
{
ViewBag.Message = "Your contact page.";

return View();
}
}
}

HTML5上传图片到ASP.NET.MVC的更多相关文章

  1. HTML5 上传图片 到ASP.NET MVC

    @{ ViewBag.Title = "Home Page"; } <!DOCTYPE HTML PUBLIC> <html> <head> & ...

  2. ASP.NET MVC下使用文件上传

    这里我通过使用uploadify组件来实现异步无刷新多文件上传功能. 1.首先下载组件包uploadify,我这里使用的版本是3.1 2.下载后解压,将组件包拷贝到MVC项目中 3.  根目录下添加新 ...

  3. ASP.NET MVC 使用Uploadify实现多文件异步无刷新上传

    软件技术开发,合作请联系QQ:858-048-581 这里我通过使用uploadify组件来实现异步无刷新多文件上传功能. 1.首先下载组件包uploadify,我这里使用的版本是3.1 2.下载后解 ...

  4. 【读书笔记】Asp.Net MVC 上传图片到数据库（会的绕行）

    之前上传图片的做法都是上传到服务器上的文件夹中,再将url保存到数据库.其实在MVC中将图片上传到数据库很便捷的事情,而且不用去存url了.而且这种方式支持ie6(ie6不支持jquery自动提交fo ...

  5. ASP.NET MVC 中使用 AjaxFileUpload 插件时，上传图片后不能显示（预览）

    AjaxFileUpload 插件是一个很简洁很好用的上传文件的插件,可以实现异步上传功能,但是在 ASP.NET MVC中使用时,会出现上传图片后不能正确的显示的问题,经过仔细排查,终于找到原因,解 ...

  6. Asp.Net MVC 上传图片到数据库

    [读书笔记]Asp.Net MVC 上传图片到数据库(会的绕行)   之前上传图片的做法都是上传到服务器上的文件夹中,再将url保存到数据库.其实在MVC中将图片上传到数据库很便捷的事情,而且不用去存 ...

  7. EF+LINQ事物处理 C# 使用NLog记录日志入门操作 ASP.NET MVC多语言 仿微软网站效果(转) 详解C#特性和反射（一） c# API接受图片文件以Base64格式上传图片 .NET读取json数据并绑定到对象

    EF+LINQ事物处理   在使用EF的情况下,怎么进行事务的处理,来减少数据操作时的失误,比如重复插入数据等等这些问题,这都是经常会遇到的一些问题 但是如果是我有多个站点,然后存在同类型的角色去操作 ...

  8. ASP.NET MVC 4 - 上传图片到数据库

    这里演示如何在MVC WEB应用程序如何上传图片到数据库以及如何在WEB页面上显示图片.数据库表对应整个Model类,不单图片数据一个字段,我们从数据表的定义开始: CREATE TABLE [dbo ...

  9. 在ASP.NET MVC下有关上传图片脏数据的解决方案

    在"在ASP.NET MVC下实现单个图片上传, 客户端服务端双重限制图片大小和格式, 服务端裁剪图片"中,已经实现了在客户端和服务端限制图片大小和格式,以及在服务端裁剪图片.但还 ...

随机推荐

  1. SEO学习笔记-误区和经验总结

    原文链接:http://www.cnblogs.com/monxue/p/seo_note.html 常见误区和错误: 1.忽视404错误页面的优化,没有及时处理死链导致权重降低 2.做外链优化只链到 ...

  2. 用php获取本周,上周,本月,上月,本季度日期的代码

    echo date("Ymd",strtotime("now")), "\n"; echo date("Ymd",str ...

  3. excel导出

    查询的结果结 List list  = commissionMService.getMapper().meishengExport(paramMap); // 第一步,创建一个webbook,对应一个 ...

  4. keil uvision3 添加 STC单片机库

    本人工作以来，一直从事仪表程序维护和开发工作，使用的清一色的都是microchip单片机。现在弄一个光立方的小玩意，需要用STC单片机。它有特点很明显，方便、资料多、最重要的一点便宜。 网上下载的ke ...

  5. [转]iOS7中UITextView contentsize改变时机

    在iOS7以下版本中,对UITextView设置了text属性,则contentsize就会变化,从而可以根据contentsize的变化来改变UITextView高度来做出TextView高度随着输 ...

  6. Maven 常用的命令

    运行几个基本的Maven命令 mvn compile          编译主程序 mvn test-compile   编译测试程序 mvn clean 清理 mvn test 测试 mvn pac ...

  7. c++虚函数和内联构造函数

    创建一个含有虚函数的对象时, 编译器会实现 "初始化其VPTR以指向相应的VTABLE" 这个操作 ,而实现这个操作是通过 "插入隐藏代码至构造函数中" 故此时 ...

  8. 通过ajax 后台传递的 区域id 选中ztree的节点 并展开节点

    代码如下: < script type = "text/javascript" >    var flag = "<%=request.getParam ...

  9. iOS多线程学习及总结

    能有份网上的存储资料,备以后提升及参考 iOS 多线程编程 简介 一.      iOS有三种多线程编程的技术,分别是: 1.        NSThread 2.        Cocoa NSOp ...

  10. C# Winform中无焦点状态下获取键盘输入或者USB扫描枪数据

    类文件: C#类文件 using System; using System.Collections.Generic; using System.Text; using System.Runtime.I ...