js图片压缩+ajax上传
图片压缩用到了localresizeimg 地址: https://github.com/think2011/localResizeIMG
用起来比较简单
<input type="file" id="image1" class="hidden" accept="image/png,image/gif,image/jpeg" /
//图片压缩
$("input:file").change(function () {
var file = this.files[0];
lrz(file).then(function (res) {
//压缩成功
}).catch(function () {
//压缩失败
}).always(function () {
//成功失败都执行
})
});
完整代码
$("input:file").change(function () {
var self = $(this);
var file = this.files[0];
lrz(file).then(function (res) {
alert('压缩前' + (file.size / 1024).toFixed(2) + "kb");
alert('压缩后' + (res.fileLen / 1024).toFixed(2) + "kb");
var postData = new FormData();
postData.append("imgfile", res.file);
postData.append("name", file.name);//解决重命名的问题
$.ajax({
url: '/APP/Inventory/UploadImg',
data: postData,
type: 'post',
contentType: false,//禁止修改编码
processData: false,//不要把data转化为字符
beforeSend: function () {
//加载层
layer.open({
type: 2,
shadeClose: false,
content: '上传中...'
});
},
success: function (data) {
data = eval("(" + data + ")");//返回的是json字符串,需要转为json对象
if (data.state == 1) {
self.prev().children("img").attr("src", res.base64); //预览
self.next().val(data.LogMessage);
}
else {
$alertMsg(data.message);
}
},
error: function () {
$alertMsg("上传失败,请重试!");
},
complete: function () {
console.log("上传结束");
layer.closeAll();
}
});
}).catch(function () {
console.log("失败");
}).always(function () {
self.val("");//清空上传控件
console.log("压缩完毕")
})
});
后台控制器
public ActionResult UploadImg(HttpPostedFileBase imgfile, string name)
{
// }
js图片压缩+ajax上传的更多相关文章
- 使用ajax上传图片,支持图片即时浏览,支持js图片压缩后上传给服务器
使用ajax上传图片,支持图片即时浏览,支持js图片压缩后上传给服务器 ajax上传主要使用了 var reader = new FileReader() 此方法 js图片压缩主要是利用canvas进 ...
- 项目分享五:H5图片压缩与上传
一.简介 图片的压缩与上传,是APP里一个很常用的功能.我们来年看 ChiTuStore 是怎样做的.相关文件 App/Module/User/UserInfo.html,App/Module/Use ...
- vue开发中vue-resource + canvas 图片压缩、上传、预览
1.使用vue-resource上传,也可以自定义ajax上传: 2.使用<input type="file" @change="submit()" na ...
- (转)Android学习-使用Async-Http实现图片压缩并上传功能
(转)Android学习-使用Async-Http实现图片压缩并上传功能 文章转载自:作者:RyaneLee链接:http://www.jianshu.com/p/940fc7ba39e1 让我头疼一 ...
- JS图片多个上传,并压缩为Base64
首先是JS 批量上传 HTML <div id="Pic_pass"> <p style="font-size: 20px;font-weight: b ...
- H5图片压缩与上传
接到需求,问前端是否可以压缩图片?因为有的图片太大,传到服务器上再压缩太慢了.意识里没有这么玩过,早上老大丢来一个知乎链接,一看,原来前辈们已经用canvas实现了(为自己的见识羞愧3秒钟,再马上开干 ...
- Android的图片压缩并上传
Android开发中上传图片很常见,一般为了节省流量会进行压缩的操作,本篇记录一下压缩和上传的方法. 图片压缩的方法 : import java.io.ByteArrayOutputStream; i ...
- js图片压缩上传
最近公司的移动产品相约app要做一次活动,涉及到图片上传,图片又不能太大,不然用户体验太差,必须先压缩再上传,所以用到了html5的canvas和FileReader,代码先上,小弟前端经验不足,代码 ...
- HTML5 file API加canvas实现图片前端JS压缩并上传
一.图片上传前端压缩的现实意义 对于大尺寸图片的上传,在前端进行压缩除了省流量外,最大的意义是极大的提高了用户体验. 这种体验包括两方面: 由于上传图片尺寸比较小,因此上传速度会比较快,交互会更加流畅 ...
随机推荐
- Mysql数据库之备份还原(mysqldump,LVM快照,select备份,xtrabackup)
备份类型: 热备份:读写不受影响 温备份:仅可执行读备份 冷备份:离线备份,读写均不能执行,关机备份 物理备份和逻辑备份 物理备份:复制数据文件,速度快. 逻辑备份:将数据导出之文本文件中,必要时候, ...
- Linux——清除服务器的日志文件
前言 无论多大的磁盘都遭不住日志文件的糟蹋啊,所以还是需要定时的清除一下. 命令 查找所有.log结尾的文件删除 find / -name "*.log" -exec rm -rv ...
- 重新学习Spring注解——ICO
02.组件注册-@Configuration&@Bean给容器中注册组件 03.组件注册-@ComponentScan-自动扫描组件&指定扫描规则 04.组件注册-自定义TypeFil ...
- Ql004(母牛的故事)
一,看题目 1,这个虽然我不想说,但是我确实不会,但是我的意思是你可以不会但是不能每次都不会那咋办? 二,看题解 1,你得大概知道这个东西是考啥的(虽然这个东西提前给你说了是d递归),但是考试肯定没人 ...
- ESA2GJK1DH1K升级篇: STM32远程乒乓升级,基于WIFI模块AT指令TCP透传方式,定时访问升级(含有数据校验)
实现功能概要 定时使用http访问云端的程序版本,如果版本不一致,然后通过http下载最新的升级文件,实现升级. 测试准备工作(默认访问我的服务器,改为自己的服务器,请看后面说明) 一,下载BootL ...
- 使用Python3进行AES加密和解密 输入的数据
高级加密标准(英语:Advanced Encryption Standard,缩写:AES),在密码学中又称Rijndael加密法,是美国联邦政府采用的一种区块加密标准.这个标准用来替代原先的DES, ...
- ES6新增的数组方法
ES6新增:(IE9级以上支持) 1.forEach():遍历数组,无返回值,不改变原数组. 2.map():遍历数组,返回一个新数组,不改变原数组. 3.filter():过滤掉数组中不满足条件的值 ...
- 洛谷 P1508
P1508 所属知识点:DP 主要题意: 就是求一个矩阵从下边走到上边,可以走自己前方或左前方或右前方. 问走到上边一共经过的路径和. 类型题:P1216 解题思路: 参考上边的类型题(因为比较简单) ...
- vue+element 表单验证
效果图 <template> <div class="formValidator"> <div v-for="(item,index) in ...
- Alpha冲刺——测试篇
课程信息 课程 软件工程1916|W(福州大学) 团队名称 修!咻咻! 作业要求 项目Alpha冲刺 团队目标 切实可行的计算机协会维修预约平台 团队信息 队员学号 队员姓名 个人博客地址 备注 22 ...