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为 ...
随机推荐
- C++将数组的元素顺序随机打乱
参考: https://blog.csdn.net/cordova/article/details/52884399 https://zhidao.baidu.com/question/1604258 ...
- echarts.init 使用jq获取初始化对象
var myChart = echarts.init($('#main')[0]);// 或者var myChart = echarts.init($('#main').get(0));
- HTML和CSS标签常用命名规则
1.Images 存放一些网站常用的图片: 2.Css 存放一些CSS文件: 3.Flash 存放一些Flash文件: 4.PSD 存放一些PSD源文件: 5.Temp 存放所有临时图片和其它文件: ...
- Locust 集合点
直接编写接口事务脚本对后台接口进行测试:有时测试需要让所有并发用户完成初始化后再进行压力测试,这就需要类似于LoadRunner中的集合点的概念,由于框架本身没有直接封装,有如下办法实现: from ...
- sql中的内联和外联(简单用法)
有两张表:user和department User表: CREATE TABLE `user` ( `id` int(11) NOT NULL AUTO_INCREMENT, `name` ...
- scrapy框架的日志等级和请求传参
日志等级 请求传参 如何提高scrapy的爬取效率 一.Scrapy的日志等级 - 在使用scrapy crawl spiderFileName运行程序时,在终端里打印输出的就是scrapy的日志信息 ...
- WEBBASE篇： 第五篇， CSS知识3
CSS知识3 框模型: 一,外边距(上文) 二, 内边距 1,什么是内边距? 内边距就是内容与元素边缘之间的距离: 注: 内边距会扩大元素边框内所占的区域的 语法: padding: 四个方向的 ...
- some working learning总结学习
1. Python通过pypyodbc访问Access数据库 https://blog.csdn.net/jisuanjiguoba/article/details/73163721 2. java大 ...
- （30）auth模块（django自带的用户认证模块）
Auth模块是Django自带的用户认证模块: 我们在开发一个网站的时候,无可避免的需要设计实现网站的用户系统.此时我们需要实现包括用户注册.用户登录.用户认证.注销.修改密码等功能,这还真是个麻烦的 ...
- HTML前序
HTML基本格式 <!DOCTYPE html> //文档类型声明 <html lang="zh-cn"> //表示HTML文档开始,属性lang,属性值= ...