同一页面上的多个拖放区会导致出现错误
Multiple dropzones on same page cause bugs to appear
我有多个放置区（动态的，每个产品代表一个添加到我网上商店购物篮中的产品）。
每上传一张图片，都会调用 returns 上传图片的 returns 信息，并将其显示在预览模板（上传图片的缩略图块）中。尺寸、DPI 和文件名等信息。
问题是信息总是只显示在最后一个拖放区，在最后一个预览模板中。
例如：
When I have two dropzones.
I upload an image of 20DPI in the first one, result: no information is shown in the preview.
I upload an image of 20DPI in the second one, result: the preview is shown with 20 DPI as information which is correct.
I upload two images at the same time in the second dropzone, the first image with 20DPI the second one with 72DPI, result: the first preview is empty and the last preview briefly shows 20DPI before it is overwritten with 72DPI.
这意味着信息已正确接收，只是未正确放置在预览模板中。
这是我的 dropzone 代码，它遍历所有 .dropzone 类:
$('.dropzone').each(function(index){
$maxfiles = $(this).attr('maxfiles');
$inputquantity = $(this).find('input').val();
$thisdropzone = $(this);
$(this).dropzone({
paramName: 'postedFile',
addRemoveLinks: true,
dictDefaultMessage: '<i class="fas fa-file-upload uploadicon"></i> <span class="uploadtxt">Upload je bestand(en)</span>',
dictRemoveFile: 'Verwijder',
dictCancelUpload: 'Annuleren',
dictInvalidFileType: 'Dit type bestand is niet toegestaan',
dictCancelUploadConfirmation: 'Weet je zeker dat je het uploaden wilt annuleren?',
dictMaxFilesExceeded: 'Maximale aantal bestanden overschreden',
maxFiles: $maxfiles,
acceptedFiles: '.jpg, .jpeg, .png, .pdf, .tif, .tiff',
thumbnailWidth: '205',
thumbnailHeight: '140',
thumbnailMethod: 'crop',
previewTemplate: $(".hiddendiv").html(),
sending: function (file) {
},
// File contains dropzone file object, response contains ajax response from php file
success: function (file, response) {
var obj = JSON.parse(response);
$($thisdropzone).find('.dz-preview:last .bestandnaam').text('Bestandsnaam: ' + obj[0].filename);
$($thisdropzone).find('.dz-preview:last .resolutie').text('Resolutie: ' + obj[0].dpi + ' DPI');
$($thisdropzone).find('.dz-preview:last .formaat').text('Formaat: ' + obj[0].heightcm + ' x ' + obj[0].widthcm + 'cm');
},
})
});
这是我的 html，在此示例中有两个拖放区（表单）：
<table class="table upload-table">
<tbody>
<tr>
<td class="plantmore-product-thumbnail uploadimg" width="100">
<a href=""><img src="assets/images/noimg.jpg" alt=""></a>
</td>
<td class="plantmore-product-name" width="200">
<div class="prodinfocheckout">
<a class="prodname" href="">
Monomeer
</a>
<span id="togglespecscheckout" class="prodspecscheckout noselect">
<i class="fas fa-chevron-down"></i> Specificaties
</span>
<div class="togglespecscheckout">
Hoogte : 20cm
<br>
Breedte : 20cm
<br>
uploaden : 1
<br>
Lijmlaag : Wit
<br>
Laminaat : Anti-slip laminaat
<br>
Afwerking : Contoursnijden
<br>
</div>
</div>
</td>
<td class="plantmore-product-quantity" width="190">
<span class="centervertical">
<button class="infotooltip tooltipupload" data-tooltip="Lorem ipsum">
<i class="fas fa-info-circle"></i>
</button>
<span class="amount">
Benodigd formaat:<br>
<span class="benodigd">20 x 20cm</span>
</span>
</span>
</td>
<td class="plantmore-product-quantity" width="185">
<span class="centervertical">
<button class="infotooltip tooltipupload" data-tooltip="Lorem ipsum">
<i class="fas fa-info-circle"></i>
</button>
<span class="amount">Benodigde aantal<br> bestanden: <span class="benodigd">10</span></span>
</span>
</td>
<td class="plantmore-product-quantity">
<span class="centervertical">
<button class="infotooltip tooltipupload" data-tooltip="Lorem ipsum">
<i class="fas fa-info-circle"></i>
</button>
<span class="amount">Bestanden <br>toegewezen: <span class="benodigd">0 / 10</span></span>
</span>
</td>
<td class="plantmore-product-quantity" valign="top">
<button class="uploadbutton btn yellowbtn dz-clickable">Bestand(en) uploaden</button>
</td>
</tr>
<tr class="newrow">
<td colspan="6">
<form action="upload/uploaden.php" class="dropzone dropzoneform dz-clickable" maxfiles="10" id="dropzone1">
<input type="hidden" value="Monomeer" name="productnaam">
<input type="hidden" value="Twan" name="klantnaam">
<input type="hidden" value="20" name="hoogte">
<input type="hidden" value="20" name="breedte">
<div class="dz-default dz-message"><span><i class="fas fa-file-upload uploadicon"></i> <span class="uploadtxt">Upload je bestand(en)</span></span></div>
</form>
</td>
</tr>
<tr>
<td class="plantmore-product-thumbnail uploadimg" width="100">
<a href=""><img src="assets/images/noimg.jpg" alt=""></a>
</td>
<td class="plantmore-product-name" width="200">
<div class="prodinfocheckout">
<a class="prodname" href="">
Monomeer
</a>
<span id="togglespecscheckout" class="prodspecscheckout noselect">
<i class="fas fa-chevron-down"></i> Specificaties
</span>
<div class="togglespecscheckout">
Hoogte : 90cm
<br>
Breedte : 90cm
<br>
uploaden : 1
<br>
Lijmlaag : Wit
<br>
Laminaat : Anti-slip laminaat
<br>
Afwerking : Contoursnijden
<br>
</div>
</div>
</td>
<td class="plantmore-product-quantity" width="190">
<span class="centervertical">
<button class="infotooltip tooltipupload" data-tooltip="Lorem ipsum">
<i class="fas fa-info-circle"></i>
</button>
<span class="amount">
Benodigd formaat:<br>
<span class="benodigd">90 x 90cm</span>
</span>
</span>
</td>
<td class="plantmore-product-quantity" width="185">
<span class="centervertical">
<button class="infotooltip tooltipupload" data-tooltip="Lorem ipsum">
<i class="fas fa-info-circle"></i>
</button>
<span class="amount">Benodigde aantal<br> bestanden: <span class="benodigd">1</span></span>
</span>
</td>
<td class="plantmore-product-quantity">
<span class="centervertical">
<button class="infotooltip tooltipupload" data-tooltip="Lorem ipsum">
<i class="fas fa-info-circle"></i>
</button>
<span class="amount">Bestanden <br>toegewezen: <span class="benodigd">0 / 1</span></span>
</span>
</td>
<td class="plantmore-product-quantity" valign="top">
<button class="uploadbutton btn yellowbtn dz-clickable">Bestand(en) uploaden</button>
</td>
</tr>
<tr class="newrow">
<td colspan="6">
<form action="upload/uploaden.php" class="dropzone dropzoneform dz-clickable" maxfiles="1" id="dropzone4">
<input type="hidden" value="Monomeer" name="productnaam">
<input type="hidden" value="Twan" name="klantnaam">
<input type="hidden" value="90" name="hoogte">
<input type="hidden" value="90" name="breedte">
<div class="dz-default dz-message"><span><i class="fas fa-file-upload uploadicon"></i> <span class="uploadtxt">Upload je bestand(en)</span></span></div>
</form>
</td>
</tr>
</tbody>
</table>
什么可能导致错误？我尝试删除 :last 部分，只在第一个和第二个中上传一张图片。但是第一个预览还是没有任何信息。
这是我在 .hiddendiv 中的自定义预览元素，它在我的 DOM 中的拖放区下方：
<div class="hiddendiv">
<div class="dz-preview dz-file-preview">
<div class="dz-image"><img data-dz-thumbnail /></div>
<div class="dz-details">
<div class="dz-size"><span data-dz-size></span></div>
<div class="dz-filename"><span data-dz-name></span></div>
</div>
<div class="dz-progress"><span class="dz-upload" data-dz-uploadprogress></span></div>
<div class="dz-error-message"><span data-dz-errormessage></span></div>
<span class="infoline">
<span class="infospan bestandnaam">Bestandnaam:</span>
<!-- <i class="fas fa-times-circle afgekeurd"></i> -->
</span>
<span class="infoline">
<span class="infospan resolutie">Resolutie:</span>
<!-- <i class="fas fa-check-circle goedgekeurd"></i> -->
</span>
<span class="infoline">
<span class="infospan formaat">Formaat:</span>
<!-- <i class="fas fa-times-circle afgekeurd"></i> -->
</span>
<div class="foutformaat">
<span>Bestand heeft niet het benodigde formaat.</span>
<span class="uploadinfobox">
<button class="infotooltip tooltipupload" data-tooltip="Lorem ipsum">
<i class="fas fa-info-circle"></i>
</button>
</span>
</div>
<button class="yellowbtn btn vrijgevenbtn" type="button">Bestand vrijgeven</button>
<hr class="uploadline">
<span class="toewijzen">Aantal</span>
<div class="uploadcontent">
<input type="text" class="fileinput">
<button class="plusminupload" id="minupload">−</button>
<button class="plusminupload" id="plusupload">+</button>
</div>
</div>
</div>
根据以下答案更新代码：
$('.dropzone').each(function(index, element){
let $el = $(element);
let $maxfiles = $el.attr('maxfiles');
let $inputquantity = $el.find('input').val();
let $thispreview = $el.find('.hiddendiv');
let $thisdropzone = $el;
// $maxfiles = $(this).attr('maxfiles');
// $inputquantity = $(this).find('input').val();
// $thisdropzone = $(this);
// $thispreview = $(this).find('.hiddendiv');
$(this).dropzone({
// clickable: ".uploadbutton, .dropzoneform",
paramName: 'postedFile',
addRemoveLinks: true,
dictDefaultMessage: '<i class="fas fa-file-upload uploadicon"></i> <span class="uploadtxt">Upload je bestand(en)</span>',
dictRemoveFile: 'Verwijder',
dictCancelUpload: 'Annuleren',
dictInvalidFileType: 'Dit type bestand is niet toegestaan',
dictCancelUploadConfirmation: 'Weet je zeker dat je het uploaden wilt annuleren?',
dictMaxFilesExceeded: 'Maximale aantal bestanden overschreden',
maxFiles: $maxfiles,
acceptedFiles: '.jpg, .jpeg, .png, .pdf, .tif, .tiff',
thumbnailWidth: '205',
thumbnailHeight: '140',
thumbnailMethod: 'crop',
previewTemplate: $thispreview.html(),
processing: function (file) {
},
// File contains dropzone file object, response contains ajax response from php file
success: function (file, response) {
// alert('test');
let file_meta = JSON.parse(response);
let $preview = $thisdropzone.find('.dz-preview:last');
if(file_meta[0].status == 'success'){
}else if(file_meta[0].status == 'error'){
$preview.find('.vrijgevenbtn').show();
$preview.find('.foutformaat').show();
}
$preview.find('.bestandnaam').text('Bestandsnaam: ' + file_meta[0].filename);
$preview.find('.resolutie').text('Resolutie: ' + file_meta[0].dpi + ' DPI');
$preview.find('.formaat').text('Formaat: ' + file_meta[0].heightcm + ' x ' + file_meta[0].widthcm + 'cm');
},
})
});
这是我在一次选择中上传多张图片时发生的情况：
从我的电脑中选择三张图片：
拖放区中有三个预览，只有最后一个有数据：
每个图像 returns 一个 json 字符串，在这个例子中是：
[{"status":"error","filename":"instablok.jpg","filesize":22822,"tmp_name":"\/tmp\/phpI6ov6y","height":172,"width":565,"heightcm":"6,07","widthcm":"19,93","tifwidth":null,"dpi":"72"}]
[{"status":"error","filename":"fbblok.jpg","filesize":17349,"tmp_name":"\/tmp\/phpBzh40y","height":172,"width":565,"heightcm":"6,07","widthcm":"19,93","tifwidth":null,"dpi":"72"}]
[{"status":"error","filename":"logo-dark.png","filesize":21137,"tmp_name":"\/tmp\/phpCHGGZg","height":154,"width":881,"heightcm":"5,43","widthcm":"31,08","tifwidth":null,"dpi":"72"}]
全部单独归还。奇怪的是，所有数据都添加到上次预览中并被更新的数据覆盖。所以最后一个预览首先包含第一个返回的数据 json，然后是第二个，最后是最后一个正确的数据，而前两个仍然是空的。
您可以使用这两个 link 进行测试：
首先在此处将产品添加到您的购物车：https://printzelf.nl/new/folie/monomeer
你 Aantal 的意思是数量，这将决定一个拖放区可以上传多少张图片，所以你需要超过 1 张才能看到错误。
单击选项后，您可以添加它 Toevoegen。然后转到 dropzone 页面 link 即：https://printzelf.nl/new/bestanden-uploaden
let counterId = 0;
$('.dropzone').each(function(index){
counterId++;
$maxfiles = $(this).attr('maxfiles');
$inputquantity = $(this).find('input').val();
$thisdropzone = $(this);
$(this).dropzone({
autoProcessQueue:true,
parallelUploads:1,
paramName: 'postedFile',
addRemoveLinks: true,
dictDefaultMessage: '<i class="fas fa-file-upload uploadicon"></i> <span class="uploadtxt">Upload je bestand(en)</span>',
dictRemoveFile: 'Verwijder',
dictCancelUpload: 'Annuleren',
dictInvalidFileType: 'Dit type bestand is niet toegestaan',
dictCancelUploadConfirmation: 'Weet je zeker dat je het uploaden wilt annuleren?',
dictMaxFilesExceeded: 'Maximale aantal bestanden overschreden',
maxFiles: $maxfiles,
acceptedFiles: '.jpg, .jpeg, .png, .pdf, .tif, .tiff',
thumbnailWidth: '205',
thumbnailHeight: '140',
thumbnailMethod: 'crop',
previewTemplate: $("#hiddendiv"+counterId).html(),
sending: function (file) {
},
// File contains dropzone file object, response contains ajax response from php file
success: function (file, response) {
var obj = JSON.parse(response);
$($thisdropzone).find('.dz-preview:last .bestandnaam').text('Bestandsnaam: ' + obj[0].filename);
$($thisdropzone).find('.dz-preview:last .resolutie').text('Resolutie: ' + obj[0].dpi + ' DPI');
$($thisdropzone).find('.dz-preview:last .formaat').text('Formaat: ' + obj[0].heightcm + ' x ' + obj[0].widthcm + 'cm');
},
})
});
并将您的hiddenDiv 重命名为hiddenDiv1 和hiddenDiv2，如果需要您还可以动态添加hiddenDivs 并使用counterId 作为名称。
scope 你的变量。你有这个代码。
$('.dropzone').each(function(index){
$maxfiles = $(this).attr('maxfiles');
$inputquantity = $(this).find('input').val();
$thisdropzone = $(this);
所以实际上您使用的变量是：
$maxfiles = window.maxfiles
$inputquantity = window.$inputquantity
$thisdropzone = window.$thisdropzone
这意味着您在迭代的每个 dropzone 字段上 "reusing" 相同的变量，让最后一个元素遍历 "stick" 变量。这就是为什么您总是在页面的最后一个拖放区看到结果。
轻微的视觉表现
在代码中，我重新创建了您的简化行为。理论上，单击按钮时所有字段都应显示其隐藏的 gem。然而只有最后一个字段显示隐藏的 gem。这是因为每次迭代都会重新分配 window.$selection 变量。
$('.whoa').each(function(i,e) {
$selection = $(e);
$('.start').on('click', (e) => {
$selection.val($selection.data("hidden-gem"));
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" class="whoa" data-hidden-gem="emerald">
<input type="text" class="whoa" data-hidden-gem="diamond">
<input type="text" class="whoa" data-hidden-gem="ruby">
<button class="start">Show gems</button>
你想要的是使用 var or better let 关键字的作用域变量，确保每个循环元素都有自己的一组与其循环相关的变量。
在此代码示例中，我们看到了所需的行为。唯一的区别是在 $selection 前面添加了 let 关键字，强制创建作用域变量，从而产生所需的行为。
$('.whoa').each(function(i,e) {
let $selection = $(e);
$('.start').on('click', (e) => {
$selection.val($selection.data("hidden-gem"));
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" class="whoa" data-hidden-gem="emerald">
<input type="text" class="whoa" data-hidden-gem="diamond">
<input type="text" class="whoa" data-hidden-gem="ruby">
<button class="start">Show gems</button>
也尽量避免在 jQuery 上下文中使用 this。这是不可靠的。 this 的含义会随着上下文的变化而变化，并且可以完全改变。
当使用 $.each 循环时，传递的第一个参数是索引，第二个是实际元素。这是一个可靠的作用域变量，不会改变含义。
此外，当您需要多次使用同一事物时，请勿实例化多个 jQuery 实例。实例一次并重复使用。
考虑到所有这些，将这些行重写为：
$('.dropzone').each(function(index, element){
let $el = $(element);
let $maxfiles = $el.attr('maxfiles');
let $inputquantity = $el.find('input').val();
let $thisdropzone = $el;
然后你有这些行
$($thisdropzone).find('.dz-preview:last .bestandnaam').text('Bestandsnaam: ' + obj[0].filename);
$($thisdropzone).find('.dz-preview:last .resolutie').text('Resolutie: ' + obj[0].dpi + ' DPI');
$($thisdropzone).find('.dz-preview:last .formaat').text('Formaat: ' + obj[0].heightcm + ' x ' + obj[0].widthcm + 'cm');
您正在重新包装已经是 jQuery 实例的东西。去掉不必要的双重包装。
还可以考虑将 obj[0] 放在一个有意义的名称变量中，这样代码变得更具可读性，而不必在 3 个月后重新访问代码时检查我们期望在 obj[0] 中包含什么。
牢记这一点，我们可以将其重写为：
let file_meta = JSON.parse(response);
let $preview = $thisdropzone.find('.dz-preview:last');
$preview.find('.bestandnaam').text('Bestandsnaam: ' + file_meta.filename);
$preview.find('.resolutie').text('Resolutie: ' + file_meta.dpi + ' DPI');
$preview.find('.formaat').text('Formaat: ' + file_meta.heightcm + ' x ' + file_meta.widthcm + 'cm');
同时将 let $preview = $thisdropzone.find('.dz-preview:last'); 更改为 let $preview = $(file.previewElement); 以便在上传多个文件时，使用正确的预览元素来呈现相关数据。
一个完整的工作示例，由于没有服务器接受数据而减去上传功能。
let counter = 0;
$('.dropzone').each(function(index, element){
let $el = $(element);
let $maxfiles = $el.attr('maxfiles');
let $inputquantity = $el.find('input').val();
let uploaded_preview = $('.hiddendiv').html();
let $thisdropzone = $el;
// $maxfiles = $(this).attr('maxfiles');
// $inputquantity = $(this).find('input').val();
// $thisdropzone = $(this);
// $thispreview = $(this).find('.hiddendiv');
$el.dropzone({
// clickable: ".uploadbutton, .dropzoneform",
paramName: 'postedFile',
addRemoveLinks: true,
dictDefaultMessage: '<i class="fas fa-file-upload uploadicon"></i> <span class="uploadtxt">Upload je bestand(en)</span>',
dictRemoveFile: 'Verwijder',
dictCancelUpload: 'Annuleren',
dictInvalidFileType: 'Dit type bestand is niet toegestaan',
dictCancelUploadConfirmation: 'Weet je zeker dat je het uploaden wilt annuleren?',
dictMaxFilesExceeded: 'Maximale aantal bestanden overschreden',
maxFiles: $maxfiles,
acceptedFiles: '.jpg, .jpeg, .png, .pdf, .tif, .tiff',
thumbnailWidth: '205',
thumbnailHeight: '140',
thumbnailMethod: 'crop',
previewTemplate: uploaded_preview,
processing: function (file) {
},
// File contains dropzone file object, response contains ajax response from php file
error: function (file, response) {
counter++;
console.log('Option ' + counter);
response = '[{"status":"error","filename":"instablok'+counter+'.jpg","filesize":22822,"tmp_name":"\/tmp\/phpI6ov6y","height":172,"width":565,"heightcm":"6'+counter+',07","widthcm":"19'+counter+',93","tifwidth":null,"dpi":"72"}]';
let file_meta = JSON.parse(response);
let $preview = $(file.previewElement);
if(file_meta[0].status == 'success'){
}else if(file_meta[0].status == 'error'){
$preview.find('.vrijgevenbtn').show();
$preview.find('.foutformaat').show();
}
$preview.find('.bestandnaam').text('Bestandsnaam: ' + file_meta[0].filename);
$preview.find('.resolutie').text('Resolutie: ' + file_meta[0].dpi + ' DPI');
$preview.find('.formaat').text('Formaat: ' + file_meta[0].heightcm + ' x ' + file_meta[0].widthcm + 'cm');
},
})
});
.hiddendiv {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://rawgit.com/enyo/dropzone/master/dist/dropzone.js"></script>
<script type="text/javascript">
// Disable auto discover for all elements:
Dropzone.autoDiscover = false;
</script>
<link rel="stylesheet" href="https://rawgit.com/enyo/dropzone/master/dist/dropzone.css">
<table class="table upload-table">
<tbody>
<tr>
<td class="plantmore-product-thumbnail uploadimg" width="100">
<a href=""><img src="assets/images/noimg.jpg" alt=""></a>
</td>
<td class="plantmore-product-name" width="200">
<div class="prodinfocheckout">
<a class="prodname" href="">
Monomeer
</a>
<span id="togglespecscheckout" class="prodspecscheckout noselect">
<i class="fas fa-chevron-down"></i> Specificaties
</span>
<div class="togglespecscheckout">
Hoogte : 20cm
<br>
Breedte : 20cm
<br>
uploaden : 1
<br>
Lijmlaag : Wit
<br>
Laminaat : Anti-slip laminaat
<br>
Afwerking : Contoursnijden
<br>
</div>
</div>
</td>
<td class="plantmore-product-quantity" width="190">
<span class="centervertical">
<button class="infotooltip tooltipupload" data-tooltip="Lorem ipsum">
<i class="fas fa-info-circle"></i>
</button>
<span class="amount">
Benodigd formaat:<br>
<span class="benodigd">20 x 20cm</span>
</span>
</span>
</td>
<td class="plantmore-product-quantity" width="185">
<span class="centervertical">
<button class="infotooltip tooltipupload" data-tooltip="Lorem ipsum">
<i class="fas fa-info-circle"></i>
</button>
<span class="amount">Benodigde aantal<br> bestanden: <span class="benodigd">10</span></span>
</span>
</td>
<td class="plantmore-product-quantity">
<span class="centervertical">
<button class="infotooltip tooltipupload" data-tooltip="Lorem ipsum">
<i class="fas fa-info-circle"></i>
</button>
<span class="amount">Bestanden <br>toegewezen: <span class="benodigd">0 / 10</span></span>
</span>
</td>
<td class="plantmore-product-quantity" valign="top">
<button class="uploadbutton btn yellowbtn dz-clickable">Bestand(en) uploaden</button>
</td>
</tr>
<tr class="newrow">
<td colspan="6">
<form action="upload/uploaden.php" class="dropzone dropzoneform dz-clickable" maxfiles="10" id="dropzone1">
<input type="hidden" value="Monomeer" name="productnaam">
<input type="hidden" value="Twan" name="klantnaam">
<input type="hidden" value="20" name="hoogte">
<input type="hidden" value="20" name="breedte">
<div class="dz-default dz-message"><span><i class="fas fa-file-upload uploadicon"></i> <span class="uploadtxt">Upload je bestand(en)</span></span></div>
</form>
</td>
</tr>
<tr>
<td class="plantmore-product-thumbnail uploadimg" width="100">
<a href=""><img src="assets/images/noimg.jpg" alt=""></a>
</td>
<td class="plantmore-product-name" width="200">
<div class="prodinfocheckout">
<a class="prodname" href="">
Monomeer
</a>
<span id="togglespecscheckout" class="prodspecscheckout noselect">
<i class="fas fa-chevron-down"></i> Specificaties
</span>
<div class="togglespecscheckout">
Hoogte : 90cm
<br>
Breedte : 90cm
<br>
uploaden : 1
<br>
Lijmlaag : Wit
<br>
Laminaat : Anti-slip laminaat
<br>
Afwerking : Contoursnijden
<br>
</div>
</div>
</td>
<td class="plantmore-product-quantity" width="190">
<span class="centervertical">
<button class="infotooltip tooltipupload" data-tooltip="Lorem ipsum">
<i class="fas fa-info-circle"></i>
</button>
<span class="amount">
Benodigd formaat:<br>
<span class="benodigd">90 x 90cm</span>
</span>
</span>
</td>
<td class="plantmore-product-quantity" width="185">
<span class="centervertical">
<button class="infotooltip tooltipupload" data-tooltip="Lorem ipsum">
<i class="fas fa-info-circle"></i>
</button>
<span class="amount">Benodigde aantal<br> bestanden: <span class="benodigd">1</span></span>
</span>
</td>
<td class="plantmore-product-quantity">
<span class="centervertical">
<button class="infotooltip tooltipupload" data-tooltip="Lorem ipsum">
<i class="fas fa-info-circle"></i>
</button>
<span class="amount">Bestanden <br>toegewezen: <span class="benodigd">0 / 1</span></span>
</span>
</td>
<td class="plantmore-product-quantity" valign="top">
<button class="uploadbutton btn yellowbtn dz-clickable">Bestand(en) uploaden</button>
</td>
</tr>
<tr class="newrow">
<td colspan="6">
<form action="upload/uploaden.php" class="dropzone dropzoneform dz-clickable" maxfiles="1" id="dropzone4">
<input type="hidden" value="Monomeer" name="productnaam">
<input type="hidden" value="Twan" name="klantnaam">
<input type="hidden" value="90" name="hoogte">
<input type="hidden" value="90" name="breedte">
<div class="dz-default dz-message"><span><i class="fas fa-file-upload uploadicon"></i> <span class="uploadtxt">Upload je bestand(en)</span></span></div>
</form>
</td>
</tr>
</tbody>
</table>
<div class="hiddendiv">
<div class="dz-preview dz-file-preview">
<div class="dz-image"><img data-dz-thumbnail /></div>
<div class="dz-details">
<div class="dz-size"><span data-dz-size></span></div>
<div class="dz-filename"><span data-dz-name></span></div>
</div>
<div class="dz-progress"><span class="dz-upload" data-dz-uploadprogress></span></div>
<div class="dz-error-message"><span data-dz-errormessage></span></div>
<span class="infoline">
<span class="infospan bestandnaam">Bestandnaam:</span>
<!-- <i class="fas fa-times-circle afgekeurd"></i> -->
</span>
<span class="infoline">
<span class="infospan resolutie">Resolutie:</span>
<!-- <i class="fas fa-check-circle goedgekeurd"></i> -->
</span>
<span class="infoline">
<span class="infospan formaat">Formaat:</span>
<!-- <i class="fas fa-times-circle afgekeurd"></i> -->
</span>
<div class="foutformaat">
<span>Bestand heeft niet het benodigde formaat.</span>
<span class="uploadinfobox">
<button class="infotooltip tooltipupload" data-tooltip="Lorem ipsum">
<i class="fas fa-info-circle"></i>
</button>
</span>
</div>
<button class="yellowbtn btn vrijgevenbtn" type="button">Bestand vrijgeven</button>
<hr class="uploadline">
<span class="toewijzen">Aantal</span>
<div class="uploadcontent">
<input type="text" class="fileinput">
<button class="plusminupload" id="minupload">−</button>
<button class="plusminupload" id="plusupload">+</button>
</div>
</div>
</div>
我有多个放置区（动态的，每个产品代表一个添加到我网上商店购物篮中的产品）。
每上传一张图片，都会调用 returns 上传图片的 returns 信息，并将其显示在预览模板（上传图片的缩略图块）中。尺寸、DPI 和文件名等信息。
问题是信息总是只显示在最后一个拖放区，在最后一个预览模板中。
例如：
When I have two dropzones.
I upload an image of 20DPI in the first one, result: no information is shown in the preview.
I upload an image of 20DPI in the second one, result: the preview is shown with 20 DPI as information which is correct.
I upload two images at the same time in the second dropzone, the first image with 20DPI the second one with 72DPI, result: the first preview is empty and the last preview briefly shows 20DPI before it is overwritten with 72DPI.
这意味着信息已正确接收，只是未正确放置在预览模板中。
这是我的 dropzone 代码，它遍历所有 .dropzone 类:
$('.dropzone').each(function(index){
$maxfiles = $(this).attr('maxfiles');
$inputquantity = $(this).find('input').val();
$thisdropzone = $(this);
$(this).dropzone({
paramName: 'postedFile',
addRemoveLinks: true,
dictDefaultMessage: '<i class="fas fa-file-upload uploadicon"></i> <span class="uploadtxt">Upload je bestand(en)</span>',
dictRemoveFile: 'Verwijder',
dictCancelUpload: 'Annuleren',
dictInvalidFileType: 'Dit type bestand is niet toegestaan',
dictCancelUploadConfirmation: 'Weet je zeker dat je het uploaden wilt annuleren?',
dictMaxFilesExceeded: 'Maximale aantal bestanden overschreden',
maxFiles: $maxfiles,
acceptedFiles: '.jpg, .jpeg, .png, .pdf, .tif, .tiff',
thumbnailWidth: '205',
thumbnailHeight: '140',
thumbnailMethod: 'crop',
previewTemplate: $(".hiddendiv").html(),
sending: function (file) {
},
// File contains dropzone file object, response contains ajax response from php file
success: function (file, response) {
var obj = JSON.parse(response);
$($thisdropzone).find('.dz-preview:last .bestandnaam').text('Bestandsnaam: ' + obj[0].filename);
$($thisdropzone).find('.dz-preview:last .resolutie').text('Resolutie: ' + obj[0].dpi + ' DPI');
$($thisdropzone).find('.dz-preview:last .formaat').text('Formaat: ' + obj[0].heightcm + ' x ' + obj[0].widthcm + 'cm');
},
})
});
这是我的 html，在此示例中有两个拖放区（表单）：
<table class="table upload-table">
<tbody>
<tr>
<td class="plantmore-product-thumbnail uploadimg" width="100">
<a href=""><img src="assets/images/noimg.jpg" alt=""></a>
</td>
<td class="plantmore-product-name" width="200">
<div class="prodinfocheckout">
<a class="prodname" href="">
Monomeer
</a>
<span id="togglespecscheckout" class="prodspecscheckout noselect">
<i class="fas fa-chevron-down"></i> Specificaties
</span>
<div class="togglespecscheckout">
Hoogte : 20cm
<br>
Breedte : 20cm
<br>
uploaden : 1
<br>
Lijmlaag : Wit
<br>
Laminaat : Anti-slip laminaat
<br>
Afwerking : Contoursnijden
<br>
</div>
</div>
</td>
<td class="plantmore-product-quantity" width="190">
<span class="centervertical">
<button class="infotooltip tooltipupload" data-tooltip="Lorem ipsum">
<i class="fas fa-info-circle"></i>
</button>
<span class="amount">
Benodigd formaat:<br>
<span class="benodigd">20 x 20cm</span>
</span>
</span>
</td>
<td class="plantmore-product-quantity" width="185">
<span class="centervertical">
<button class="infotooltip tooltipupload" data-tooltip="Lorem ipsum">
<i class="fas fa-info-circle"></i>
</button>
<span class="amount">Benodigde aantal<br> bestanden: <span class="benodigd">10</span></span>
</span>
</td>
<td class="plantmore-product-quantity">
<span class="centervertical">
<button class="infotooltip tooltipupload" data-tooltip="Lorem ipsum">
<i class="fas fa-info-circle"></i>
</button>
<span class="amount">Bestanden <br>toegewezen: <span class="benodigd">0 / 10</span></span>
</span>
</td>
<td class="plantmore-product-quantity" valign="top">
<button class="uploadbutton btn yellowbtn dz-clickable">Bestand(en) uploaden</button>
</td>
</tr>
<tr class="newrow">
<td colspan="6">
<form action="upload/uploaden.php" class="dropzone dropzoneform dz-clickable" maxfiles="10" id="dropzone1">
<input type="hidden" value="Monomeer" name="productnaam">
<input type="hidden" value="Twan" name="klantnaam">
<input type="hidden" value="20" name="hoogte">
<input type="hidden" value="20" name="breedte">
<div class="dz-default dz-message"><span><i class="fas fa-file-upload uploadicon"></i> <span class="uploadtxt">Upload je bestand(en)</span></span></div>
</form>
</td>
</tr>
<tr>
<td class="plantmore-product-thumbnail uploadimg" width="100">
<a href=""><img src="assets/images/noimg.jpg" alt=""></a>
</td>
<td class="plantmore-product-name" width="200">
<div class="prodinfocheckout">
<a class="prodname" href="">
Monomeer
</a>
<span id="togglespecscheckout" class="prodspecscheckout noselect">
<i class="fas fa-chevron-down"></i> Specificaties
</span>
<div class="togglespecscheckout">
Hoogte : 90cm
<br>
Breedte : 90cm
<br>
uploaden : 1
<br>
Lijmlaag : Wit
<br>
Laminaat : Anti-slip laminaat
<br>
Afwerking : Contoursnijden
<br>
</div>
</div>
</td>
<td class="plantmore-product-quantity" width="190">
<span class="centervertical">
<button class="infotooltip tooltipupload" data-tooltip="Lorem ipsum">
<i class="fas fa-info-circle"></i>
</button>
<span class="amount">
Benodigd formaat:<br>
<span class="benodigd">90 x 90cm</span>
</span>
</span>
</td>
<td class="plantmore-product-quantity" width="185">
<span class="centervertical">
<button class="infotooltip tooltipupload" data-tooltip="Lorem ipsum">
<i class="fas fa-info-circle"></i>
</button>
<span class="amount">Benodigde aantal<br> bestanden: <span class="benodigd">1</span></span>
</span>
</td>
<td class="plantmore-product-quantity">
<span class="centervertical">
<button class="infotooltip tooltipupload" data-tooltip="Lorem ipsum">
<i class="fas fa-info-circle"></i>
</button>
<span class="amount">Bestanden <br>toegewezen: <span class="benodigd">0 / 1</span></span>
</span>
</td>
<td class="plantmore-product-quantity" valign="top">
<button class="uploadbutton btn yellowbtn dz-clickable">Bestand(en) uploaden</button>
</td>
</tr>
<tr class="newrow">
<td colspan="6">
<form action="upload/uploaden.php" class="dropzone dropzoneform dz-clickable" maxfiles="1" id="dropzone4">
<input type="hidden" value="Monomeer" name="productnaam">
<input type="hidden" value="Twan" name="klantnaam">
<input type="hidden" value="90" name="hoogte">
<input type="hidden" value="90" name="breedte">
<div class="dz-default dz-message"><span><i class="fas fa-file-upload uploadicon"></i> <span class="uploadtxt">Upload je bestand(en)</span></span></div>
</form>
</td>
</tr>
</tbody>
</table>
什么可能导致错误？我尝试删除 :last 部分，只在第一个和第二个中上传一张图片。但是第一个预览还是没有任何信息。
这是我在 .hiddendiv 中的自定义预览元素，它在我的 DOM 中的拖放区下方：
<div class="hiddendiv">
<div class="dz-preview dz-file-preview">
<div class="dz-image"><img data-dz-thumbnail /></div>
<div class="dz-details">
<div class="dz-size"><span data-dz-size></span></div>
<div class="dz-filename"><span data-dz-name></span></div>
</div>
<div class="dz-progress"><span class="dz-upload" data-dz-uploadprogress></span></div>
<div class="dz-error-message"><span data-dz-errormessage></span></div>
<span class="infoline">
<span class="infospan bestandnaam">Bestandnaam:</span>
<!-- <i class="fas fa-times-circle afgekeurd"></i> -->
</span>
<span class="infoline">
<span class="infospan resolutie">Resolutie:</span>
<!-- <i class="fas fa-check-circle goedgekeurd"></i> -->
</span>
<span class="infoline">
<span class="infospan formaat">Formaat:</span>
<!-- <i class="fas fa-times-circle afgekeurd"></i> -->
</span>
<div class="foutformaat">
<span>Bestand heeft niet het benodigde formaat.</span>
<span class="uploadinfobox">
<button class="infotooltip tooltipupload" data-tooltip="Lorem ipsum">
<i class="fas fa-info-circle"></i>
</button>
</span>
</div>
<button class="yellowbtn btn vrijgevenbtn" type="button">Bestand vrijgeven</button>
<hr class="uploadline">
<span class="toewijzen">Aantal</span>
<div class="uploadcontent">
<input type="text" class="fileinput">
<button class="plusminupload" id="minupload">−</button>
<button class="plusminupload" id="plusupload">+</button>
</div>
</div>
</div>
根据以下答案更新代码：
$('.dropzone').each(function(index, element){
let $el = $(element);
let $maxfiles = $el.attr('maxfiles');
let $inputquantity = $el.find('input').val();
let $thispreview = $el.find('.hiddendiv');
let $thisdropzone = $el;
// $maxfiles = $(this).attr('maxfiles');
// $inputquantity = $(this).find('input').val();
// $thisdropzone = $(this);
// $thispreview = $(this).find('.hiddendiv');
$(this).dropzone({
// clickable: ".uploadbutton, .dropzoneform",
paramName: 'postedFile',
addRemoveLinks: true,
dictDefaultMessage: '<i class="fas fa-file-upload uploadicon"></i> <span class="uploadtxt">Upload je bestand(en)</span>',
dictRemoveFile: 'Verwijder',
dictCancelUpload: 'Annuleren',
dictInvalidFileType: 'Dit type bestand is niet toegestaan',
dictCancelUploadConfirmation: 'Weet je zeker dat je het uploaden wilt annuleren?',
dictMaxFilesExceeded: 'Maximale aantal bestanden overschreden',
maxFiles: $maxfiles,
acceptedFiles: '.jpg, .jpeg, .png, .pdf, .tif, .tiff',
thumbnailWidth: '205',
thumbnailHeight: '140',
thumbnailMethod: 'crop',
previewTemplate: $thispreview.html(),
processing: function (file) {
},
// File contains dropzone file object, response contains ajax response from php file
success: function (file, response) {
// alert('test');
let file_meta = JSON.parse(response);
let $preview = $thisdropzone.find('.dz-preview:last');
if(file_meta[0].status == 'success'){
}else if(file_meta[0].status == 'error'){
$preview.find('.vrijgevenbtn').show();
$preview.find('.foutformaat').show();
}
$preview.find('.bestandnaam').text('Bestandsnaam: ' + file_meta[0].filename);
$preview.find('.resolutie').text('Resolutie: ' + file_meta[0].dpi + ' DPI');
$preview.find('.formaat').text('Formaat: ' + file_meta[0].heightcm + ' x ' + file_meta[0].widthcm + 'cm');
},
})
});
这是我在一次选择中上传多张图片时发生的情况： 从我的电脑中选择三张图片：
拖放区中有三个预览，只有最后一个有数据：
每个图像 returns 一个 json 字符串，在这个例子中是：
[{"status":"error","filename":"instablok.jpg","filesize":22822,"tmp_name":"\/tmp\/phpI6ov6y","height":172,"width":565,"heightcm":"6,07","widthcm":"19,93","tifwidth":null,"dpi":"72"}]
[{"status":"error","filename":"fbblok.jpg","filesize":17349,"tmp_name":"\/tmp\/phpBzh40y","height":172,"width":565,"heightcm":"6,07","widthcm":"19,93","tifwidth":null,"dpi":"72"}]
[{"status":"error","filename":"logo-dark.png","filesize":21137,"tmp_name":"\/tmp\/phpCHGGZg","height":154,"width":881,"heightcm":"5,43","widthcm":"31,08","tifwidth":null,"dpi":"72"}]
全部单独归还。奇怪的是，所有数据都添加到上次预览中并被更新的数据覆盖。所以最后一个预览首先包含第一个返回的数据 json，然后是第二个，最后是最后一个正确的数据，而前两个仍然是空的。
您可以使用这两个 link 进行测试：
首先在此处将产品添加到您的购物车：https://printzelf.nl/new/folie/monomeer
你 Aantal 的意思是数量，这将决定一个拖放区可以上传多少张图片，所以你需要超过 1 张才能看到错误。
单击选项后，您可以添加它 Toevoegen。然后转到 dropzone 页面 link 即：https://printzelf.nl/new/bestanden-uploaden
let counterId = 0;
$('.dropzone').each(function(index){
counterId++;
$maxfiles = $(this).attr('maxfiles');
$inputquantity = $(this).find('input').val();
$thisdropzone = $(this);
$(this).dropzone({
autoProcessQueue:true,
parallelUploads:1,
paramName: 'postedFile',
addRemoveLinks: true,
dictDefaultMessage: '<i class="fas fa-file-upload uploadicon"></i> <span class="uploadtxt">Upload je bestand(en)</span>',
dictRemoveFile: 'Verwijder',
dictCancelUpload: 'Annuleren',
dictInvalidFileType: 'Dit type bestand is niet toegestaan',
dictCancelUploadConfirmation: 'Weet je zeker dat je het uploaden wilt annuleren?',
dictMaxFilesExceeded: 'Maximale aantal bestanden overschreden',
maxFiles: $maxfiles,
acceptedFiles: '.jpg, .jpeg, .png, .pdf, .tif, .tiff',
thumbnailWidth: '205',
thumbnailHeight: '140',
thumbnailMethod: 'crop',
previewTemplate: $("#hiddendiv"+counterId).html(),
sending: function (file) {
},
// File contains dropzone file object, response contains ajax response from php file
success: function (file, response) {
var obj = JSON.parse(response);
$($thisdropzone).find('.dz-preview:last .bestandnaam').text('Bestandsnaam: ' + obj[0].filename);
$($thisdropzone).find('.dz-preview:last .resolutie').text('Resolutie: ' + obj[0].dpi + ' DPI');
$($thisdropzone).find('.dz-preview:last .formaat').text('Formaat: ' + obj[0].heightcm + ' x ' + obj[0].widthcm + 'cm');
},
})
});
并将您的hiddenDiv 重命名为hiddenDiv1 和hiddenDiv2，如果需要您还可以动态添加hiddenDivs 并使用counterId 作为名称。
scope 你的变量。你有这个代码。
$('.dropzone').each(function(index){
$maxfiles = $(this).attr('maxfiles');
$inputquantity = $(this).find('input').val();
$thisdropzone = $(this);
所以实际上您使用的变量是：
$maxfiles = window.maxfiles
$inputquantity = window.$inputquantity
$thisdropzone = window.$thisdropzone
这意味着您在迭代的每个 dropzone 字段上 "reusing" 相同的变量，让最后一个元素遍历 "stick" 变量。这就是为什么您总是在页面的最后一个拖放区看到结果。
轻微的视觉表现
在代码中，我重新创建了您的简化行为。理论上，单击按钮时所有字段都应显示其隐藏的 gem。然而只有最后一个字段显示隐藏的 gem。这是因为每次迭代都会重新分配 window.$selection 变量。
$('.whoa').each(function(i,e) {
$selection = $(e);
$('.start').on('click', (e) => {
$selection.val($selection.data("hidden-gem"));
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" class="whoa" data-hidden-gem="emerald">
<input type="text" class="whoa" data-hidden-gem="diamond">
<input type="text" class="whoa" data-hidden-gem="ruby">
<button class="start">Show gems</button>
你想要的是使用 var or better let 关键字的作用域变量，确保每个循环元素都有自己的一组与其循环相关的变量。
在此代码示例中，我们看到了所需的行为。唯一的区别是在 $selection 前面添加了 let 关键字，强制创建作用域变量，从而产生所需的行为。
$('.whoa').each(function(i,e) {
let $selection = $(e);
$('.start').on('click', (e) => {
$selection.val($selection.data("hidden-gem"));
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" class="whoa" data-hidden-gem="emerald">
<input type="text" class="whoa" data-hidden-gem="diamond">
<input type="text" class="whoa" data-hidden-gem="ruby">
<button class="start">Show gems</button>
也尽量避免在 jQuery 上下文中使用 this。这是不可靠的。 this 的含义会随着上下文的变化而变化，并且可以完全改变。
当使用 $.each 循环时，传递的第一个参数是索引，第二个是实际元素。这是一个可靠的作用域变量，不会改变含义。
此外，当您需要多次使用同一事物时，请勿实例化多个 jQuery 实例。实例一次并重复使用。
考虑到所有这些，将这些行重写为：
$('.dropzone').each(function(index, element){
let $el = $(element);
let $maxfiles = $el.attr('maxfiles');
let $inputquantity = $el.find('input').val();
let $thisdropzone = $el;
然后你有这些行
$($thisdropzone).find('.dz-preview:last .bestandnaam').text('Bestandsnaam: ' + obj[0].filename);
$($thisdropzone).find('.dz-preview:last .resolutie').text('Resolutie: ' + obj[0].dpi + ' DPI');
$($thisdropzone).find('.dz-preview:last .formaat').text('Formaat: ' + obj[0].heightcm + ' x ' + obj[0].widthcm + 'cm');
您正在重新包装已经是 jQuery 实例的东西。去掉不必要的双重包装。
还可以考虑将 obj[0] 放在一个有意义的名称变量中，这样代码变得更具可读性，而不必在 3 个月后重新访问代码时检查我们期望在 obj[0] 中包含什么。
牢记这一点，我们可以将其重写为：
let file_meta = JSON.parse(response);
let $preview = $thisdropzone.find('.dz-preview:last');
$preview.find('.bestandnaam').text('Bestandsnaam: ' + file_meta.filename);
$preview.find('.resolutie').text('Resolutie: ' + file_meta.dpi + ' DPI');
$preview.find('.formaat').text('Formaat: ' + file_meta.heightcm + ' x ' + file_meta.widthcm + 'cm');
同时将 let $preview = $thisdropzone.find('.dz-preview:last'); 更改为 let $preview = $(file.previewElement); 以便在上传多个文件时，使用正确的预览元素来呈现相关数据。
一个完整的工作示例，由于没有服务器接受数据而减去上传功能。
let counter = 0;
$('.dropzone').each(function(index, element){
let $el = $(element);
let $maxfiles = $el.attr('maxfiles');
let $inputquantity = $el.find('input').val();
let uploaded_preview = $('.hiddendiv').html();
let $thisdropzone = $el;
// $maxfiles = $(this).attr('maxfiles');
// $inputquantity = $(this).find('input').val();
// $thisdropzone = $(this);
// $thispreview = $(this).find('.hiddendiv');
$el.dropzone({
// clickable: ".uploadbutton, .dropzoneform",
paramName: 'postedFile',
addRemoveLinks: true,
dictDefaultMessage: '<i class="fas fa-file-upload uploadicon"></i> <span class="uploadtxt">Upload je bestand(en)</span>',
dictRemoveFile: 'Verwijder',
dictCancelUpload: 'Annuleren',
dictInvalidFileType: 'Dit type bestand is niet toegestaan',
dictCancelUploadConfirmation: 'Weet je zeker dat je het uploaden wilt annuleren?',
dictMaxFilesExceeded: 'Maximale aantal bestanden overschreden',
maxFiles: $maxfiles,
acceptedFiles: '.jpg, .jpeg, .png, .pdf, .tif, .tiff',
thumbnailWidth: '205',
thumbnailHeight: '140',
thumbnailMethod: 'crop',
previewTemplate: uploaded_preview,
processing: function (file) {
},
// File contains dropzone file object, response contains ajax response from php file
error: function (file, response) {
counter++;
console.log('Option ' + counter);
response = '[{"status":"error","filename":"instablok'+counter+'.jpg","filesize":22822,"tmp_name":"\/tmp\/phpI6ov6y","height":172,"width":565,"heightcm":"6'+counter+',07","widthcm":"19'+counter+',93","tifwidth":null,"dpi":"72"}]';
let file_meta = JSON.parse(response);
let $preview = $(file.previewElement);
if(file_meta[0].status == 'success'){
}else if(file_meta[0].status == 'error'){
$preview.find('.vrijgevenbtn').show();
$preview.find('.foutformaat').show();
}
$preview.find('.bestandnaam').text('Bestandsnaam: ' + file_meta[0].filename);
$preview.find('.resolutie').text('Resolutie: ' + file_meta[0].dpi + ' DPI');
$preview.find('.formaat').text('Formaat: ' + file_meta[0].heightcm + ' x ' + file_meta[0].widthcm + 'cm');
},
})
});
.hiddendiv {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://rawgit.com/enyo/dropzone/master/dist/dropzone.js"></script>
<script type="text/javascript">
// Disable auto discover for all elements:
Dropzone.autoDiscover = false;
</script>
<link rel="stylesheet" href="https://rawgit.com/enyo/dropzone/master/dist/dropzone.css">
<table class="table upload-table">
<tbody>
<tr>
<td class="plantmore-product-thumbnail uploadimg" width="100">
<a href=""><img src="assets/images/noimg.jpg" alt=""></a>
</td>
<td class="plantmore-product-name" width="200">
<div class="prodinfocheckout">
<a class="prodname" href="">
Monomeer
</a>
<span id="togglespecscheckout" class="prodspecscheckout noselect">
<i class="fas fa-chevron-down"></i> Specificaties
</span>
<div class="togglespecscheckout">
Hoogte : 20cm
<br>
Breedte : 20cm
<br>
uploaden : 1
<br>
Lijmlaag : Wit
<br>
Laminaat : Anti-slip laminaat
<br>
Afwerking : Contoursnijden
<br>
</div>
</div>
</td>
<td class="plantmore-product-quantity" width="190">
<span class="centervertical">
<button class="infotooltip tooltipupload" data-tooltip="Lorem ipsum">
<i class="fas fa-info-circle"></i>
</button>
<span class="amount">
Benodigd formaat:<br>
<span class="benodigd">20 x 20cm</span>
</span>
</span>
</td>
<td class="plantmore-product-quantity" width="185">
<span class="centervertical">
<button class="infotooltip tooltipupload" data-tooltip="Lorem ipsum">
<i class="fas fa-info-circle"></i>
</button>
<span class="amount">Benodigde aantal<br> bestanden: <span class="benodigd">10</span></span>
</span>
</td>
<td class="plantmore-product-quantity">
<span class="centervertical">
<button class="infotooltip tooltipupload" data-tooltip="Lorem ipsum">
<i class="fas fa-info-circle"></i>
</button>
<span class="amount">Bestanden <br>toegewezen: <span class="benodigd">0 / 10</span></span>
</span>
</td>
<td class="plantmore-product-quantity" valign="top">
<button class="uploadbutton btn yellowbtn dz-clickable">Bestand(en) uploaden</button>
</td>
</tr>
<tr class="newrow">
<td colspan="6">
<form action="upload/uploaden.php" class="dropzone dropzoneform dz-clickable" maxfiles="10" id="dropzone1">
<input type="hidden" value="Monomeer" name="productnaam">
<input type="hidden" value="Twan" name="klantnaam">
<input type="hidden" value="20" name="hoogte">
<input type="hidden" value="20" name="breedte">
<div class="dz-default dz-message"><span><i class="fas fa-file-upload uploadicon"></i> <span class="uploadtxt">Upload je bestand(en)</span></span></div>
</form>
</td>
</tr>
<tr>
<td class="plantmore-product-thumbnail uploadimg" width="100">
<a href=""><img src="assets/images/noimg.jpg" alt=""></a>
</td>
<td class="plantmore-product-name" width="200">
<div class="prodinfocheckout">
<a class="prodname" href="">
Monomeer
</a>
<span id="togglespecscheckout" class="prodspecscheckout noselect">
<i class="fas fa-chevron-down"></i> Specificaties
</span>
<div class="togglespecscheckout">
Hoogte : 90cm
<br>
Breedte : 90cm
<br>
uploaden : 1
<br>
Lijmlaag : Wit
<br>
Laminaat : Anti-slip laminaat
<br>
Afwerking : Contoursnijden
<br>
</div>
</div>
</td>
<td class="plantmore-product-quantity" width="190">
<span class="centervertical">
<button class="infotooltip tooltipupload" data-tooltip="Lorem ipsum">
<i class="fas fa-info-circle"></i>
</button>
<span class="amount">
Benodigd formaat:<br>
<span class="benodigd">90 x 90cm</span>
</span>
</span>
</td>
<td class="plantmore-product-quantity" width="185">
<span class="centervertical">
<button class="infotooltip tooltipupload" data-tooltip="Lorem ipsum">
<i class="fas fa-info-circle"></i>
</button>
<span class="amount">Benodigde aantal<br> bestanden: <span class="benodigd">1</span></span>
</span>
</td>
<td class="plantmore-product-quantity">
<span class="centervertical">
<button class="infotooltip tooltipupload" data-tooltip="Lorem ipsum">
<i class="fas fa-info-circle"></i>
</button>
<span class="amount">Bestanden <br>toegewezen: <span class="benodigd">0 / 1</span></span>
</span>
</td>
<td class="plantmore-product-quantity" valign="top">
<button class="uploadbutton btn yellowbtn dz-clickable">Bestand(en) uploaden</button>
</td>
</tr>
<tr class="newrow">
<td colspan="6">
<form action="upload/uploaden.php" class="dropzone dropzoneform dz-clickable" maxfiles="1" id="dropzone4">
<input type="hidden" value="Monomeer" name="productnaam">
<input type="hidden" value="Twan" name="klantnaam">
<input type="hidden" value="90" name="hoogte">
<input type="hidden" value="90" name="breedte">
<div class="dz-default dz-message"><span><i class="fas fa-file-upload uploadicon"></i> <span class="uploadtxt">Upload je bestand(en)</span></span></div>
</form>
</td>
</tr>
</tbody>
</table>
<div class="hiddendiv">
<div class="dz-preview dz-file-preview">
<div class="dz-image"><img data-dz-thumbnail /></div>
<div class="dz-details">
<div class="dz-size"><span data-dz-size></span></div>
<div class="dz-filename"><span data-dz-name></span></div>
</div>
<div class="dz-progress"><span class="dz-upload" data-dz-uploadprogress></span></div>
<div class="dz-error-message"><span data-dz-errormessage></span></div>
<span class="infoline">
<span class="infospan bestandnaam">Bestandnaam:</span>
<!-- <i class="fas fa-times-circle afgekeurd"></i> -->
</span>
<span class="infoline">
<span class="infospan resolutie">Resolutie:</span>
<!-- <i class="fas fa-check-circle goedgekeurd"></i> -->
</span>
<span class="infoline">
<span class="infospan formaat">Formaat:</span>
<!-- <i class="fas fa-times-circle afgekeurd"></i> -->
</span>
<div class="foutformaat">
<span>Bestand heeft niet het benodigde formaat.</span>
<span class="uploadinfobox">
<button class="infotooltip tooltipupload" data-tooltip="Lorem ipsum">
<i class="fas fa-info-circle"></i>
</button>
</span>
</div>
<button class="yellowbtn btn vrijgevenbtn" type="button">Bestand vrijgeven</button>
<hr class="uploadline">
<span class="toewijzen">Aantal</span>
<div class="uploadcontent">
<input type="text" class="fileinput">
<button class="plusminupload" id="minupload">−</button>
<button class="plusminupload" id="plusupload">+</button>
</div>
</div>
</div>