这就是我最终要做的，并且效果很好。
首先，我将文件输入移到了表单之外，以便不提交：
<input name="imagefile[]" type="file" id="takePictureField" accept="image)) { console.log('An image has been loaded'); // Load the image var reader = new FileReader(); reader.onload = function (readerEvent) { var image = new Image(); image.onload = function (imageEvent) { // Resize the image var canvas = document.createElement('canvas'), max_size = 544,// TODO : pull max size from a site config width = image.width, height = image.height; if (width > height) { if (width > max_size) { height *= max_size / width; width = max_size; } } else { if (height > max_size) { width *= max_size / height; height = max_size; } } canvas.width = width; canvas.height = height; canvas.getContext('2d').drawImage(image, 0, 0, width, height); var dataUrl = canvas.toDataURL('image/jpeg'); var resizedImage = dataURLToBlob(dataUrl); $.event.trigger({ type: "imageResized", blob: resizedImage, url: dataUrl }); } image.src = readerEvent.target.result; } reader.readAsDataURL(file); }};如您所见，我正在使用
canvas.toDataURL('image/jpeg');将已调整大小的图像更改为dataUrl并调用函数dataURLToBlob(dataUrl);，将dataUrl转换为Blob，然后可以将其附加到表单。创建Blob后，我会触发一个自定义事件。这是创建Blob的函数：
var dataURLToBlob = function(dataURL) { var base64_MARKER = ';base64,'; if (dataURL.indexOf(base64_MARKER) == -1) { var parts = dataURL.split(','); var contentType = parts[0].split(':')[1]; var raw = parts[1]; return new Blob([raw], {type: contentType}); } var parts = dataURL.split(base64_MARKER); var contentType = parts[0].split(':')[1]; var raw = window.atob(parts[1]); var rawLength = raw.length; var uInt8Array = new Uint8Array(rawLength); for (var i = 0; i < rawLength; ++i) { uInt8Array[i] = raw.charCodeAt(i); } return new Blob([uInt8Array], {type: contentType});}最后，这是我的事件处理程序，该事件处理程序从自定义事件中获取Blob，然后追加表单然后提交。
$(document).on("imageResized", function (event) { var data = new FormData($("form[id*='uploadImageForm']")[0]); if (event.blob && event.url) { data.append('image_data', event.blob); $.ajax({ url: event.url, data: data, cache: false, contentType: false, processdata: false, type: 'POST', success: function(data){ //handle errors... } }); }});
