@{
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. js当中的声明和初始化的顺序

    if(!("a" in window)) { var a=1; } alert(a); 这里的alert出来undefined 这句话就相当于 var a; if(!(“a” in ...

  2. 算法练习之leetcode系列1-3

    1.Reverse Words in a String public class Solution { public String reverseWords(String s) { String re ...

  3. Zend_Frameowrk中进行多语言国际化的相关的配置和使用

    在使用Zend_Framework建立网站,若网站在以后的使用中面向国际,这时就需要实现网站的多语言国际化问题.使用Zend_Framework开发的网站需要进行多语言的开发时,就需要用到了Zend_ ...

  4. C#操作PPT表格

    1.激活组件 AxFramerControl改控件的dll自己再网上百度下下载这里不多讲 /// <summary>        /// 检测是否注册控件        /// < ...

  5. Levenberg-Marquardt算法基础知识

    Levenberg-Marquardt算法基础知识 (2013-01-07 16:56:17) 转载▼   什么是最优化?Levenberg-Marquardt算法是最优化算法中的一种.最优化是寻找使 ...

  6. hibernate3 所需的jar包

  7. php+mysql的微信文章发布平台

    如何在微信上发表丰富图文的文章? 最近在新浪云平台上做了一个php+mysql的微信文章发布平台,丫丫说. 在线编辑文章,扫一扫即可分享到微信,发到朋友圈,非常简单! http://yayashuo. ...

  8. [SSH] SSH学习笔记 - 远程登录

    1.SSH登陆/登出命令 $ ssh <hostname> #登入 $ exit #登出 known_hosts 每个用户都有自己的known_hosts文件,路径:(username)/ ...

  9. 【Python】实现简单循环

    # -*- coding:utf-8 -*- #猜数字游戏 lucky_num = 6 count = 0 while count < 3: input_num = int(raw_input( ...

  10. 关于HTML标签那些事儿

    关于html相信对于每一个互联网从业者来说实在熟悉不过的一个名词,特别是web前端工程师来说更是基础中的基础.html是hyper text markup language的首字母缩写,翻译过来就是超 ...