HTML5上传图片到ASP.NET.MVC
@{
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的更多相关文章
- HTML5 上传图片 到ASP.NET MVC
@{ ViewBag.Title = "Home Page"; } <!DOCTYPE HTML PUBLIC> <html> <head> & ...
- ASP.NET MVC下使用文件上传
这里我通过使用uploadify组件来实现异步无刷新多文件上传功能. 1.首先下载组件包uploadify,我这里使用的版本是3.1 2.下载后解压,将组件包拷贝到MVC项目中 3. 根目录下添加新 ...
- ASP.NET MVC 使用Uploadify实现多文件异步无刷新上传
软件技术开发,合作请联系QQ:858-048-581 这里我通过使用uploadify组件来实现异步无刷新多文件上传功能. 1.首先下载组件包uploadify,我这里使用的版本是3.1 2.下载后解 ...
- 【读书笔记】Asp.Net MVC 上传图片到数据库（会的绕行）
之前上传图片的做法都是上传到服务器上的文件夹中,再将url保存到数据库.其实在MVC中将图片上传到数据库很便捷的事情,而且不用去存url了.而且这种方式支持ie6(ie6不支持jquery自动提交fo ...
- ASP.NET MVC 中使用 AjaxFileUpload 插件时，上传图片后不能显示（预览）
AjaxFileUpload 插件是一个很简洁很好用的上传文件的插件,可以实现异步上传功能,但是在 ASP.NET MVC中使用时,会出现上传图片后不能正确的显示的问题,经过仔细排查,终于找到原因,解 ...
- Asp.Net MVC 上传图片到数据库
[读书笔记]Asp.Net MVC 上传图片到数据库(会的绕行) 之前上传图片的做法都是上传到服务器上的文件夹中,再将url保存到数据库.其实在MVC中将图片上传到数据库很便捷的事情,而且不用去存 ...
- EF+LINQ事物处理 C# 使用NLog记录日志入门操作 ASP.NET MVC多语言 仿微软网站效果(转) 详解C#特性和反射（一） c# API接受图片文件以Base64格式上传图片 .NET读取json数据并绑定到对象
EF+LINQ事物处理 在使用EF的情况下,怎么进行事务的处理,来减少数据操作时的失误,比如重复插入数据等等这些问题,这都是经常会遇到的一些问题 但是如果是我有多个站点,然后存在同类型的角色去操作 ...
- ASP.NET MVC 4 - 上传图片到数据库
这里演示如何在MVC WEB应用程序如何上传图片到数据库以及如何在WEB页面上显示图片.数据库表对应整个Model类,不单图片数据一个字段,我们从数据表的定义开始: CREATE TABLE [dbo ...
- 在ASP.NET MVC下有关上传图片脏数据的解决方案
在"在ASP.NET MVC下实现单个图片上传, 客户端服务端双重限制图片大小和格式, 服务端裁剪图片"中,已经实现了在客户端和服务端限制图片大小和格式,以及在服务端裁剪图片.但还 ...
随机推荐
- VS一次删除多个窗体后报错
今天在做项目的时候,需要删除多个窗体,删除了之后,VS报了个错误: 命名空间“项目名称”中不存在类型或命名空间名称“文件夹”(是否缺少程序集引用?) 具体原因不清楚,就算恢复窗体后还是一样的错误,无法 ...
- Tomcat Shell脚本（启动｜关闭｜重启｜状态）
#!/bin/bash # # chkconfig: - # description: Tomcat start/stop/status script #Location of JAVA_HOME ( ...
- AngularJS身份验证：Cookies VS Tokens
基于cookie的身份验证:Cookie-Based Authentication 基于token的身份验证:Token-Based Authentication 跨域:cross-domain 说明 ...
- Perl技巧
项目里面一直用的是Perl,Perl里有各种小技巧就分享在这吧. push(@a, $b) 把b元素压入a数组中, 还可以有 push(@a, [@b]); 那a就成了二维数组了 scalar(@a) ...
- 'java'不是内部或外部命令，另一个解决办法
我知道环境变量,也知道搞系统变量.别给我粘那些教程了,我的java路程是C:\Program Files\Java\jdk1.6.0_05谁弄好了把那三个变量和值发出来.... JAVA_HOME=C ...
- 这种代码怎么改写？以致于在下次增加CustomsType时，不需要再加 if 语句。
最近看到项目里一段代码如下: excelObject excel = new excelObject(); if (loadbill.CustomsType == 1) excel.IDownload ...
- matlab初学之roundn和round
文章出处: http://evaevazhuxun.blog.sohu.com/154543859.html http://blog.sina.com.cn/s/blog_a4034b2801012o ...
- 为什么 input 元素能用 width 属性
前几天在是写网页的时候发现input可以设置宽高,很疑惑,上网查了之后发现: 简单的认为 input 就是 inline 元素是片面的.元素默认以何种 display 属性值显示出来,这个其实更多的时 ...
- android layout_weight讲解
Layout_weight是线性布局,也就是LinearLayout里面用到的,下面通过实验来看这个Layout_weight的特性. 1.当控件的属性android:layout_width=&qu ...
- PIC XC8 EEPROM操作
要做一个报警功能的东东,要求可以通过遥控来改变遥控内容.由于对系统的稳定性要求很高,所以用了看门狗. 可是看门狗复位会引起所有寄存器重置,恢复到默认状态.遥控要改变的内容也被复位了,所以只能借助EEP ...