同一页面上的多个放置区会导致出现错误

Question

我有多个放置区（动态的，每个产品代表一个添加到我网店购物篮中的产品）。

每张图片上传都会进行一个 ajax 调用，返回上传图片的信息并将其显示在预览模板（上传图片的缩略图块）中。尺寸、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，在这个例子中有两个 dropzone（表单）：

<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 中的 dropzones 下方：

  <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');
        },
    })
});

当我在一个选择中上传多张图片时会发生这种情况： 从我的电脑中选择三张图片：

dropzone 中的三个预览，只有最后一个有数据：

每张图片都返回一个 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 的数据，然后是第二个，最后是最后一个正确的，而前两个保持为空。

您可以使用这两个链接进行测试：

首先在此处将产品添加到您的购物篮：https://printzelf.nl/new/folie/monomeer Aantal 表示数量，这将决定一个 dropzone 中可以上传多少张图片，因此您需要超过 1 张才能看到错误。

点击完选项后，您可以添加Toevoegen。然后转到dropzone页面链接：https://printzelf.nl/new/bestanden-uploaden

Answer 1

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 字段上“重复使用”相同的变量，让最后一个元素循环通过“粘住”变量。这就是为什么您总是在页面的最后一个放置区看到结果。

轻微的视觉表现

在代码中，我重新创建了简化的行为。理论上，当单击按钮时，所有字段都应显示其隐藏的宝石。然而，只有最后一个字段显示了隐藏的宝石。这是因为每次迭代都会重新分配 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 或更好的 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>

Answer 2

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 作为名称。