拖放区.通过Ajax手动上传AcceptedFiles [英] Dropzone. Manually upload AcceptedFiles via Ajax
问题描述
我有一个通过ajax提交的功能,可以通过jQuery从表单中获取值.按下整个表单的提交"按钮,我需要抓住多个拖放区.
I have a submit function via ajax that get values from a form via jQuery. There are multiple dropzones, which I need to grab from upon pressing the submit button for the entire form.
我可以像这样访问dropzones文件对象:
I can access the dropzones file objects like this:
$('#foobar')[0].dropzone.getAcceptedFiles()[0]
这给了我这样的东西:
File
_removeLink: <a class="dz-remove" href="javascript:undefined;" data-dz-remove="">
accepted: true
dataURL: "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopG…etc"
height: 545
lastModified: 1516739363000
lastModifiedDate: Date 2018-01-23T20:29:23.000Z
name: "foobar.jpg"
previewElement: <div class="dz-preview dz-image-preview">
previewTemplate: <div class="dz-preview dz-image-preview">
size: 45960
status: "queued"
type: "image/jpeg"
upload: Object { progress: 0, total: 45960, bytesSent: 0, … }
webkitRelativePath: ""
width: 550
__proto__: FilePrototype { name: Getter, lastModified: Getter, lastModifiedDate: Getter, …
当我尝试将其放入对象以发送到服务器时,出现错误:
When I try to put this into an object to send to the server I get the error:
var params = {
id: $('bla).val(),
dropzone_image: $('foobar')[0].dropzone.getAcceptedFiles()[0]
}
TypeError: 'click' called on an object that does not implement interface HTMLElement.
如何在此处将这个dropzone文件作为图像/文件附加到后端?
How can I attach this dropzone file as an image/file here to send to the backend?
推荐答案
为了手动将dropzone图片文件发送到后端,我必须创建一个javascript
In order to send the dropzone image files to the backend manually, I had to create a javascript FormData object.
例如:
function getValues() {
var formData = new FormData();
// these image appends are getting dropzones instances
formData.append('image', $('#foobar_image')[0].dropzone.getAcceptedFiles()[0]); // attach dropzone image element
formData.append('image_2', $('#barfoo')[0].dropzone.getAcceptedFiles()[0]);
formData.append("id", $("#id").val()); // regular text form attachment
formData.append("_method", 'PUT'); // required to spoof a PUT request for a FormData object (not needed for POST request)
return formData;
}
$(document).on('submit','#form', function(e) {
e.preventDefault();
e.stopPropagation();
$.ajax({
method: 'POST',
url: url/you/want,
data: getValues(),
processData: false, // required for FormData with jQuery
contentType: false, // required for FormData with jQuery
success: function(response) {
// do something
}
});
});
这篇关于拖放区.通过Ajax手动上传AcceptedFiles的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!