javascript - 从 dropzone 更新预览模板中的信息而不更新所有模板

Question

我正在使用 Dropzonejs 创建上传工具。问题是我有一个自定义预览模板，其中显示上传图像的一些信息(DPI、尺寸等)。在成功返回时，我更新该预览模板的信息，但是当我上传新图像时，所有预览模板都会使用最后上传的图像的信息进行更新，而不仅仅是该图像的信息。

这是我的 JavaScript:

$('.dropzone').each(function(index){
    $maxfiles = $(this).attr('maxfiles');
    $thisdropzone = $(this); // Set $(this) to use later on
    $(this).dropzone({
        paramName: 'postedFile',
        addRemoveLinks: true,
        dictDefaultMessage: 'Sleep je bestand(en)',
        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: '150',
        thumbnailHeight: '120',
        thumbnailMethod: 'crop',
        previewTemplate: $(".hiddendiv").html(),
        // File contains dropzone file object, response contains ajax response from php file
        success: function (file, response) {
            var obj = JSON.parse(response);
            console.log(file);
            if(obj[0].status == 'success'){
                $($thisdropzone).find('.fas').removeClass('afgekeurd').addClass('goedgekeurd');
                $($thisdropzone).find('.fas').removeClass('fa-times-circle').addClass('fa-check-circle');
            }else if(obj[0].status == 'error'){
                $($thisdropzone).find('.fas').removeClass('fa-check-circle').addClass('fa-times-circle');
                $($thisdropzone).find('.fas').removeClass('goedgekeurd').addClass('afgekeurd');
                $($thisdropzone).find('.vrijgevenbtn').show();
            }
            $($thisdropzone).find('.resolutie').text('Resolutie: ' + obj[0].dpi + ' DPI');
            $($thisdropzone).find('.formaat').text('Formaat: ' + obj[0].heightcm + ' x ' + obj[0].widthcm + 'cm');
        },
    })
});

这一行:

$thisdropzone = $(this);//设置 $(this) 稍后使用 不起作用，因为 $(this) 沿着整个 dropzone 元素的元素树工作，而不是我需要的预览模板。

如何才能只更新每个单独预览模板的信息？

这是一个预览模板的 html，当我上传图像时，该模板会添加到 dropzone 元素内:

<form action="upload/uploaden.php" class="dropzone dz-clickable dz-started" 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>Sleep je bestand(en)</span> </div>
    <div class="dz-preview dz-processing dz-image-preview dz-complete">
        <div class="dz-image"> <img data-dz-thumbnail="" alt="Untitled-4.jpg" src=""> </div>
        <div class="dz-details">
            <div class="dz-size"> <span data-dz-size="">
                                        <strong>0.1</strong> MB

                                    </span> </div>
            <div class="dz-filename"> <span data-dz-name="">Untitled-4.jpg</span> </div>
        </div>
        <div class="dz-progress"> <span class="dz-upload" data-dz-uploadprogress="" style="width: 100%;"></span> </div>
        <div class="dz-error-message"> <span data-dz-errormessage=""></span> </div> <span class="toewijzen">Aantal toewijzen</span>
        <div class="uploadcontent">
            <input type="text" class="fileinput">
            <button class="plusminupload" id="minupload">−</button>
            <button class="plusminupload" id="plusupload">+</button>
        </div>
        <hr class="uploadline"> <span class="infoline">
                                        <span class="infospan resolutie">Resolutie: 72 DPI</span> <i class="fas goedgekeurd fa-check-circle"></i> </span> <span class="infoline">
                                        <span class="infospan formaat">Formaat: 20,00 x 20,00cm</span> <i class="fas goedgekeurd fa-check-circle"></i> </span>
        <button class="yellowbtn btn vrijgevenbtn" type="button" style="display: inline-block;">Bestand vrijgeven</button> <a class="dz-remove" href="javascript:undefined;" data-dz-remove="">Verwijder</a> </div>
    <div class="dz-preview dz-processing dz-image-preview dz-complete">
        <div class="dz-image"> <img data-dz-thumbnail="" alt="20x20cm.jpg" src=""> </div>
        <div class="dz-details">
            <div class="dz-size"> <span data-dz-size="">
                                                    <strong>0.2</strong> MB

                                                </span> </div>
            <div class="dz-filename"> <span data-dz-name="">20x20cm.jpg</span> </div>
        </div>
        <div class="dz-progress"> <span class="dz-upload" data-dz-uploadprogress="" style="width: 100%;"></span> </div>
        <div class="dz-error-message"> <span data-dz-errormessage=""></span> </div> <span class="toewijzen">Aantal toewijzen</span>
        <div class="uploadcontent">
            <input type="text" class="fileinput">
            <button class="plusminupload" id="minupload">−</button>
            <button class="plusminupload" id="plusupload">+</button>
        </div>
        <hr class="uploadline"> <span class="infoline">
                                                    <span class="infospan resolutie">Resolutie: 72 DPI</span> <i class="fas fa-check-circle goedgekeurd"></i> </span> <span class="infoline">
                                                    <span class="infospan formaat">Formaat: 20,00 x 20,00cm</span> <i class="fas goedgekeurd fa-check-circle"></i> </span>
        <button class="yellowbtn btn vrijgevenbtn" type="button">Bestand vrijgeven</button> <a class="dz-remove" href="javascript:undefined;" data-dz-remove="">Verwijder</a> </div>
</form>

在此示例中，有多个 .dz-preview (每个预览模板的类)类，如您所见。如何在该元素上使用 jQuery $(this) ？

Answer 1

如果您可以使用 ES6 语法，我会在成功时调用您的函数作为箭头函数，因此 this 将从父作用域继承:

$('.dropzone').each(function(index){
$maxfiles = $(this).attr('maxfiles');
$(this).dropzone({
    paramName: 'postedFile',
    addRemoveLinks: true,
    dictDefaultMessage: 'Sleep je bestand(en)',
    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: '150',
    thumbnailHeight: '120',
    thumbnailMethod: 'crop',
    previewTemplate: $(".hiddendiv").html(),
    // File contains dropzone file object, response contains ajax response from php file
    success: (file, response) => {
        var obj = JSON.parse(response);
        console.log(file);
        if(obj[0].status == 'success'){
            $(this).find('.fas').removeClass('afgekeurd').addClass('goedgekeurd');
            $(this).find('.fas').removeClass('fa-times-circle').addClass('fa-check-circle');
        }else if(obj[0].status == 'error'){
            $(this).find('.fas').removeClass('fa-check-circle').addClass('fa-times-circle');
            $(this).find('.fas').removeClass('goedgekeurd').addClass('afgekeurd');
            $(this).find('.vrijgevenbtn').show();
        }
        $(this).find('.resolutie').text('Resolutie: ' + obj[0].dpi + ' DPI');
        $(this).find('.formaat').text('Formaat: ' + obj[0].heightcm + ' x ' + obj[0].widthcm + 'cm');
    },
})

});