此demo为大于1M对图片进行压缩上传（纯js的质量压缩，非长宽压缩)
若小于1M则原图上传，可以根据自己实际需求更改。
demo源码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
<title>图片压缩上传</title>
<link rel="stylesheet" href="../../static/css/weui.css"/>
<link rel="stylesheet" href="../../static/css/example.css"/>
<link rel="stylesheet" href="../../static/css/jquery-weui.css"/>
<script src="../../static/js/example.js"></script>
<script src="../../static/js/weui.min.js"></script>
</head>
<body>
<div class="page">
<div class="weui-gallery" id="gallery">
<span class="weui-gallery__img" id="galleryImg"></span>
<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 class="weui-cells">
<div class="weui-cell">
<div class="weui-cell__bd">
<p>
<span id="" class="photo">我的照片 </span>
<ul class="weui-uploader__files" id="uploaderFiles" style="margin-top: 10px; display: none"></ul>
<div class="weui-uploader__input-box" style="margin-top: 10px">
<input id="uploaderInput" class="weui-uploader__input zjxfjs_file" type="file" accept="image/*" multiple="">
</div>
</p>
</div>
</div>
</div>
<div class="weui-btn-area">
<a href="javascript:" class="weui-btn weui-btn_primary" id="finish">上传</a>
</div>
</div>
</body>
</html>
<script src="../../static/js/zepto.min.js"></script>
<script type="text/javascript" src="../../static/js/mui.min.js"></script>
<script type="text/javascript" src="../../static/js/jquery-2.2.4.min.js"></script>
<script type="text/javascript" src="../../static/js/jquery-weui.js"></script>
<script type="text/javascript">
mui.init();
$(function () {
var uid = $('.userid').attr('id');
$gallery = $("#gallery");
$galleryImg = $("#galleryImg");
$uploaderInput = $("#uploaderInput");
$uploaderFiles = $("#uploaderFiles");
$uploaderInput.on("change", function(e) {
var src, url = window.URL || window.webkitURL || window.mozURL,
files = e.target.files;
for(var i = 0, len = files.length; i < len; ++i) {
var file = files[i];
if (url) {
src = url.createObjectURL(file);
} else {
src = e.target.result;
}
$("#finish").attr("disabled",true).css("pointer-events","none");
var tmpl = '<li class="weui-uploader__file" style="background-image:url(#url#);"></li>';
$('.weui-uploader__input-box').hide();
$uploaderFiles.show().append(tmpl.replace('#url#', src));
var Msize = (file.size/(1024*1024)).toFixed(2);
if(Msize > 1){
photoCompress(file, {
quality: 0.1
}, function(base64Codes){
var bl = convertBase64UrlToBlob(base64Codes);
var formData = new FormData();
formData.append('uid', uid);
formData.append('uploadImage', bl);
$.showLoading("上传中");
$.ajax({
type:"POST",
url: '{{ url_for('cp.upload_image') }}',
data:formData,
dataType:'json',
contentType: false,
processData: false,
timeout: 7000,
cache:false,
success: function(data) {
$.hideLoading();
},
error: function() {
$.hideLoading();
$.toast('换张图片试试吧', "forbidden");
$uploaderFiles.hide().find("li").eq(0).remove();
$('.weui-uploader__input-box').show();
}
});
});
}
else {
upload_file = $uploaderInput[0].files[0];
var formData = new FormData();
formData.append('uid', uid);
formData.append('uploadImage', upload_file);
$.showLoading("上传中");
$.ajax({
type:"POST",
url: '{{ url_for('cp.upload_image') }}',
data:formData,
dataType:'json',
contentType: false,
processData: false,
timeout: 7000,
cache:false,
success: function(data) {
$.hideLoading();
},
error: function() {
$.hideLoading();
$.toast('换张图片试试吧', "forbidden");
$uploaderFiles.hide().find("li").eq(0).remove();
$('.weui-uploader__input-box').show();
}
});
}
}
});
//预览图片
$uploaderFiles.on("click", "li", function() {
$galleryImg.attr("style", this.getAttribute("style"));
$gallery.fadeIn(100);
});
$gallery.on("click", function() {
$gallery.fadeOut(100);
});
//删除图片
$(".weui-gallery__del").click(function() {
var index = $(this).index();
$uploaderFiles.hide().find("li").eq(index).remove();
$('.weui-uploader__input-box').show();
$('.photo').attr("id", "");
});
// 提交
$('#finish').on("click", function () {
var sign = $("#sign").val().trim();
var image_url = $('.photo').attr('id');
var has_image = $("#uploaderFiles").css('display');
if(sign.length === 0 || has_image === 'none'){
$.toast("还没填完呢", "forbidden");
return false;
}
var formData = new FormData();
var status = $('.page').attr('id');
formData.append('status', status);
formData.append('uid', uid);
formData.append('sign', sign);
formData.append('photo', image_url);
$.showLoading("存档中");
$.ajax({
type:"POST",
url: '{{ url_for('cp.supply') }}',
data:formData,
dataType:'json',
contentType: false,
processData: false,
timeout: 5000,
cache:false,
success: function(data) {
$.hideLoading();
$.toast('已保存');
location.href = "{{ url_for('cp.join_success') }}"
},
error: function() {
$.hideLoading();
$.toast('服务繁忙', "forbidden");
}
});
})
});
/*
三个参数
file：一个是文件(类型是图片格式)，
w：一个是文件压缩的后宽度，宽度越小，字节越小
objDiv：一个是容器或者回调函数
photoCompress()
*/
function photoCompress(file,w,objDiv){
var ready=new FileReader();
ready.readAsDataURL(file);
ready.onload=function(){
var re=this.result;
canvasDataURL(re,w,objDiv)
}
}
function canvasDataURL(path, obj, callback){
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.1; // 默认图片质量为0.7
//生成canvas
var 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);
}
}
/**
* 将以base64的图片url数据转换为Blob
* @param urlData
* 用url方式表示的base64图片数据
*/
function convertBase64UrlToBlob(urlData){
var arr = urlData.split(','), mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
while(n--){
u8arr[n] = bstr.charCodeAt(n);
}
return new Blob([u8arr], {type:mime});
}
</script>python3 后台保存图片至服务器demo:
@cp.route('/upload_image', methods=["POST"])
def upload_image():
if request.method == 'POST':
uid = request.form.get('uid')
image = request.files['uploadImage']
image_index = uid + str(time.time()).split('.')[0] + secure_filename(image.filename)
upload_path = os.path.join('./app/static/upload_images/', image_index)
image.save(upload_path)
image_url = upload_path.lstrip('./app/static/')
return jsonify({'data': image_url})参考原文：
https://www.cnblogs.com/007sx/p/7583202.html
3357
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
