[英]How to append files to formData
我正在以非正常方式获取文件及其值。 表单中没有实际输入。 因此,我尝试将 append 文件以 formData 为 ajax 提交。
每当我尝试使用以下方法提交表单时,我的文件都不会上传。 因此,我附加文件的方式一定是不正确的。
有人告诉我以下内容,但我不知道该怎么做:
您正在循环遍历数组,但每次都通过循环附加整个数组。 使用括号中的表格输入名称和 append 数组中的每个文件。
有谁看到我需要改变什么才能让它工作?
dropzone的代码......在下面的相关代码之前:
var dragFileName = '';
var myDropzone = new Dropzone("#myDropzone", {
//$('#myDropzone').dropzone ({
//Dropzone.options.myDropzone= {
url: 'php/quoteSendTest.php',
autoProcessQueue: false,
paramName: "file",
uploadMultiple: true,
parallelUploads: 5,
maxFiles: 5,
maxFilesize: 25,
acceptedFiles: 'image/*',
addRemoveLinks: true,
dictFileTooBig: 'File is larger than 25MB',
init: function() {
dzClosure = this; // Makes sure that 'this' is understood inside the functions below.
// for Dropzone to process the queue (instead of default form behavior):
/* document.getElementById("submit-all").addEventListener("click", function(e) {
// Make sure that the form isn't actually being sent.
console.log("Something should be showing for eventListener");
//e.preventDefault();
e.stopPropagation();
dzClosure.processQueue();
});*/
this.on("addedfile", function(file) {
/* Maybe display some more file information on your page */
dragFileName = file.name;
var dragFileSize = file.size;
var count = myDropzone.files.length;
console.log('File added - ' + file.name + ' - Size - ' + file.size);
console.log(count + " is the length");
//console.log("FILEname is " + dragFileName);
setTimeout(function () {
toggleUploadButton();
}, 10);
});
//send all the form data along with the files:
/*this.on("sendingmultiple", function(data, xhr, formData) {
//formData.append("firstname", jQuery("#firstname").val());
//formData.append("lastname", jQuery("#lastname").val());
});
*/
}
});
相关代码:
var acceptedFiles = null;
var allAcceptFiles = null;
function toggleUploadButton() {
acceptedFiles = myDropzone.getAcceptedFiles();
allAcceptFiles = acceptedFiles.values();
for (let fileElements of allAcceptFiles) {
console.log(fileElements);
}
}
function submit(){
var form = document.getElementById("salesforce_submit");
var formData = new FormData(form);
fileElements.each(function() {
formData.append('uploadedFile[]', fileElements);
});
alert(formData);
$.ajax({
url: '/php/quoteSendTest.php',
type: 'POST',
data: formData,
HTML:
<form action="<?php echo $config['sf_url']; ?>" method="POST" id="salesforce_submit">
<input id="first_name" name="first_name" type="text">
<div class="dropzone dz-clickable" id="myDropzone">
<div class="dz-default dz-message dG">Drop files here or click to upload</div>
</div>
<button type="submit" id="submit-all">SEND PROJECT QUOTE</button>
</form>
来自 fileElements 的 Console.log 信息:
文件{上传:{…},状态:“排队”,预览元素:
div.dz-preview.dz-file-preview, previewTemplate:
div.dz-preview.dz-file-preview, _removeLink: a.dz-remove, ...} 接受:
真实数据URL:“数据:图像/png;base64,iVBORw0KGgoAAAANSUhEUgAABtUA”
高度:892 上次修改时间:1512405192880 上次修改日期:12 月 4 日星期一
2017 年 11:33:12 GMT-0500(东部标准时间){} 名称:
"analytics.PNG" previewElement: div.dz-preview.dz-image-preview
previewTemplate:div.dz-preview.dz-image-preview 大小:544438 状态:
“排队”类型:“image/png”上传:{uuid:“6dc946e7-e9db-4b3a-88af-b790de1c2975”,进度:0,总数:544438,字节发送:0,文件名:“analytics.PNG”,...} webkitRelativePath :“”
宽度:1749
_removeLink:a.dz-remove
原型:文件
在您最初的尝试中:
function toggleUploadButton() {
acceptedFiles = myDropzone.getAcceptedFiles();
allAcceptFiles = acceptedFiles.values();
for (let fileElements of allAcceptFiles) {
console.log(fileElements);
}
}
var formData = new FormData(form);
fileElements.each(function() {
formData.append('uploadedFile[]', fileElements);
});
您正在遍历allAcceptFiles
并将每个设置为fileElements
。 这fileElements
为单个文件,并且当稍后尝试执行each
循环时,它不会像您期望的那样运行。
我注意到myDropzone
必须在某个地方定义,因为它在第一个 function 中工作。 查看dropzone 文档,我看到它有一个getAcceptedFiles
方法,您可以轻松地使用它来循环遍历并将每个文件添加到表单数据中。 修改后的循环如下:
var formData = new FormData(form);
myDropzone.getAcceptedFiles().forEach(file => {
formData.append("uploadedFile[]", file);
});
代码中还有一些其他的东西似乎不需要,但这不是代码审查,所以我将不理会它们。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.