图片压缩用到了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上传的更多相关文章

  1. 使用ajax上传图片,支持图片即时浏览,支持js图片压缩后上传给服务器

    使用ajax上传图片,支持图片即时浏览,支持js图片压缩后上传给服务器 ajax上传主要使用了 var reader = new FileReader() 此方法 js图片压缩主要是利用canvas进 ...

  2. 项目分享五:H5图片压缩与上传

    一.简介 图片的压缩与上传,是APP里一个很常用的功能.我们来年看 ChiTuStore 是怎样做的.相关文件 App/Module/User/UserInfo.html,App/Module/Use ...

  3. vue开发中vue-resource + canvas 图片压缩、上传、预览

    1.使用vue-resource上传,也可以自定义ajax上传: 2.使用<input type="file" @change="submit()" na ...

  4. (转)Android学习-使用Async-Http实现图片压缩并上传功能

    (转)Android学习-使用Async-Http实现图片压缩并上传功能 文章转载自:作者:RyaneLee链接:http://www.jianshu.com/p/940fc7ba39e1 让我头疼一 ...

  5. JS图片多个上传,并压缩为Base64

    首先是JS 批量上传 HTML <div id="Pic_pass"> <p style="font-size: 20px;font-weight: b ...

  6. H5图片压缩与上传

    接到需求,问前端是否可以压缩图片?因为有的图片太大,传到服务器上再压缩太慢了.意识里没有这么玩过,早上老大丢来一个知乎链接,一看,原来前辈们已经用canvas实现了(为自己的见识羞愧3秒钟,再马上开干 ...

  7. Android的图片压缩并上传

    Android开发中上传图片很常见,一般为了节省流量会进行压缩的操作,本篇记录一下压缩和上传的方法. 图片压缩的方法 : import java.io.ByteArrayOutputStream; i ...

  8. js图片压缩上传

    最近公司的移动产品相约app要做一次活动,涉及到图片上传,图片又不能太大,不然用户体验太差,必须先压缩再上传,所以用到了html5的canvas和FileReader,代码先上,小弟前端经验不足,代码 ...

  9. HTML5 file API加canvas实现图片前端JS压缩并上传

    一.图片上传前端压缩的现实意义 对于大尺寸图片的上传,在前端进行压缩除了省流量外,最大的意义是极大的提高了用户体验. 这种体验包括两方面: 由于上传图片尺寸比较小,因此上传速度会比较快,交互会更加流畅 ...

随机推荐

  1. yum lockfile is held by another process

    使用yum安装软件报错 yum lockfile is held by another process 解决方法 rm -f /var/run/yum.pid

  2. Go内置常用包

    strings 字符串函数 Contains(s, substr string) bool 字符串s是否包含字符串substr,包含返回true Split(s, sep string) []stri ...

  3. PacMan 03——追踪玩家

    版权申明: 本文原创首发于以下网站: 博客园『优梦创客』的空间:https://www.cnblogs.com/raymondking123 优梦创客的官方博客:https://91make.top ...

  4. 性能测试基础---jmeter参数化、关联、事物、检查的等

    ·Jmeter脚本增强·性能测试的脚本增强技术:参数化.关联.事务.检查点.思考时间和集合点. ·参数化:在Jmeter中,实现参数化的方式很多.本质上来说,参数化的实现方式有两种:·文件方式:一般建 ...

  5. Kustomize安装配置入门文档

    一,简介 kustomize是sig-cli的一个子项目,它的设计目的是给kubernetes的用户提供一种可以重复使用同一套配置的声明式应用管理,从而在配置工作中用户只需要管理和维护kubernet ...

  6. Memcache未授权访问漏洞简单修复方法

    漏洞描述: memcache是一套常用的key-value缓存系统,由于它本身没有权限控制模块,所以开放在外网的memcache服务很容易被攻击者扫描发现,通过命令交互可直接读取memcache中的敏 ...

  7. 10-赵志勇机器学习-meanshift

    (草稿) meanshift 也是一种聚类方法. 优点在于:不需要提前指定类型数. 缺点就是计算量大 过程:(最一般的做法,没有使用核函数) 1. 逐点迭代,设置为位置中心 2. 计算所有点到位置中心 ...

  8. MongoDB基础知识与常用命令

    SQL术语/概念 MongoDB术语/概念 解释/说明 database database 数据库 table collection 数据库表/集合 row document 数据记录行/文档 col ...

  9. Mac 键盘符号说明

    Mac 键盘符号说明 ⌘ == Command ⇧ == Shift ⇪ == Caps Lock ⌥ == Option ⌃ == Control ↩ == Return/Enter ⌫ == De ...

  10. Quay: Introducing an Application Registry for Kubernetes

    转自: https://coreos.com/blog/quay-application-registry-for-kubernetes.html When we started Quay, we w ...