canvasResize是一个插件http://www.jqueryscript.net/layout/jQuery-Plugin-for-Client-Side-Image-Resizing-canvasResize.html。并且它可以在上传之前调整客户端的图像。非常好！但样本只提供单个文件上传，请帮我编辑多个文件，非常感谢!!! 这是单文件方法代码：
<!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>