Html5 canvas 客户端图像大小调整-画布大小调整添加多个文件选项
canvasResize是一个插件。它可以在上传之前调整客户端的图片大小。非常好！但是这个示例只提供单文件上传，请帮助我编辑多个文件，非常感谢！！！ 以下是单文件方法代码：Html5 canvas 客户端图像大小调整-画布大小调整添加多个文件选项,html5-canvas,image-resizing,Html5 Canvas,Image Resizing,canvasResize是一个插件。它可以在上传之前调整客户端的图片大小。非常好！但是这个示例只提供单文件上传，请帮助我编辑多个文件，非常感谢！！！ 以下是单文件方法代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title></title> </head> <
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<style>
#area div p { display: block; width: 300px; }
#area div p span { display: block; padding: 2px 0; width: 0; background: #193; text-align: center; }
#area b, #area img { display: block; }
#area img { margin: 10px 0; width: 300px; }
#area input { visibility: hidden; height: 0; }
#area u { display: block; padding: 15px; text-align: center; background: #ddd; border-radius: 6px; }
</style>
<div id="area">
<h3>canvasResize</h3>
<div>
<input name="photo" type="file" multiple="multiple"/>
<u>Choose file</u>
<p><span></span></p>
<i></i> </div>
<script>
$().ready(function() {
$('#area u').click(function() {
$('input[name=photo]').trigger('click');
});
$('input[name=photo]').change(function(e) {
var file = e.target.files[0];
// RESET
$('#area p span').css('width', 0 + "%").html('');
$('#area img, #area canvas').remove();
$('#area i').html(JSON.stringify(e.target.files[0]).replace(/,/g, ", <br/>"));
// CANVAS RESIZING
$.canvasResize(file, {
width: 800,
height: 0,
crop: false,
quality: 80,
//rotate: 90,
callback: function(data, width, height) {
// SHOW AS AN IMAGE
// =================================================
$('<img>').load(function() {
$(this).css({
'margin': '10px auto',
'width': width,
'height': height
}).appendTo('#area div');
}).attr('src', data);
// /SHOW AS AN IMAGE
// =================================================
// IMAGE UPLOADING
// =================================================
// Create a new formdata
var fd = new FormData();
// Add file data
var f = $.canvasResize('dataURLtoBlob', data);
f.name = file.name;
fd.append($('#area input').attr('name'), f);
$.ajax({
url: 'Page2.cshtml',
type: 'POST',
data: fd,
dataType: 'json',
contentType: false,
processData: false,
beforeSend: function(xhr) {
xhr.setRequestHeader("pragma", "no-cache");
},
xhr: function() {
var xhr = new window.XMLHttpRequest();
//Upload progress
xhr.upload.addEventListener("progress", function(e) {
if (e.lengthComputable) {
var loaded = Math.ceil((e.loaded / e.total) * 100);
$('p span').css({
'width': loaded + "%"
}).html(loaded + "%");
}
}, false);
return xhr;
}
}).done(function(response) {
//console.log(response);
if (response.filename) {
// Complete
$('#area p span').html('done');
$('#area b').html(response.filename);
$('<img>').attr({
'src': response.filename
})
.appendTo($('#area div'));
}
});
// /IMAGE UPLOADING
// =================================================
}
});
});
});
</script>
<script src="~/Scripts/jquery.exif.js"></script>
<script src="~/Scripts/jquery.canvasResize.js"></script>
<script src="~/Scripts/canvasResize.js"></script>
</div>
</body>
</html>
#区域分割{显示：块；宽度：300px；}
#area div p span{显示：块；填充：2px 0；宽度：0；背景：#193；文本对齐：中心；}
#区域b，#区域img{显示：块；}
#面积{边距：10px 0；宽度：300px；}
#区域输入{可见性：隐藏；高度：0；}
#区域u{显示：块；填充：15px；文本对齐：中心；背景：#ddd；边框半径：6px；}
拉票
选择文件
$（）.ready（函数（））{
$（'#区域u'）。单击（函数（）{
$（'input[name=photo]'）。触发器（'click'）；
});
$（'input[name=photo]'）。更改（函数（e）{
var file=e.target.files[0]；
//重置
$（'#area p span'）.css（'width'，0+“%”）html（“”）；
$（“#区域img，#区域画布”）.remove（）；
$（'#area i'）.html（JSON.stringify（e.target.files[0]）。替换（/，/g，，
）；
//画布大小调整
$.canvasResize（文件{
宽度：800，
高度:0,，
作物：假，
质量：80，
//轮换：90，
回调：函数（数据、宽度、高度）{
//显示为图像
// =================================================
$（''）.attr({
“src”：response.filename
})
。附件（$）；
}
});
///图像上传
// =================================================
}
});
});
});