手机端图片有很大的,上传的时候很慢,这时候就要压缩一下了,有一个开源的js可以压缩图片的大小,开源地址如下:https://github.com/think2011/localResizeIMG3

代码如下:

    // 上传图片
function uploadFile(path) {
var type = plus.storage.getItem("upload_goods_image");
//选择成功
$("#heisebg").removeClass("heisebg").addClass("heisebghid");
$("#waitingupload").removeClass("heisebghid").addClass("heisebg"); //https://github.com/think2011/localResizeIMG3
// 压缩图片
lrz(path, {
width: 500,
quality: 0.7,
done: function (results) {
$.ajax({
type: "POST",
url: configManager.RequstUrl + "api/common/base64upload",
async: true,
data: { base64: results.base64, size: results.base64.length, dir: "goods" }
}).done(function (data) {
if (data.state != "success") { console.log(data.message); return; }
var src = configManager.goodsImgurl.format(data.id, "") + '500-200';
if ("addspic" == type) {
var sImageStr = "<img width='98%' onclick='javascript:$(this).remove();' class='spic' title='{0}' src='{1}'>";
$("#addspic").before(sImageStr.format(data.id, src));
}
if ("addbpic" == type) {
var bImageStr = "<img width='98%' id='bpic' title='{0}' src='{1}'/>";
$("#addbpic").html(bImageStr.format(data.id, src));
}
$("#waitingupload").removeClass("heisebg").addClass("heisebghid");
try { myScroll.refresh(); } catch (err) { }
}).fail(function () {
plus.nativeUI.toast("上传失败!");
$("#waitingupload").removeClass("heisebg").addClass("heisebghid");
});
}
});
}

html5压缩图片并上传的更多相关文章

  1. 使用canvas压缩图片 并上传

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  2. HTML5裁剪图片并上传至服务器实现原理讲解

    HTML5裁剪图片并上传至服务器实现原理讲解   经常做项目需要本地上传图片裁剪并上传服务器,比如会议头像等功能,但以前实现这类需求都很复杂,往往需要先把图片上传到服务器,然后返回给用户,让用户确定裁 ...

  3. 导出HTML5 Canvas图片并上传服务器功能

    这篇文章主要介绍了导出HTML5 Canvas图片并上传服务器功能,文中通过实例代码给大家介绍了HTML5 Canvas转化成图片后上传服务器,代码简单易懂非常不错,具有一定的参考借鉴价值,需要的朋友 ...

  4. HTML5 Canvas前台压缩图片并上传到服务器

    1.前台代码: <input id="fileOne" type="file" /> <input id="btnOne" ...

  5. ios中摄像头/相册获取图片,压缩图片,上传服务器方法总结

    相册 iphone的相册包含摄像头胶卷+用户计算机同步的部分照片.用户可以通过UIImagePickerController类提供的交互对话框来从相册中选择图像.但是,注意:相册中的图片机器路径无法直 ...

  6. 基于HTML5多图片Ajax上传可预览

    html5多图控件<input id="fileImage" type="file" size="30" name="fil ...

  7. javaScript:压缩图片并上传

    html代码: <input id="file" type="file" name="filesName"> js代码: var ...

  8. Xamarin.Android 压缩图片并上传到WebServices

    随着手机的拍照像素越来越高,导致图片赞的容量越来越大,如果上传多张图片不进行压缩.质量处理很容易出现OOM内存泄漏问题. 最近做了一个项目,向webservices上传多张照片,但是项目部署出来就会出 ...

  9. js压缩图片并上传,不失真,保证图片清晰度

    <!DOCTYPE HTML> <html lang="zh-CN"> <head> <meta charset="UTF-8& ...

随机推荐

  1. Microsoft SQL Server,附加数据库 错误:Error 916解决方法

    错误信息:错误提示:标题: Microsoft SQL Server Management Studio Express ——————————  无法为此请求检索数据. (Microsoft.SqlS ...

  2. ALV常用参数详细描述

    调用功能模块: CALL FUNCTION 'REUSE_ALV_GRID_DISPLAY' EXPORTING i_interface_check        = ''               ...

  3. Android Studio 插件的使用

    1.GsonFormat https://github.com/zzz40500/GsonFormat 2.Android SelectorChapek     http://blog.csdn.ne ...

  4. 编译hadoop eclipse的插件(hadoop1.0)

    原创文章,转载请注明: 转载自工学1号馆 欢迎关注我的个人博客:www.wuyudong.com, 更多云计算与大数据的精彩文章 在hadoop-1.0中,不像0.20.2版本,有现成的eclipse ...

  5. IOS 瀑布流UICollectionView实现

    IOS 瀑布流UICollectionView实现 在实现瀑布流之前先来看看瀑布流的雏形(此方法的雏形 UICollectionView) 对于UICollectionView我们有几点注意事项 它和 ...

  6. centos性能监控系列三:监控工具atop详解

    引言 Linux以其稳定性,越来越多地被用作服务器的操作系统(当然,有人会较真地说一句:Linux只是操作系统内核:).但使用了Linux作为底层的操作系统,是否我们就能保证我们的服务做到7*24地稳 ...

  7. Centos 源配置 163,epel,mysql

    http://mirrors.163.com/.help/centos.html CentOS7-Base-163.repo # CentOS-Base.repo # # The mirror sys ...

  8. android5.x新特性之Tinting

    Android5.X对图形操作上有更多的功能.下面来看看Tinting(着色) Tinting的使用非常简单,几乎 没什么好说的,只要在xml中配置好tint和tintMode即可.直接看实际例子吧. ...

  9. Effective Java 52 Refer to objects by their interfaces

    Principle If appropriate interface types exist, then parameters, return values, variables, and field ...

  10. 大数据架构-使用HBase和Solr将存储与索引放在不同的机器上

    大数据架构-使用HBase和Solr将存储与索引放在不同的机器上 摘要:HBase可以通过协处理器Coprocessor的方式向Solr发出请求,Solr对于接收到的数据可以做相关的同步:增.删.改索 ...