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为 ...
随机推荐
- mysql 表中已经存在数据 修改字段类型 varchar(11) 改为 int(11)
update tablename set s_role = '' alter table tablename modify column s_role int(11)
- SVN 常见报错
1.svn is out of date 出错原因:SVN服务器端的版本比你的版本要新,不允许提交. 解决方案1:右键你所要提交的文件,team-->update 更新最新版本 然后再提 ...
- 负载均衡----实现配置篇（Nginx）
同类文章:负载均衡----概念认识篇 吐槽:自从那篇“探讨负载均衡”那篇文章被博客园吐槽后,心里极度不平衡,思来想去还是把名字改成“负载均衡----概念认识篇”,再加多几篇文章来诠释上篇文章的精华所在 ...
- Visual Studio Code--开发大大们都在用的编辑器
老公推荐的炒鸡nb的编辑器...说让我看起来像个假大神(微笑脸) 如何用VSCode练习python呢,还有VSCode有哪些常用的功能和快捷键呢?我会持续更新中... 1. 先来换个喜欢的颜色主题吧 ...
- ChinaCock界面控件介绍-TCCBarcodeCreator
条码生成器,可以生成各种条码,包括二维码.这是一个不可视控件.用起来依旧简单. 属性说明: BarCodeColor:生成条码的颜色 BarcodeFormat:生成条码的类型,支持的条码类型: Bo ...
- 网络爬虫之网站图片爬取-python实现
版本1.5 本次简单添加了四路多线程(由于我电脑CPU是四核的),速度飙升.本想试试xPath,但发现反倒是多此一举,故暂不使用 #-*- coding:utf-8 -*- import re,url ...
- 剑指Offer 13. 调整数组顺序使奇数位于偶数前面 （数组）
题目描述 输入一个整数数组,实现一个函数来调整该数组中数字的顺序,使得所有的奇数位于数组的前半部分,所有的偶数位于数组的后半部分,并保证奇数和奇数,偶数和偶数之间的相对位置不变. 题目地址 https ...
- Ubuntu16.04 安装 MySQL
本篇介绍如何在Ubuntu系统上安装MySQL数据库,以及介绍数据库的基本命令. 一.下载和安装MySQL 可以通过apt-get下载并安装 sudo apt-get install mysql-se ...
- c程序的期望
对于C语言,我认为是我们计算机专业必须掌握的,如果C语言都不能掌握好,我认为在以后的学习中也不会学的有多好,所以,我们要把C语言尽量掌握好,也是在今后的学习中打好基础,多看书,多写一些程序运行,做一些 ...
- 如何用Python写一个每分每时每天的定时程序
1.计算生日是星期几 当你女朋友要过生日了,你肯定要定找家饭店订个餐庆祝一下,餐馆工作日会空一些,周末位置不好定,要是能知道她的生日是星期几就好了,下面这个程序就能搞定~~ 比如girl friend ...