上传图片前端js压缩

傷城~ 2022-09-22 03:49 267阅读 0赞

function uploadImg(_this) {
    	  	var fileName = _this.value;//文件名
    		var extension = new String(fileName.substring(fileName.lastIndexOf('.')+1,fileName.length)).toLowerCase();//文件拓展名
    		if (extension == 'jpg'||extension == 'jpeg'||extension == 'png'||extension == 'gif'||extension == 'bmp'){
    		    //压缩图片
    		    lrz(_this.files[0], {
    		        width: 480,//图片宽度
    		        quality: 0.9 //图片质量
    		    },
    		    function(rst) {
    		        var show_img = new Image();
    		        show_img.src = rst.base64; //加密图片流
    		        _this.src = show_img.src; //将图片流赋值给input的src
    		        $("#form1").ajaxSubmit({
    		            type: "post",
    		            dataType: "json",
    		            data: {
    		                'fileStream': _this.src //将base64加密的图片流上传到服务器
    		            },
    		            success: function(data) {
    		                if (data == "error") {
    		                    jAlert("上传失败！", "提示");
    		                } else {
    		                    $("#ddyyImg").attr("src", data);
    		                    $("#imgPath").val(data);
    		                }
    		            }
    		        });
    		    });
    		}else{
    			jAlert("文件格式不正确！", "提示");
    	  	}
    	}

<input type="file" accept="image/*" id="imageurl" name="imageurl" οnchange="uploadImg(this);"/>

需要引入js文件：lrz.mobile.min.js（[附下载链接][Link 1]）

示例代码：TestDemo（[附下载地址][Link 2]）

参考方案localResizeIMG3-3.0.20.tar（感谢博主提供）-[附下载链接][Link 3]

[Link 1]: http://download.csdn.net/detail/u014676619/9560325
[Link 2]: http://download.csdn.net/detail/u014676619/9560438
[Link 3]: http://download.csdn.net/detail/u014676619/9560459

发表评论取消回复

表情：

评论列表（有 0 条评论，267人围观）

还没有评论，来说两句吧...

相关阅读

相关 web 前端图片优化之--图片压缩上传

[移动前端—图片压缩上传实践][Link 1] 　　此前有同事跟我聊过关于移动端用canvas压缩图片后再上传的功能，最近有了点空闲时间，所以就实践了一下。demo效果

分手后的思念是犯贱/ 2023年10月11日 15:29/ 0 赞/ 61 阅读

相关前端canvas实现图片压缩及上传

以下案例：包含本地图片上传及图片压缩大致思路：上传图片，读取图片信息及展示缩略图使用的是 FileRender，在图片加载完成后的onload处理函数中，使用can

比眉伴天荒/ 2023年02月14日 15:45/ 0 赞/ 23 阅读

相关上传图片前端js压缩

function uploadImg(_this) { var fileName = _this.value;//文件名 var exten

傷城~/ 2022年09月22日 03:49/ 0 赞/ 268 阅读

相关 JS-前端实现图片上传

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR

- 日理万妓/ 2022年07月12日 01:10/ 0 赞/ 263 阅读

相关 JS—图片压缩上传（单张）

\vue+webpack环境，这里的that指到vue实例 <input type="file" name="file" accept="image/" @chang

淩亂°似流年/ 2022年04月03日 03:48/ 0 赞/ 345 阅读

相关 js（jquery-weui）前端压缩图片以及上传，python后台处理保存图片

此demo为大于1M对图片进行压缩上传（[纯js的质量压缩，非长宽压缩)][js] 若小于1M则原图上传，可以根据自己实际需求更改。 demo源码如下： <!DO

蔚落/ 2022年02月20日 07:27/ 0 赞/ 340 阅读

相关 localResizeIMG:图片压缩上传

vant-ui Uploader 图片上传组件 + localResizeIMG 实现图片压缩上传：一、npm安装： npm install lrz复制代码

客官°小女子只卖身不卖艺/ 2022年01月20日 04:59/ 0 赞/ 435 阅读

相关前端图片压缩上传(纯js的质量压缩，非长宽压缩)

<meta charset="UTF-8"> <title> XMLHttpRequest上传文件 </title> <script type="text/javascript

偏执的太偏执、/ 2021年12月17日 06:25/ 0 赞/ 308 阅读

相关 JQ图片压缩上传

css { margin: 0; padding: 0; } li {

以你之姓@/ 2021年09月16日 11:54/ 0 赞/ 557 阅读

相关 flutter压缩图片上传

前言：在android原生中比较常用的是luban压缩，当然，flutter版本也有luban压缩，通过一些资料搜索，luban压缩是直接通过dart进行压缩的，

落日映苍穹つ/ 2021年09月03日 10:47/ 0 赞/ 908 阅读