[英]Direct Upload of Image to S3 after Manual Cropping with Cropper.js
这是我的第一篇文章,请保持温柔! 我是Rails初学者,对JavaScript / JQuery一无所知...
我有一个Rails项目,该项目要求用户能够选择一个文件并向其显示预览图像,然后他们可以根据需要进行裁剪,然后再异步上传裁剪后的图像。
我已经使用JQuery FileUpload插件成功实现了直接上传到S3(遵循本教程),并且能够向用户显示预览图像,他们可以使用Cropper.js进行裁剪。 但是,在上传裁剪后的图像的最后一步中,我需要帮助。
这是我到目前为止用于处理图像裁剪/上载到S3的JS:
$(document).ready(function() {
$('.directUpload').find("input:file").each(function(i, elem) {
var fileInput = $(elem);
var form = $(fileInput.parents('form:first'));
var submitButton = form.find('input[type="submit"]');
var progressBar = $("<div class='bar'></div>");
var barContainer = $("<div class='progress'></div>").append(progressBar);
fileInput.after(barContainer);
fileInput.fileupload({
fileInput: fileInput,
url: form.data('url'), //read AWS config via form attributes
type: 'POST',
autoUpload: false, // prevent upload start on file selection
formData: form.data('form-data'),
paramName: 'file',
dataType: 'XML',
replaceFileInput: false,
上面的代码初始化JQuery FileUpload并传递我的S3配置数据。
接下来,我使用JQuery FileUpload的' add
'回调来显示预览图像/裁剪框,并在用户单击“上传”按钮时将图像上传到S3:
add: function (e, data) {
if (data.files && data.files[0]) {
var reader = new FileReader();
reader.onload = function(e) {
$('#preview_image').attr('src', e.target.result); // insert preview image
$('#preview_image').cropper() // initialize cropper on preview image
};
reader.readAsDataURL(data.files[0]);
};
$('#upload_image').on('click', function(){
$('#preview_image').cropper('getCroppedCanvas').toBlob(function (blob){
var croppedFile = new File([blob], 'cropped_file.png')
// How do I now get my cropped file data to upload instead of original file?
})
data.submit();
});
},
这是上面的最后一部分,现在我被卡住了-我已经从裁剪区域创建了一个文件,但是无法找到一种方法来上传它而不是原始图像。
其余代码主要用于显示上传进度和构建图像URL,我可以将其保存到数据库中以进行图像检索。
progressall: function (e, data) {
var progress = parseInt(data.loaded / data.total * 100, 10);
progressBar.css('width', progress + '%')
},
start: function (e) {
submitButton.prop('disabled', true); //disable submit button while image is loading
progressBar.
css('background', 'green').
css('display', 'block').
css('width', '0%').
text("Loading...");
},
done: function(e, data) {
submitButton.prop('disabled', false);
progressBar.text("Uploading done");
// extract key from S3 XML response and generate URL for image
var key = $(data.jqXHR.responseXML).find("Key").text();
var url = '//' + form.data('host') + '/' + key;
// create hidden field containing image URL, which can then be stored in model
var input = $("<input />", { type:'hidden', name: 'image_url[]', value: url })
form.append(input);
},
fail: function(e, data) {
submitButton.prop('disabled', false);
progressBar.
css("background", "red").
text("Failed");
}
});
这对我有用
var croppedFile = new File([blob], 'cropped_file.png');
data.files[0] = croppedFile;
data.originalFiles[0] = data.files[0];
要不就
data.files[0] = new File([blob], 'cropped_file.png');
data.originalFiles[0] = data.files[0];
接着
data.submit()
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.