@{
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. dll学习

    Dll:动态链接库 动态链接库(dll)是包含共享函数库的二进制文件,可以被多个应用程序同时使用.建立应用程序的可执行文件时,不必将DLL连接到应用程序中,而是在运行时动态装载DLL,装载时DLL被映 ...

  2. Spring学习笔记

    Spring 的控制反转:把对象的创建.初始化.销毁等工作交给Spring 容器来做,有spring容器控制对象的生命周期 applicationContext.xml beans --->sp ...

  3. java读取大文件

    1  多线程 2  java内存映射读取大文件

  4. VisualSVN-5.1.4补丁原创发布

    VisualSVN-5.1.4补丁原创发布 VisualSVN-5.1.4Patch.rar  VisualSVN-5.1.4官方安装包.rar

  5. 【转】Tomcat的默认访问路径

    放在外网的应用,用户多是直接输入域名访问,相信没有哪个后面还加个尾巴,而Tomcat的默认目录是ROOT,所以我们需要更改其默认目录. 更改Tomcat的默认目录很简单,只需要修改server.xml ...

  6. The guard was taken to hospital in a critical condition.

    The Prince George's County Fire Department said the guard was taken to hospital in a critical condit ...

  7. C# FTP/SFTP文件传输控件FTP for .NET/.NET CF 详细介绍

    FTP for .NET将FTP客户端功能添加到您的应用程序之中..NET控件的FTP支持所有常用的FTP服务器以及代理服务器,包括可扩展的目录解析.同步以及异步操作.主动与被动模式.以VB.NET与 ...

  8. Dynamic Programming

    We began our study of algorithmic techniques with greedy algorithms, which in some sense form the mo ...

  9. 几个功能强大的系统源码(机票分销、机票预订、OA、手机充值、wifi营销、网络超市、体检平台）

    1.机票分销.机票预订系统源码 2.OA系统源码 3.手机在线充值系统源码 4.wifi营销系统源码 5.网络超市系统源码 6.在线体检平台系统源码 7.违章查询与缴费系统源码 需要的同学请联系QQ: ...

  10. 详细讲解Linux驱动程序

    一  编写Linux驱动程序 1.建立Linux驱动骨架 Linux内核在使用驱动时需要装载与卸载驱动 装载驱动:建立设备文件.分配内存地址空间等:module_init 函数处理驱动初始化 卸载驱动 ...