Javascript 将标签添加到DropzoneJS上载队列

我正在构建一个项目，其中用户需要上传主映像和次映像。我正在使用DropzoneJS来实现这一点。这是我的密码：

Dropzone.autoDiscover=false；
var图像_宽度=380，
图像高度=507；
var photo_upload_primary=new Dropzone（“#photo_upload_primary”{
最大文件大小：1，
maxFiles:1，
acceptedFiles:“image/*”，
自动处理队列：false，
url:“upload.php”，
PreviewContainer:#formfiles“，
previewTemplate:$（“#formtemplate”）.html（），
dictFileTooBig:“映像太大（{filesize}}MiB）。最大文件大小为{{maxFilesize}}MiB。”，
DictionValidFileType:“此文件不是图像。”，
DictMaxFiles：“您已经上载了主产品映像。”，
dictDefaultMessage：“单击或删除此处的主要产品图像”，
成功：函数（文件、响应）{
控制台日志（响应）；
},
错误：函数（文件、响应）{
美元。通知({
信息：答复
}, {
类型：“危险”
});
此.removeFile（文件）；
},
init:function（）{
此.on（“缩略图”，函数（文件）{
if（file.width！==图像| | | file.height！==图像|高度）{
拒绝维度（）；
}否则{
acceptDimensions（）文件；
}
});
},
接受：函数（文件，完成）{
file.acceptDimensions=完成；
file.rejectDimensions=函数（）{
完成（“产品图像分辨率超出规格。分辨率必须为“+图像宽度+”px x“+图像高度+”px”）；
};
},
重命名文件：函数（文件）{
var ext=file.name.substring（file.name.lastIndexOf（'.'）+1）；
var newName='主'.+ext；
返回newName；
},
});
var photo_upload_secondary=新的Dropzone（“#photo_upload_secondary”{
最大文件大小：1，
maxFiles:1，
acceptedFiles:“image/*”，
自动处理队列：false，
url:“upload.php”，
PreviewContainer:#formfiles“，
previewTemplate:$（“#formtemplate”）.html（），
dictFileTooBig:“映像太大（{filesize}}MiB）。最大文件大小为{{maxFilesize}}MiB。”，
DictionValidFileType:“此文件不是图像。”，
DictMaxFiles:“您已经上载了辅助产品映像。”，
dictDefaultMessage：“单击或删除此处的次级产品映像”，
成功：函数（文件、响应）{
控制台日志（响应）；
},
错误：函数（文件、响应）{
美元。通知({
信息：答复
}, {
类型：“危险”
});
此.removeFile（文件）；
},
init:function（）{
//this.on（“addedfile”，函数（文件）{
//file.mycustomname=“我的新名字”+file.name；
//console.log（文件）；
//});
this.on（“success”，函数（文件，responseText）{
file.previewTemplate.setAttribute（'id'，responseText[0].id）；
$（“.dz id:last child”）.html（“嗨！”；
file.previewElement.html=“hh”；
});
此.on（“缩略图”，函数（文件）{
if（file.width！==图像| | | file.height！==图像|高度）{
拒绝维度（）；
}否则{
acceptDimensions（）文件；
}
});
},
接受：函数（文件，完成）{
file.acceptDimensions=完成；
file.rejectDimensions=函数（）{
完成（“产品图像分辨率超出规格。分辨率必须为“+图像宽度+”px x“+图像高度+”px”）；
};
},
重命名文件：函数（文件）{
var ext=file.name.substring（file.name.lastIndexOf（'.'）+1）；
var newName='次要'.+ext；
返回newName；
}
});

图像上传


所需的图像分辨率为380px 507px，最大文件大小为1MB
添加产品
您肯定需要2个模板。一个带有“主模板”，另一个带有“辅助模板”。但为了避免创建2个HTML模板，您可以使用如下模板生成器：

genTemplate = (tmpName) => {
  let tmp = $("#formtemplate").clone()
  tmp.find(".template-number").html(tmpName)
  return tmp.html()
}

这样，您就可以轻松地为每个字符串选择模板，而无需重写HTML


genTemplate=（tmpName）=>{
设tmp=$（“#formtemplate”）.clone（）
tmp.find（“.template number”）.html（tmpName）
返回tmp.html（）
}
Dropzone.autoDiscover=false；
var图像_宽度=380，
图像高度=507；
var photo_upload_primary=new Dropzone（“#photo_upload_primary”{
最大文件大小：1，
maxFiles:1，
acceptedFiles:“image/*”，
自动处理队列：false，
url:“upload.php”，
PreviewContainer:#formfiles“，
previewTemplate:genTemplate（“主模板”），
dictFileTooBig:“映像太大（{filesize}}MiB）。最大文件大小为{{maxFilesize}}MiB。”，
DictionValidFileType:“此文件不是图像。”，
DictMaxFiles：“您已经上载了主产品映像。”，
dictDefaultMessage：“单击或删除此处的主要产品图像”，
成功：函数（文件、响应）{
控制台日志（响应）；
},
错误：函数（文件、响应）{
/*美元。通知({
信息：答复
}, {
类型：“危险”
});
此.removeFile（文件）*/
},
init:function（）{
此.on（“缩略图”，函数（文件）{
if（file.width！==图像| | | file.height！==图像|高度）{
拒绝维度（）；
}否则{
acceptDimensions（）文件；
}
});
},
接受：函数（文件，完成）{
file.acceptDimensions=完成；
file.rejectDimensions=函数（）{
完成（“产品图像分辨率超出规格。分辨率必须为“+图像宽度+”px x“+图像高度+”px”）；
};
},
重命名文件：函数（文件）{
var ext=file.name.substring（file.name.lastIndexOf（'.'）+1）；
var newName='主'.+ext；
返回newName；
},
});
var photo_upload_secondary=新的Dropzone（“#photo_upload_secondary”{
最大文件大小：1，
maxFiles:1，
acceptedFiles:“image/*”，
自动处理队列：false，
url:“upload.php”，
PreviewContainer:#formfiles“，
预览模板