jqWEUI对图片压缩并上传

jqWEUI样式，加图片上传到页面并预览

-------------------------------------------------

补充：增加了图片压缩js 2018年6月29日

--------------------------------------------------

1、首先介绍下背景：项目最近更新，增加了些功能，其中用到了上传图片。由于是微信端而且用到了WEUI，去jqWEUI官网翻了翻，找到了一些挺实用的样式，但是没有对应的js组件。于是决定自己搞一个，由于功能比较简单所以可能考虑的不是很全面，程序吗，肯定会有bug，先把目前的样式贴出来：

效果如上，选择图片点击打开，预览出展示当前选择的图片。再次点击预览图片放大到全屏，可以选择删除。再重新上传。

jqWEUi版本的话全部引用的官网cdn

<!-- head 中 -->
<link rel="stylesheet" href="https://cdn.bootcss.com/weui/1.1.2/style/weui.min.css">
<link rel="stylesheet" href="https://cdn.bootcss.com/jquery-weui/1.2.0/css/jquery-weui.min.css"><!-- body 最后 -->
<script src="https://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/jquery-weui/1.2.0/js/jquery-weui.min.js"></script>

代码如下：

    //css部分<style>ul,li{list-style: none;margin:0;padding: 0;}ul{width:100%;display: flex;justify-content: space-evenly;font-size: .5rem;}li{text-align: center;}li>div{display: inline-block;position: relative;}.hide{display: none;}</style> //html<div class="weui-cell"><div class="weui-cell__hd"><label class="weui-label">证件照片：</label></div><div class="weui-cell__bd"><ul><li imgNum="1"> //此处的imgNum可以填写需要的字段 不一定是数字//图片选择input<div class="weui-uploader__input-box"><input class="weui-uploader__input"  type="file" accept="image/*" multiple=""></div><div class="add_img weui-uploader__file hide"></div>//预览div<p>身份证照片</p>//文字介绍</li></ul></div>//图片全屏预览<div class="weui-gallery" id="modal"><!--照片查看--><span class="weui-gallery__img" ></span><input type="hidden"><div class="weui-gallery__opr"><a href="javascript:" class="weui-gallery__del"><i class="weui-icon-delete weui-icon_gallery-delete"></i></a></div></div></div>//js"use strict"/** 设置微信端上传图片* */class getImgData{constructor(){this.imgData = {};this.init();}init(){let that = this;//绑定选择that.bingChange();//绑定显示图片that.viewImg();//绑定删除图片that.deleteImg();//点击span时缩小$("#modal span").click(()=>{$("#modal").hide();})}bingChange(){let that = this;$("input[type=file]").change(function(){let reader = new FileReader();reader.onload = evt => {//如果文件大于1M压缩图片   图片压缩console.log("压缩前"+that.showSize(evt.target.result)+"kb")if(this.files[0].size > 1*1024*1024){that.dealImage(evt.target.result,{w:"500",h:"500",quality:0.5},res => {console.log("压缩后"+that.showSize(res)+"kb")that.setImg($(this).parents("li").attr("imgNum"),{"base64":res,"file":this.files[0]});})}else{that.setImg($(this).parents("li").attr("imgNum"),{"base64":evt.target.result,"file":this.files[0]});}}reader.readAsDataURL(this.files[0]);})}viewImg(){$("div.add_img").click(function(){$("#modal").show().find("span").css("backgroundImage",$(this).css("backgroundImage")).attr("imgNum",$(this).parents("li").attr("imgNum"));})}deleteImg(){let that = this;$(".weui-gallery__del").click(()=>{$.confirm("您确定要删除该张照片吗", "确认删除?", function() {that.setImg($("#modal span").attr("imgNum"))$("#modal").hide();$.toast("图片已经删除!");}, function() {//取消操作);})}setImg(imgNum,data){// imgNum 每个li的imgNum标识  data 图片路径if(data && data['base64']){this.imgData["data_"+imgNum] = {'base64' : data.base64 ,'file' : data.file};$("li[imgNum = "+ imgNum +"]").find(".weui-uploader__input-box").hide().next(".add_img").show().css("backgroundImage",`url(${data['base64']})`);}else{this.imgData["data_"+imgNum] = null;$("li[imgNum = "+ imgNum +"]").find(".weui-uploader__input-box").show().next(".add_img").css("backgroundImage","").hide();}}getImg(){//调用此方法可以拿到保存的图片数组return this.imgData}dealImage(path, obj, callback){//压缩img  path 图片路径 obj{w:压缩后图片宽,h:压缩后图片高,quality:图片质量}var img = new Image();img.src = path;img.onload = function(){var that = this;// 默认按比例压缩var w = that.width,h = that.height,scale = w / h;w = obj.width || w;h = obj.height || (w / scale);var quality = 0.5;  // 默认图片质量为0.5//生成canvasvar canvas = document.createElement('canvas');var ctx = canvas.getContext('2d');// 创建属性节点var anw = document.createAttribute("width");anw.nodeValue = w;var anh = document.createAttribute("height");anh.nodeValue = h;canvas.setAttributeNode(anw);canvas.setAttributeNode(anh);ctx.drawImage(that, 0, 0, w, h);// 图像质量if(obj.quality && obj.quality <= 1 && obj.quality > 0){quality = obj.quality;}// quality值越小，所绘制出的图像越模糊var base64 = canvas.toDataURL('image/jpeg', quality );// 回调函数返回base64的值callback(base64);}}showSize(base64url) {//获取base64图片大小，返回KB数字var str = base64url.replace('data:image/png;base64,', '');var equalIndex = str.indexOf('=');if(str.indexOf('=')>0) {str=str.substring(0, equalIndex);}var strLength=str.length;var fileLength=((strLength-(strLength/8)*2)/1024).toFixed(1);return fileLength;}}var imgData = new getImgData();$(".submit").click(()=>{console.log(imgData.getImg())})

老版本的发现上传的图片过大，用户体验非常差所以新增了图片压缩这一步。git地址：jqWeUi图片上传

jqWEUI对图片压缩并上传相关推荐

js图片压缩后上传方法,图片超过1M先进行压缩，然后再上传
js图片压缩后上传方法,图片超过1M先进行压缩,然后再上传图片上传目录 js图片压缩后上传方法,图片超过1M先进行压缩,然后再上传 html代码 js代码 html代码 <input type ...
返回图片_Vue 图片压缩并上传至服务器
日常开发中经常会遇到上传图片的需求,随着手机的蓬勃发展,现在拍出来的照片分辨率越来越高,随之带来的问题就是图片占用空间越来越大,如果我们直接上传图片可能就会浪费很大一笔资源,本文主要讲解基于 Vue ...
android 快速实现图片压缩与上传
由于最近项目更新功能比较的忙,也没时间去整理自己的知识点和管理自己的博客.在android对手机相册中的图片的压缩和上传到服务器上,这样的功能在每个app开发中都会有这样的需求.所以今天就对andro ...
Vue 图片压缩并上传至服务器
本文主要讲解基于 Vue + Vant ,实现移动端图片选择,并用 Canvas 压缩图片,最后上传至服务器.还会封装一个工具类,方便直接调用. 一.工具类封装废话不多说先上代码,封装一个 Comp ...
Bmob+Luban（鲁班）压缩图片实现相册选择图片压缩后上传到Bmob后台Glide加载图片显示到本地
源代码已上传CSDN:https://download.csdn.net/download/qq_16519957/11068345 因为本章需要跟前面的知识结合起来看所以就做了一个前面链接方便大家查 ...
js图片压缩java上传,JS实现异步上传压缩图片
摘要: 使用iframe来处理异步上传图片,在现在这个时代来说,多多少少都有点落后了!单单就凭AJAX和JS就不能做到异步上传图片了吗? 先看调用页面: 选择图片 var img; $("i ...
js图片压缩并上传？
js: var eleFile = document.querySelector('#file'); // 压缩图片需要的一些元素和对象 var reader = new FileReader(); ...
Android的图片压缩并上传
Android开发中上传图片很常见,一般为了节省流量会进行压缩的操作,本篇记录一下压缩和上传的方法. 图片压缩的方法 : import java.io.ByteArrayOutputStream; i ...
Java图片压缩并上传
public void uploadFile(@RequestParam(value = "file", required = false)MultipartFile[] file ...

jqWEUI对图片压缩并上传

jqWEUI样式，加图片上传到页面并预览

jqWEUI对图片压缩并上传相关推荐

最新文章

热门文章