利用lrz.bundle.js实现图片压缩上传
作者:winnie
html部分:
<form action="" method="post" enctype="multipart/form-data">
<input class="upload-name-img-input" type="file" name="file" accept="image/*" value="">
</form>
js部分:
下载
<script src="./js/compress/lrz.bundle.js"></script>
下载地址: https://github.com/think2011/localResizeIMG
<script src="./js/jquery.min.js"></script>
//图片上传压缩方法
function compressImg(fileDom,form,callback){
var that = fileDom;
lrz(that.files[0], {
width: 800 //width:640这个代表的是图片占得内存的大小,值越小,占内存越小
}).then(function (rst) {
// 表单另外所带的参数
form.serializeArray().map(function (x) {
rst.formData.append(x.name,x.value);
});
callback(rst.formData);
});
}
// 上传按钮注册事件
$('.upload-name-img-input').live('change',function(event){
if (isUploadImgFlag) {
isUploadImgFlag = false;
setImgUploadDisable();
var currDom = $(this);
var files = event.target.files;
var fileSize = files[0].size;
if (parseInt(fileSize) > 30 * 1024 * 1024) {
currDom.val('');
isUploadImgFlag = true;
return false;
}
compressImg(this,currDom.parents('form'),function(formData){
$.ajax({
url: "uploadUrl", // 上传文件接口地址
data: formData,
cache: false,
// async:false,
processData: false,
contentType: false,
type: 'post',
dataType:'json',
success: function (data) {
// data=JSON.parse(data);
currDom.parents('.upload-name-img-btn').prev().find('.uploading-li').hide();
if(data.success){
consolel.log("上传成功")
}else{
console.log(data.msg);
}
isUploadImgFlag = true;
},
error: function(){
isUploadImgFlag = true;
}
});
});
}
});
猜你喜欢
您可能感兴趣的文章:
- golang字符串替换
- golang is an unexported field of struct type
- 第一个 Go 程序
- H5 过滤输入法输入表情
- vue.js中使用Export2Excel导出Excel表格
- 微信小程序 封装api 接口文件文件 与 调用
- 微信小程序 滚动banner
- 微信6.7.4 ios12软键盘顶起页面后隐藏不回弹解决方案
- vue 移动端css 初始化
- vue 不支持ie11解决方案
- Vue InputNumber 计数器
- vue 自定义单选和多选组件
- Vue 递归组件 属性组件无限级
- 测试
- web前端开发之网页制作流程
- mac 电脑使用vue-cli命令
- PHP strip_tags() 函数去掉字符串中的 HTML 标签
- PHP 是什么?
- mac 10.15 /bin/zsh zsh: fork failed: resource temporarily unavailable