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为 ...
随机推荐
- nltk中的三元词组，二元词组
在做英文文本处理时,常常会遇到这样的情况,需要我们提取出里面的词组进行主题抽取,尤其是具有行业特色的,比如金融年报等.其中主要进行的是进行双连词和三连词的抽取,那如何进行双连词和三连词的抽取呢?这是本 ...
- Linux c读取系统内存使用信息
系统的内存使用信息能够在虚拟文件系统/proc/meminfo中找到,如图 所以只要打开/proc/meminfo文件,然后从中读取信息就好了 #include <stdio.h>#inc ...
- python--jianja2
一:渲染模版 要渲染一个模板,通过render_template方法即可. @app.route('/about/')def about():return render_template('about ...
- Python测试框架之Unittest梳理
1. 2.
- python继承和多态
继承 目标 单继承 多继承 面向对象三大特性 封装 根据 职责 将 属性 和 方法 封装 到一个抽象的 类 中 继承 实现代码的重用,相同的代码不需要重复的编写 多态 不同的对象调用相同的方法,产生不 ...
- poj1873（枚举+凸包）
The Fortified Forest Time Limit: 1000MS Memory Limit: 30000K Total Submissions: 7291 Accepted: 2 ...
- GPU知识了解
前言 今天在使用阿里云的时候,无意间看到了有GPU服务器,于是对它做了一个大概的了解. 概念 GPU是Graphics Processing Unit的缩写,翻译成中文就是图形处理器.是一种专门在个人 ...
- TestLink工具使用手册介绍
工具名称:TestLink 工具介绍:TestLink遵循Apache2开源协议,免费试用.TestLink用于进行测试过程中的管理,通过使用TestLink提供的功能,可以将测试过程从测试需求.试设 ...
- Vue+WebSocket 实现页面实时刷新长连接
最近vue项目要做数据实时刷新,折线图每秒重画一次,数据每0.5秒刷新一次,说白了就是实时刷新,因为数据量较大,用定时器估计页面停留一会就会卡死... 与后台人员讨论过后决定使用h5新增的WebSoc ...
- ecmall 入口文件解析 引入了什么
每一个框架都有自动载入的工具库,搜了半天也没搜到相关介绍,就自己看入口文件琢磨了一下, <?php define('ROOT_PATH', dirname(__FILE__)); //定义项目根 ...