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下实现单个图片上传, 客户端服务端双重限制图片大小和格式, 服务端裁剪图片"中,已经实现了在客户端和服务端限制图片大小和格式,以及在服务端裁剪图片.但还 ...
随机推荐
- bzoj2141 树状数组套Treap树
题目大意是在能够改变两个数的位置的情况下计算逆序对数 这因为是动态记录逆序对 本来单纯逆序对只要用树状数组计算即可,但这里因为更新,所以利用TReap树的删点和增加点来进行更新 大致是把每个树状数组所 ...
- js动画之链式运动
链式运动就是当一个运动完,又启动另外一个运动,这个怎么实现呢?这里我们是用用回调函数实现一套链式动画 显示给div左移100像素,然后然后透明度变100 <!DOCTYPE html> & ...
- Ubuntu下mysql-server的安装
(1)更新 #apt-get update (2)安装 #apt-get install mysql-server 出现窗口设置"root"用户的密码为"456456&q ...
- Emacs 相关资料翻译
Table of Contents 1. 37 Document Viewing 2. EmacsrelatedTranslation 2.1. Spacemacs 配置层(Configuration ...
- Ext JS 4 新特性2：配置项属性（config）之一
Ext JS 4 新特征2:配置项属性config 最新版本的Ext JS 4.2的另外一个伟大的新特征就是增加了configuration配置项属性,当我们在创建一个新类的时候,经常性的要设置某某属 ...
- Linux网络编程(简单的时间获取服务器)
1.一个简单的服务器时间获取程序 服务器和客户端采用UDP通信的方式,来编写一个简单的时间获取应用. 把过程大致理顺一下,首先是服务器端的编写,使用的是迭代的方式,没有并发 先创建一个socket而后 ...
- 微信Auth2.0授权的时候出现两次回调
在获取用户OpenID的时候 $url="https://open.weixin.qq.com/connect/oauth2/authorize?appid=".WX_APPID. ...
- Learning Bayesian Network Classifiers by Maximizing Conditional Likelihood
Abstract Bayesian networks are a powerful probabilistic representation, and their use for classifica ...
- MVC与webservice上传文件（图片和视频），希望帮且到一些朋友
最近做一个项目,要把图片和视频传到服务器上(网站与图片服务器分开),在网上找了好久,没找到完整的资料. 自己也折腾了半天,才把完整的代码实现完.可能好多朋友都有实现过,没分享代码吧,写得不好希望不要见 ...
- Excel的python读写
实际工作中可能需要整理一些文档,或者记录一些数据,这时候使用python来操作Excel可能会帮得上你. 读操作: # encoding : utf-8 #设置编码方式 import xlrd #导入 ...