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为 ...
随机推荐
- 【转】 SQL - 生成指定范围内的随机数
DECLARE @Result INT DECLARE @Upper INT DECLARE @Lower INT SET @Lower = 1 SET @Upper = 10 SELECT @Res ...
- K2在Gartner 2017 iBPMS魔力象限报告中上升为“挑战者”
在Gartner近期发布的iBPMS MQ报告中,Gartner分析了入选的19家厂商,将K2列为智能业务流程管理系统(iBPMS)MQ(魔力象限)的“挑战者”.从下列图中可以看出,相比上期,K2从魔 ...
- java中一些对象(po,vo,dao,pojo)等的解释
一.PO:persistant object 持久对象,可以看成是与数据库中的表相映射的java对象.最简单的PO就是对应数据库中某个表中的一条记录,多个记录可以用PO的集合.PO中应该不包含任何对 ...
- SamplesHashtable
using System; using System.Collections; public class SamplesHashtable { public static void Main() { ...
- Qthread的使用方法
1:重载 run()函数 2:将对象移到Qthread对象中 Movetothread 该方法必须通过信号 -槽来激发.
- APP加急审核
提交加急审核需要理由,一般涉及到银行信息,或者崩溃打不开这种的比较容易通过.反正苹果很苛刻,一般不给处理.如果处理第二天就可以下载最新了,省去了漫漫的等待.一个成功加急审核的借口-- We found ...
- Python全栈之路----数据类型—元组类型
元组类型:有序,不可变的,又叫只读列表 names = ("alex","jack","eric") 1.元组本身不可变,但如果元组中有可 ...
- python学习之路06——字符串
字符串 1.概念 字符串就是由若干个字符组成的有限序列 字符:字母,数字,特殊符号,中文 表示形式:采用的单引号或者双引号 注意:字符串属于不可变实体 2.创建字符串 str1 = "hel ...
- Web服务器之Nginx详解（操作部分）
大纲 一.前言 二.Nginx 安装与配置 三.Nginx 配置文件详解 四.Nginx 命令参数 五.配置Nginx提供Web服务 六.配置Nginx的虚拟主机 七.配置Nginx的用户认证 八.配 ...
- centos7通过yum安装mysql，并授权远程连接 【转】
http://blog.csdn.net/u012367513/article/details/40538267 用于备忘