base64 压缩上传上传图片
@{
ViewBag.Title = "dddddddd";
Layout = "~/Areas/Wap/Views/Shared/_Head.cshtml";
}
<html>
<head>
<title></title>
</head>
<body>
<div data-role="page">
<script type="text/javascript">
var imgTypeArr = new Array();
var imgArr = new Array();
var isHand = 0;//1正在处理图片
var nowImgType = "image/jpeg";
var jic = {
compress: function (source_img_obj, imgType) {
//alert("处理图片");
source_img_obj.onload = function () {
var cvs = document.createElement('canvas');
//naturalWidth真实图片的宽度
console.log("原图--" + this.width + ":" + this.height);
var scale = 1;
if (this.width > 200 || this.height > 200) {
if (this.width > this.height) {
scale = 200 / this.width;
} else {
scale = 200 / this.height;
}
}
cvs.width = this.width * scale;
cvs.height = this.height * scale;
var ctx = cvs.getContext("2d");
ctx.drawImage(this, 0, 0, cvs.width, cvs.height);
var newImageData = cvs.toDataURL(imgType, 0.8);
base64Img = newImageData;
imgArr.push(newImageData);
// $("#canvasDiv").append(cvs);
var img = new Image();
img.src = newImageData;
$(img).css('width', 100 + 'px');
$(img).css('height', 100 + 'px');
$("#canvasDiv").append(img);
isHand = 0;
}
}
}
function handleFileSelect(evt) {
isHand = 1;
imgArr = [];
imgTypeArr = [];
$("#canvasDiv").html("");
var files = evt.target.files;
for (var i = 0, f; f = files[i]; i++) {
// Only process image files.
if (!f.type.match('image.*')) {
continue;
}
imgTypeArr.push(f.type);
nowImgType = f.type;
var reader = new FileReader();
// Read in the image file as a data URL.
reader.readAsDataURL(f);
// Closure to capture the file information.
reader.onload = (function (theFile) {
return function (e) {
var i = new Image();
i.src = e.target.result;
jic.compress(i, nowImgType);
};
})(f);
}
}
$(function () {
document.getElementById('fileToUpload').addEventListener('change', handleFileSelect, false);
});
function catUpload() {
if (base64Img == "") {
show_msg("请选择图片！");
return;
}
if (isHand == 1) {
show_msg("请等待图片处理完毕！");
return;
}
$('.ui-loader').show();
$.ajax({
type: "POST",
url: "/Upload/UploadImage1?path=new",
data: {
'img': imgArr,
'type': imgTypeArr
},
success: function (data) {
//$('.ui-loader').hide();
//show_msg(data.info);
alert(data.path)
}
});
}
//消息提示
function show_msg(msg) {
//消息显示时间
var time = arguments[1] ? arguments[1] : 1500;
$('#info_pop p').text(msg);
$("#info_pop").popup("open");
setTimeout('$("#info_pop").popup("close");', time);
}
</script>
<div data-role="content">
<table style="width: 100%;">
<tr>
<td>
<input id="fileToUpload" type="file" name="fileToUpload" accept="image/*" multiple="multiple">
</td>
<td width="80" align="right">
<button class="ui-btn ui-icon-add ui-corner-all" onclick="catUpload();">压缩上传</button>
</td>
</tr>
</table>
<div id="canvasDiv">
</div>
</div><!-- endContent -->
<div data-role="popup" id="info_pop" class="ui-content" data-theme="d" style='font-weight:bold;font-size:14px; z-index: 999; background-color: white;'>
<p>未知错误</p>
</div>
</div>
</body>
</html>
public ActionResult UploadImage1()
{
string path = string.Empty;
string path_s = string.Empty;
string type = string.Empty;
string strs = Request["img[]"];//接收文件
byte[] arr = Convert.FromBase64String(strs.Split(',')[]); MemoryStream ms = new MemoryStream(arr);
string filename =Guid.NewGuid().ToString("N")+ ".jpg";
string fileext = Path.GetExtension(filename);
if (!Directory.Exists(Server.MapPath("/ImageFiles/")))
{
Directory.CreateDirectory(Server.MapPath("/ImageFiles/"));
} string dircstr = "/ImageFiles/" + Request["path"] + "/";
if (!Directory.Exists(Server.MapPath(dircstr)))
{
Directory.CreateDirectory(Path.GetDirectoryName(Server.MapPath(dircstr)));
}
string fileloadname = dircstr + DateTime.Now.Year.ToString() + DateTime.Now.Month.ToString() + DateTime.Now.Day.ToString() + DateTime.Now.Hour.ToString() + DateTime.Now.Minute.ToString() + DateTime.Now.Second.ToString() + filename; StreamWriter sw = new StreamWriter(Server.MapPath( fileloadname));
ms.CopyTo(sw.BaseStream);
sw.Flush();
sw.Close();
ms.Close(); path += fileloadname ; return Content(JsonConvert.SerializeObject(new { success = true, path = path }), APPJSON);
}
base64 压缩上传上传图片的更多相关文章
- Vue directive自定义指令+canvas实现H5图片压缩上传-Base64格式
前言 最近优化项目-手机拍照图片太大,回显速度比较慢,使用了vue的自定义指令实现H5压缩上传base64格式的图片 canvas自定义指令 Vue.directive("canvas&qu ...
- vue实现PC端调用摄像头拍照人脸录入、移动端调用手机前置摄像头人脸录入、及图片旋转矫正、压缩上传base64格式/文件格式
进入正题 1. PC端调用摄像头拍照上传base64格式到后台,这个没什么花里胡哨的骚操作,直接看代码 (canvas + video) <template> <div> &l ...
- js 图片压缩上传（base64位）以及上传类型分类
一.input file上传类型 1.指明只需要图片 <input type="file" accept='image/*'> 2.指明需要多张图片 <input ...
- 移动端H5上传图片并压缩上传
手头上的这个项目主要是在微信内运行的一个网站,需要用户上传手机内的照片,而现在手机照片尺寸越来越大,直接上传的话的确上传进度慢影响用户体验而且也会给服务器增加压力,所以利用H5的新特性压缩后上传不失为 ...
- HTML5 图片本地压缩上传插件「localResizeIMG」
移动应用中用户往往需要上传照片,但是用户上传的照片尺寸通常很大,而手机的流量却很有限,所以在上传前对图像进行压缩是很有必要的. 原生应用可以直接对文件进行处理,网页应用就没有这个优势了.不过 canv ...
- 纯原生js移动端图片压缩上传插件
前段时间,同事又来咨询一个问题了,说手机端动不动拍照就好几M高清大图,上传服务器太慢,问问我有没有可以压缩图片并上传的js插件,当然手头上没有,别慌,我去网上搜一搜. 结果呢,呵呵...诶~又全是基于 ...
- 基于vue + axios + lrz.js 微信端图片压缩上传
业务场景 微信端项目是基于Vux + Axios构建的,关于图片上传的业务场景有以下几点需求: 1.单张图片上传(如个人头像,实名认证等业务) 2.多张图片上传(如某类工单记录) 3.上传图片时期望能 ...
- JS—图片压缩上传（单张）
*vue+webpack环境,这里的that指到vue实例 <input type="file" name="file" accept="ima ...
- 三款不错的图片压缩上传插件(webuploader+localResizeIMG4+LUploader)
涉及到网页图片的交互,少不了图片的压缩上传,相关的插件有很多,相信大家都有用过,这里我就推荐三款,至于好处就仁者见仁喽: 1.名气最高的WebUploader,由Baidu FEX 团队开发,以H5为 ...
随机推荐
- linux软件管理 YUM命令
yum的优点 将所有软件包放到官方服务器上,当进行yum在线安装时可以自动解决依赖性问题 yum源文件 [root@ssgao1987 yum.repos.d]# cd /etc/yum.repos. ...
- MapServer Tutorial——MapServer7.2.1教程学习——第一节：MapServer的基本配置管理，静态地图应用以及MapFile文件
MapServer Tutorial——MapServer7.2.1教程学习——第一节:MapServer的基本配置管理,静态地图应用以及MapFile文件 前言 万事开头难,有了<MapSer ...
- day20_python_1124
01 昨日内容回顾 类的名称空间 对象的空间 class A: def __init__(): pass obj = A() 对象查询属性:对象本身 ----> 类 -----> 父类 类 ...
- JAVA 根据设置的概率生成随机数
import java.util.ArrayList; import java.util.HashMap; import java.util.List; import java.util.Map; i ...
- 厨娘ui设计文档
厨娘ui设计文档 一.概述 中国的饮食文化从古到今源远流长.在生活日益丰富的今天,人们对饮食的要求不仅仅是温饱,更讲究健康和美味.近年来,饮食甚至成为娱乐的一部分,关于吃的流行用语层出不穷,可见在当今 ...
- instanceof & isAssignableFrom的异同
instance 关注的是实例是否为类或接口的一个实例 isAssignableFrom 关注的是Class对象是否相同,或者Class1是Class2的超类或接口 Class1.isAssignab ...
- 在eclipse中启动java程序的时候，每次都会在一个未设置断点的源码里面，卡断点
可以通过取消这个勾选框,来阻止代码在未设置断点的地方停止 具体位置在:Preferences--Java--Debug
- L2-023. 图着色问题*
L2-023. 图着色问题 参考博客 #include <iostream> #include <cstring> #include <set> using nam ...
- jQuery-2.DOM---节点插入
DOM内部插入append()与appendTo() 动态创建的元素是不够的,它只是临时存放在内存中,最终我们需要放到页面文档并呈现出来.那么问题来了,怎么放到文档上? 这里就涉及到一个位置关系,常见 ...
- 本地Debug Asp.net MVC 无法加载css与js
运行一个从网上download的一个MVC项目,运行的时候无法显示样式,js也报错. 检查路径也没有问题,后来在配置中把其中的一段配置去掉 <staticContent> <!-- ...