我发现了一些不同的帖子,甚至关于stackoverflow的问题都回答了这个问题。我基本上正在实现与此职位相同的事情。
所以这是我的问题。上传照片时,我还需要提交表单的其余部分。这是我的html:
<form id="uploadImageForm" enctype="multipart/form-data"> <input name="imagefile[]" type="file" id="takePictureField" accept="image/*" onchange="uploadPhotos(\'#{imageUploadUrl}\')" /> <input id="name" value="#{name}" /> ... a few more inputs ... </form>
以前,我不需要调整图像大小,因此我的JavaScript看起来像这样:
window.uploadPhotos = function(url){ var data = new FormData($("form[id*='uploadImageForm']")[0]); $.ajax({ url: url, data: data, cache: false, contentType: false, processData: false, type: 'POST', success: function(data){ ... handle error... } } }); };
所有这些都很好用…现在我需要调整图像的大小…如何替换表单中的图像,以便发布调整大小的图像而不是上传的图像?
window.uploadPhotos = function(url){ var resizedImage; // Read in file var file = event.target.files[0]; // Ensure it's an image if(file.type.match(/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 = 1200, 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); resizedImage = canvas.toDataURL('image/jpeg'); } image.src = readerEvent.target.result; } reader.readAsDataURL(file); } // TODO: Need some logic here to switch out which photo is being posted... var data = new FormData($("form[id*='uploadImageForm']")[0]); $.ajax({ url: url, data: data, cache: false, contentType: false, processData: false, type: 'POST', success: function(data){ ... handle error... } } }); };
我曾考虑过将文件输入移出表单,并在表单中有一个隐藏的输入,我将的值设置为调整大小后的图像的值…但是我想知道是否可以替换掉那个已经是表格了。
这就是我最终要做的,并且效果很好。
首先,我将文件输入移到了表单之外,以便不提交:
<input name="imagefile[]" type="file" id="takePictureField" accept="image/*" onchange="uploadPhotos(\'#{imageUploadUrl}\')" /> <form id="uploadImageForm" enctype="multipart/form-data"> <input id="name" value="#{name}" /> ... a few more inputs ... </form>
然后,我将uploadPhotos功能更改为仅处理调整大小:
uploadPhotos
window.uploadPhotos = function(url){ // Read in file var file = event.target.files[0]; // Ensure it's an image if(file.type.match(/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的函数:
canvas.toDataURL('image/jpeg');
dataURLToBlob(dataUrl);
/* Utility function to convert a canvas to a 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}); } /* End Utility function to convert a canvas to a BLOB */
最后,这是我的事件处理程序,该事件处理程序从自定义事件中获取Blob,然后追加表单然后提交。
/* Handle image resized events */ $(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... } }); } });