Javascript 从dropzone更新previewtemplates中的信息,而不更新所有模板
我正在使用Dropzonejs创建一个上传工具。问题是我有一个自定义previewtemplate,其中显示了上传图像的一些信息(DPI、尺寸等)。在Javascript 从dropzone更新previewtemplates中的信息,而不更新所有模板,javascript,jquery,html,dropzone.js,Javascript,Jquery,Html,Dropzone.js,我正在使用Dropzonejs创建一个上传工具。问题是我有一个自定义previewtemplate,其中显示了上传图像的一些信息(DPI、尺寸等)。在successreturn上,我更新了该预览模板的信息,但当我上传一个新图像时,所有预览模板都会更新为上次上传图像的信息,而不仅仅是该图像的信息 这是我的javascript: $('.dropzone').each(function(index){ $maxfiles = $(this).attr('maxfiles'); $th
success
return上,我更新了该预览模板的信息,但当我上传一个新图像时,所有预览模板都会更新为上次上传图像的信息,而不仅仅是该图像的信息
这是我的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);//将$(此)设置为以后使用
不起作用,因为$(此)
在整个dropzone元素的元素树下工作,而不是我需要的previewtemplate
如何仅更新每个previewtemplate的信息
这是一个previewtemplate的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>
睡眠与睡眠(英语)
0.1MB
无标题-4.jpg
安塔尔托维詹酒店
−
+
分辨率:72 DPI
形状:20,00 x 20,00厘米
贝斯特和维吉文
0.2MB
20x20cm.jpg
安塔尔托维詹酒店
−
+
分辨率:72 DPI
形状:20,00 x 20,00厘米
贝斯特和维吉文
在本例中,有多个
.dz preview
(每个previewtemplate的类)类,如您所见。如何在该元素上使用jQuery$(this)
?如果您可以使用ES6语法,我会将您的函数作为箭头函数调用success,因此此
将从父范围继承:
$('.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');
},
})
})) 谢谢,但结果还是一样的。所有previewtemplates都会使用最新的图像信息进行更新。这是因为这涉及到整个表单和jQuery find()是否返回formIs中包含Resolutione和Format类的所有元素?是否有办法仅更新当前上载图像的previewtemplate?例如,您可以使用多个表单,或者尝试仅针对您要编辑的范围。使用以下命令修复它:
$($thisdropzone)。查找('.dz preview:last.fas'))
它总是得到最后一个。