html5 file 上传图片
说明：开发环境 vs2012 mvc4项目，后台语言csharp
1、前端代码
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>图片上传测试</title>
</head>
<body>
<form action="/Home/MultiSavePage" enctype="multipart/form-data" method="post">
<input type="file" name="files" id="file1" onchange="checkPic(this)" /><br/>
<input type="file" name="files" id="file2" onchange="checkPic(this)"/><br/>
<input type="file" name="files" id="file3" onchange="checkPic(this)"/><br/> <input type="submit" value="同时上传多个文件" />
</form>
<script type="text/javascript">
function checkPic(e) {
if (!e || !e.value) return;
var patn = /\.jpg$|\.jpeg$|\.png$|\.gif$/i;
if (!patn.test(e.value)) {
alert("您选择的似乎不是图像文件。");
e.value = "";
return;
}
else {
//以下的代码可以 把选中的图片 放到img中显示
var $file = $(e);
var fileObj = $file[0];
var windowURL = window.URL || window.webkitURL;
var dataURL;
//var $img = $("#"+id+"");
if (fileObj && fileObj.files && fileObj.files[0]) {
dataURL = windowURL.createObjectURL(fileObj.files[0]);
console.log(dataURL);
//$img.attr('src', dataURL);
}
}
}
</script>
</body>
</html>
2、控制器代码
action="/Home/MultiSavePage" 对应的后台代码
（1）、正常保存图片，不对图片压缩处理
public void MultiSavePage(IEnumerable<HttpPostedFileBase> files)
{
Int32 count = files.Count();
Int32 pid = ;
Int32 offid = ;
string str = "GX";
string pathForSaving = Server.MapPath("~/img");
string pagePath = pathForSaving + "/" + offid + "/" + str + "/" + pid;
if (this.CreateFolderIfNeeded(pagePath))
{
foreach (var file in files)
{
if (file != null && file.ContentLength > )
{
string[] picName = file.FileName.Split('.');
//判断文件的类型
if (picName[] == "jpg" || picName[] == "gif" || picName[] == "png" || picName[] == "bmg" || picName[] == "jpeg")
{
//给上传文件重命名
string filename = DateTime.Now.ToString("yyyyMMddHHmmssfff") + Guid.NewGuid().ToString();
//文件保存的路径
string filesavepath = filename + "." + picName[];
//保存图片
//var path = Path.Combine(pathForSaving, file.FileName);
var path = Path.Combine(pagePath, filename + "." + picName[]);
file.SaveAs(path);
}
}
}
}
}
注释：
string pathForSaving = Server.MapPath("~/img"); img是项目文件夹，上传的图片都保存到img文件夹下
（2）、对上传的图片压缩处理，并且把图片保存为png格式
public void MultiSavePage(IEnumerable<HttpPostedFileBase> files)
{
Int32 count = files.Count();
Int32 pid = ;
Int32 offid = ;
string str = "GX";
string pathForSaving = Server.MapPath("~/img");
string pagePath = pathForSaving + "/" + offid + "/" + str + "/" + pid;
if (this.CreateFolderIfNeeded(pagePath))
{
foreach (var file in files)
{
if (file != null && file.ContentLength > )
{
string[] picName = file.FileName.Split('.');
//判断文件的类型
if (picName[] == "jpg" || picName[] == "gif" || picName[] == "png" || picName[] == "bmg" || picName[] == "jpeg")
{
//给上传文件重命名
string filename = DateTime.Now.ToString("yyyyMMddHHmmssfff") + Guid.NewGuid().ToString();
//文件保存的路径
string filesavepath = filename + "." + picName[];
//保存图片
//var path = Path.Combine(pathForSaving, file.FileName);
var path = Path.Combine(pagePath, filename + "." + picName[]);
//file.SaveAs(path);
Bitmap bitmapTem = (Bitmap)Image.FromStream(file.InputStream);//file图片文件转换为bitmap //压缩图片 Bitmap bitmapLast = ZoomImage(bitmapTem, , );
bitmapLast.Save(path, System.Drawing.Imaging.ImageFormat.Png);
}
}
}
}
}
3、用到的其他方法
// 检查是否要创建上传文件夹
private bool CreateFolderIfNeeded(string path)
{
bool result = true;
if (!Directory.Exists(path))
{
try
{
Directory.CreateDirectory(path);
}
catch (Exception)
{
//TODO:处理异常
result = false;
}
}
return result;
}
4、压缩图片的方法
using System.Drawing;
//等比例缩放图片
//destHeight 331 destWidth 600
private Bitmap ZoomImage(Bitmap bitmap, int destHeight, int destWidth)
{
try
{
System.Drawing.Image sourImage = bitmap;
int width = , height = ;
//按比例缩放
int sourWidth = sourImage.Width;
int sourHeight = sourImage.Height;
if (sourHeight > destHeight || sourWidth > destWidth)
{
if ((sourWidth * destHeight) > (sourHeight * destWidth))
{
width = destWidth;
height = (destWidth * sourHeight) / sourWidth;
}
else
{
height = destHeight;
width = (sourWidth * destHeight) / sourHeight;
}
}
else
{
width = sourWidth;
height = sourHeight;
}
Bitmap destBitmap = new Bitmap(destWidth, destHeight);
Graphics g = Graphics.FromImage(destBitmap);
g.Clear(Color.Transparent);
//设置画布的描绘质量
g.CompositingQuality = System.Drawing.Drawing2D.CompositingQuality.HighQuality;
g.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.HighQuality;
g.InterpolationMode = System.Drawing.Drawing2D.InterpolationMode.HighQualityBicubic;
g.DrawImage(sourImage, new Rectangle((destWidth - width) / , (destHeight - height) / , width, height), , , sourImage.Width, sourImage.Height, GraphicsUnit.Pixel);
g.Dispose();
//设置压缩质量
System.Drawing.Imaging.EncoderParameters encoderParams = new System.Drawing.Imaging.EncoderParameters();
long[] quality = new long[];
quality[] = ;
System.Drawing.Imaging.EncoderParameter encoderParam = new System.Drawing.Imaging.EncoderParameter(System.Drawing.Imaging.Encoder.Quality, quality);
encoderParams.Param[] = encoderParam;
sourImage.Dispose();
return destBitmap;
}
catch
{
return bitmap;
}
}
html5 file 上传图片的更多相关文章
- jquery html5 file 上传图片显示图片
jquery js 的代码:不同浏览器下的路径 //建立一個可存取到該file的url function getObjectURL(file) { var url = null ; i ...
- HTML5 File API — 让前端操作文件变的可能
前言 在 HTML5 File API 出现之前,前端对于文件的操作是非常有局限性的,大多需要配合后端实现.出于安全角度考虑,从本地上传文件时,代码不可能获取文件在用户本地的地址,所以纯前端不可能完成 ...
- HTML5 File API 全介绍
在 HTML5 File API 出现之前,前端对于文件的操作是非常有局限性的,大多需要配合后端实现.出于安全角度考虑,从本地上传文件时,代码不可能获取文件在用户本地的地址,所以纯前端不可能完成一些类 ...
- Html5——File、FileReader、Blob、Fromdata对象
File File 接口提供有关文件的信息,并允许网页中的JavaScript访问其内容. File对象可以用来获取某个文件的信息,还可以用来读取这个文件的内容.通常情况下,File对象是来自用户在一 ...
- HTML5 file API加canvas实现图片前端JS压缩并上传
一.图片上传前端压缩的现实意义 对于大尺寸图片的上传,在前端进行压缩除了省流量外,最大的意义是极大的提高了用户体验. 这种体验包括两方面: 由于上传图片尺寸比较小,因此上传速度会比较快,交互会更加流畅 ...
- Resumable.js – 基于 HTML5 File API 的文件上传
Resumable.js 是一个 JavaScript 库,通过 HTML5 文件 API 提供,稳定和可恢复的批量上传功能.在上传大文件的时候通过每个文件分割成小块,每块在上传失败的时候,上传会不断 ...
- 【转发】Html5 File Upload with Progress
Html5 File Upload with Progress Posted by Shiv Kumar on 25th September, 2010Senior Sof ...
- HTML5 File api 实现断点续传
目前市场上大多数的网站的断点上传都是需要安装浏览器插件的,本文就针对高级浏览器的环境下,通过HTML5 File api实现断点上传进行说明 一.实现文件多选 HTML5的<input>新 ...
- 简单的html5 File base64 图片上传
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
随机推荐
- 洛谷P1236 算24点
题目描述 几十年前全世界就流行一种数字游戏,至今仍有人乐此不疲．在中国我们把这种游戏称为“算24点”.您作为游戏者将得到4个1~9之间的自然数作为操作数,而您的任务是对这4个操作数进行适当的算术运算, ...
- poj 1066 Treasure Hunt 线段相交
题目链接 题目描述 一个正方形房间被分成若干个小室,宝藏在其中某一点.现可炸开任意一堵墙壁的中点位置.问至少要炸开多少堵墙才能从外面到达宝藏所在地. 思路 (很巧妙,没想到) 直接枚举墙壁与正方形外壁 ...
- 【Visual Studio】Tab 转换为空格的设置
在 Visual Studio 中写代码时,按 Tab 键,会自动进行缩进.有时希望实现按 Tab 键,出现多个空格的效 果.Visual Studio 提供了这样的功能,具体设置方法为:打开 “To ...
- Linux 之 LNMP服务器搭建-MySQL
LNMP服务器搭建-MySQL 参考教程:[千峰教育] 系统版本: CentOS 6.8 关闭防火墙和Selinux service iptables stop setenforce 0 安装mysq ...
- HRBUST 2078:糖果（模拟，贪心）
题不难,但作为一道恶心到了我的题,我还是记录一下的好. 题意:n个人围一圈,要求:相邻两人,分数高的要比分数低的得到更多的糖果,若分数相同则必须得到相同数量的糖果.问满足要求的最少需要分配的糖果数.( ...
- 深入了解Entity Framework框架及访问数据的几种方式
一.前言 1.Entity Framework概要 Entity Framework是微软以ADO.NET为基础所发展出来的对象关系映射(O/R Mapping)解决方案.该框架曾经为.NET Fra ...
- 2014 ACM/ICPC 亚洲区 北京站
题目链接 2014北京区域赛 Problem A Problem B 直接DFS+剪枝 剪枝条件:当前剩余的方块数量cnt < 2 * max{a[i]} - 1,则停止往下搜. 因为这样搜下 ...
- 【APIO2015】Bali Sculptures
题目描述 印尼巴厘岛的公路上有许多的雕塑,我们来关注它的一条主干道. 在这条主干道上一共有 $N$ 座雕塑,为方便起见,我们把这些雕塑从 $1$ 到 $N$ 连续地进行标号,其中第 $i$ 座雕塑的年 ...
- Cookie安全与CSRF和XSS攻击知识点收集
个人简单理解: 1.XSS最简单的理解就是可以在表单提交的内容上嵌入JS执行代码,然后页面渲染的时候没有过滤时会自动执行这个脚本. 2.CSRF可以理解为当你登录了京东,浏览器上保存了你登录的Cook ...
- 【Todo】Tomcat与Jetty的比较 以及Tomcat架构的学习
主要参考这篇文章: http://blog.csdn.net/qing_2012/article/details/8276789 然后Tomcat原理的介绍,可以看这篇文章: http://www.i ...