Javascript 如何将文件附加到formData
我以非正常方式获取文件及其值。表单中没有实际输入。因此,我试图将这些文件附加到formData中,以便ajax提交 每当我尝试使用下面的方法提交表单时,我的文件都不会上传。因此,我附加文件的方式肯定不正确 有人告诉我以下几点,但我不知道怎么做: 您在数组中循环,但每次都会附加整个数组 循环中的时间。使用表单输入名称和 在数组中追加每个文件 有人看到我需要做什么改变才能让它工作吗 dropzone的代码…在以下相关代码之前:Javascript 如何将文件附加到formData,javascript,jquery,file,file-upload,Javascript,Jquery,File,File Upload,我以非正常方式获取文件及其值。表单中没有实际输入。因此,我试图将这些文件附加到formData中,以便ajax提交 每当我尝试使用下面的方法提交表单时,我的文件都不会上传。因此,我附加文件的方式肯定不正确 有人告诉我以下几点,但我不知道怎么做: 您在数组中循环,但每次都会附加整个数组 循环中的时间。使用表单输入名称和 在数组中追加每个文件 有人看到我需要做什么改变才能让它工作吗 dropzone的代码…在以下相关代码之前: var dragFileName = ''; var myDropzo
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:
在初始尝试中:
函数切换上传按钮(){
acceptedFiles=myDropzone.getAcceptedFiles();
allAcceptFiles=acceptedFiles.values();
for(让allAcceptFiles的fileElements){
log(fileElements);
}
}
var formData=新formData(表格);
fileElements.each(函数(){
append('uploadedFile[]”,fileElements);
});
您正在遍历allAcceptFiles
,并将每个文件设置为fileElements
。这将fileElements
保留为一个文件,当稍后尝试执行每个
循环时,它不会像您预期的那样工作
我注意到必须在某个地方定义myDropzone
,因为它在第一个函数中工作。查看,我看到它有一个getAcceptedFiles
方法,您可以轻松地使用该方法循环并将每个文件添加到表单数据中。修改后的循环如下所示:
var formData=新的formData(表单);
myDropzone.getAcceptedFiles().forEach(文件=>{
append(“uploadedFile[]”,file);
});
代码中还有一些似乎不必要的东西,但这不是代码审查,所以我不去管它们。在您最初的尝试中:
函数切换上传按钮(){
acceptedFiles=myDropzone.getAcceptedFiles();
allAcceptFiles=acceptedFiles.values();
for(让allAcceptFiles的fileElements){
log(fileElements);
}
}
var formData=新formData(表格);
fileElements.each(函数(){
append('uploadedFile[]”,fileElements);
});
您正在遍历allAcceptFiles
,并将每个文件设置为fileElements
。这将fileElements
保留为一个文件,当稍后尝试执行每个
循环时,它不会像您预期的那样工作
我注意到必须在某个地方定义myDropzone
,因为它在第一个函数中工作。查看,我看到它有一个getAcceptedFiles
方法,您可以轻松地使用该方法循环并将每个文件添加到表单数据中。修改后的循环如下所示:
var formData=新的formData(表单);
myDropzone.getAcceptedFiles().forEach(文件=>{
append(“uploadedFile[]”,file);
});
代码中似乎还有一些其他内容是不必要的,但这不是代码审查,所以我不讨论这些内容。您希望在每个文件后面附加一个唯一的索引。您需要更像fileElements.each((索引,元素)=>{formData.append('index',element.files);})
,但我不确定实际从何处获取fileElements
或数组的元素类型contains@GammaGamesfileElements
的console.log将生成所有文件信息。请看我编辑过的问题。您是否可以添加任何html来重新创建一个问题?这会让你更容易help@GammaGames当然但我认为HTML并没有真正的帮助。我把它添加到问题中。似乎每当我尝试在formData中添加任何内容,或者至少添加我以前拥有的内容,甚至是您的建议时,我的AJAX提交都不会运行。唯一发生的事情是表单操作的重定向。我还在我的问题中添加了更多的javascript。添加的部分是我正在尝试集成的dropzone代码(拖放文件上载系统)。您希望使用唯一索引附加每个文件。您需要更像fileElements.each((索引,元素)=>{formData.append('index',element.files);})
,但我不确定实际从何处获取fileElements
或数组的元素类型contains@GammaGamesfileElements
的console.log将生成所有文件信息。请看我编辑过的问题。您是否可以添加任何html来重新创建一个问题?这会让你更容易help@GammaGames当然但我认为HTML并没有真正的帮助。我把它添加到问题中。似乎每当我尝试在formData中添加任何内容,或者至少添加我以前拥有的内容,甚至是您的建议时,我的AJAX提交都不会运行。唯一发生的事情是表单操作的重定向。我还在我的问题中添加了更多的javascript。添加的部分是我正在尝试集成的dropzone代码(拖放文件上传系统)。因此,简单地说,添加file=>
是区别点?您正在以这种方式获取个人文件并在其中循环?在您尝试循环文件(不做任何事情,因为它不可编辑)并将文件添加到表单之前。此解决方案循环遍历dropzone中的每个文件,因为文件列表是可编辑的。你可以阅读更多关于iterables的内容。箭头只是一个箭头函数,只是常规函数的简写。您可以阅读有关箭头函数的更多信息。简单地说,添加file=>
是区别点?您正在以这种方式获取个人文件并在其中循环?在您尝试循环文件(不做任何事情,因为它不可编辑)并将文件添加到表单之前。此解决方案循环遍历dropzone中的每个文件,因为文件
<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>