@{
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. C# 进程和线程

    一.进程和线程 进程是对一段静态指令序列的动态执行过程,是系统进行资源分配和调度的基本单位.与进程相关的信息包括进程的用户标志.正在执行的已经编译好的程序.程序和数据在存储器中的位置等.同一个进程有可 ...

  2. 点击document隐藏某个div

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. Jstorm可靠性分析

    去掉storm可靠性有三种方式: 1.Config.TOPOLOGY_ACKERS 设置为0: 2.在发送数据时不带上mesage id: 3.将tuple不做anchor发送到下一个节点,因为没有a ...

  4. JSP内置对象---请求重定向与请求转发的区别

    视频地址:http://www.imooc.com/video/3306 方便理解:

  5. RHEL7修改swappiness

    linux系统swappiness参数在内存与交换分区间优化 2014-08-14 10:24:19分类: Linux swappiness的值的大小对如何使用swap分区是有着很大的联系的.swap ...

  6. auto_ptr源码剖析

    /* * Copyright (c) 1997-1999 * Silicon Graphics Computer Systems, Inc. * * Permission to use, copy, ...

  7. iOS的触摸事件的用法以及和手势识别器的区别

    1.首先来介绍下触摸事件和手势识别器的利与弊 触摸事件和手势识别器二者之间有直接的关系 手势识别器是在触摸事件的基础上演变过来的 当我们用到触摸事件时 默认的uiview是没有什么效果的 只能自定义v ...

  8. linux命令：chgrp

    1.命令介绍: chgrp用来改变文件或目录所属组的权限,要改变成的组必须在/etc/group文件存在才可以. 2.命令格式: chgrp [选项] 组 文件 3.命令参数: 必要参数: -c 当发 ...

  9. 关于JAVA中对字符串与数组求长度的问题

    我在学习中发现在求数组或者字符串的长度的时候,用到length的时候,有时候是length,有时候是length(),很是奇怪,于是上API查了一下,发现一些小细节. 首先看看这段代码 public ...

  10. POJ 2976

    http://poj.org/problem?id=2976 01分数规划问题,可以舍掉k组 01分数规划用于解决的经典问题是最优比率生成树 解法见http://www.cnblogs.com/lot ...