将标签添加到 DropzoneJS 上传队列
Add label to DropzoneJS upload queue
我正在构建一个项目，用户需要在其中上传主图像和次图像。我正在使用 DropzoneJS 来完成这个。这是我的代码：
Dropzone.autoDiscover = false;
var image_width = 380,
image_height = 507;
var photo_upload_primary = new Dropzone("#photo_upload_primary", {
maxFilesize: 1,
maxFiles: 1,
acceptedFiles: "image/*",
autoProcessQueue: false,
url: "upload.php",
previewsContainer: "#formfiles",
previewTemplate: $("#formtemplate").html(),
dictFileTooBig: "Image is too large ({{filesize}}MiB). Max file size is {{maxFilesize}}MiB.",
dictInvalidFileType: "This file is not an image.",
dictMaxFilesExceeded: "You have already uploaded a primary product image.",
dictDefaultMessage: "Click or drop primary product image here",
success: function(file, response) {
console.log(response);
},
error: function(file, response) {
$.notify({
message: response
}, {
type: "danger"
});
this.removeFile(file);
},
init: function() {
this.on("thumbnail", function(file) {
if (file.width !== image_width || file.height !== image_height) {
file.rejectDimensions();
} else {
file.acceptDimensions();
}
});
},
accept: function(file, done) {
file.acceptDimensions = done;
file.rejectDimensions = function() {
done("Product image resolution outside of specifications. Resolution must be " + image_width + "px x " + image_height + "px");
};
},
renameFile: function(file) {
var ext = file.name.substring(file.name.lastIndexOf('.') + 1);
var newName = 'primary.' + ext;
return newName;
},
});
var photo_upload_secondary = new Dropzone("#photo_upload_secondary", {
maxFilesize: 1,
maxFiles: 1,
acceptedFiles: "image/*",
autoProcessQueue: false,
url: "upload.php",
previewsContainer: "#formfiles",
previewTemplate: $("#formtemplate").html(),
dictFileTooBig: "Image is too large ({{filesize}}MiB). Max file size is {{maxFilesize}}MiB.",
dictInvalidFileType: "This file is not an image.",
dictMaxFilesExceeded: "You have already uploaded a secondary product image.",
dictDefaultMessage: "Click or drop secondary product image here",
success: function(file, response) {
console.log(response);
},
error: function(file, response) {
$.notify({
message: response
}, {
type: "danger"
});
this.removeFile(file);
},
init: function() {
//this.on("addedfile", function(file) {
// file.mycustomname = "my-new-name" + file.name;
//console.log(file);
//});
this.on("success", function(file, responseText) {
file.previewTemplate.setAttribute('id', responseText[0].id);
$(".dz-id:last-child").html("hi!");
file.previewElement.html = "hh";
});
this.on("thumbnail", function(file) {
if (file.width !== image_width || file.height !== image_height) {
file.rejectDimensions();
} else {
file.acceptDimensions();
}
});
},
accept: function(file, done) {
file.acceptDimensions = done;
file.rejectDimensions = function() {
done("Product image resolution outside of specifications. Resolution must be " + image_width + "px x " + image_height + "px");
};
},
renameFile: function(file) {
var ext = file.name.substring(file.name.lastIndexOf('.') + 1);
var newName = 'secondary.' + ext;
return newName;
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.3.0/dropzone.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.3.0/dropzone.js"></script>
<h4>Image Upload</h4>
<form>
<div id="photo_upload_primary" action="/file-upload" class="dropzone m-b-15"></div>
<div id="photo_upload_secondary" action="/file-upload" class="dropzone"></div>
<!-- Preview -->
<div class="mt-3" id="formfiles"></div>
<!-- File preview template -->
<div class="d-none" id="formtemplate">
<div class="card mb-3">
<div class="p-2">
<div class="row align-items-start">
<div class="col-auto">
<img data-dz-thumbnail src="#" class="avatar border rounded">
</div>
<div class="col pl-0">
<a href="#" class="text-muted font-weight-bold" data-dz-name></a>
<a href="#" class="text-muted font-weight-bold dz-id" data-dz-id></a>
<p class="mb-0"><small data-dz-size></small>
<small class="d-block text-danger" data-dz-errormessage></small></p>
</div>
<div class="col-auto pt-2">
<a class="btn-lg text-danger" href="#" data-dz-remove><i class="icon-trash-2"></i></a>
</div>
</div>
</div>
</div>
</div>
</form>
<small id="dropzoneHelp" class="form-text text-muted">Required image resolution is 380px x 507px with a maximum file size of 1MB</small>
<!-- end: File preview template -->
<button type="button" class="btn btn-light btn-shadow" onclick="upload()">Add Product</button>
我想在相应文件和缩略图旁边将上传队列中的文件标记为“主要”和“次要”。我无法找到有关如何在 DropZoneJS 中完成此操作的文档。我怎样才能做到这一点？谢谢
您肯定需要 2 个模板。一个带有“主模板”，另一个带有“辅助模板”。但是为了避免创建 2 HTML 个模板，您可以使用这样的模板生成器：
genTemplate = (tmpName) => {
let tmp = $("#formtemplate").clone()
tmp.find(".template-number").html(tmpName)
return tmp.html()
}
这样您就可以轻松地为每个模板选择模板字符串而无需重写 HTML。
genTemplate = (tmpName) => {
let tmp = $("#formtemplate").clone()
tmp.find(".template-number").html(tmpName)
return tmp.html()
}
Dropzone.autoDiscover = false;
var image_width = 380,
image_height = 507;
var photo_upload_primary = new Dropzone("#photo_upload_primary", {
maxFilesize: 1,
maxFiles: 1,
acceptedFiles: "image/*",
autoProcessQueue: false,
url: "upload.php",
previewsContainer: "#formfiles",
previewTemplate: genTemplate("Primary template"),
dictFileTooBig: "Image is too large ({{filesize}}MiB). Max file size is {{maxFilesize}}MiB.",
dictInvalidFileType: "This file is not an image.",
dictMaxFilesExceeded: "You have already uploaded a primary product image.",
dictDefaultMessage: "Click or drop primary product image here",
success: function(file, response) {
console.log(response);
},
error: function(file, response) {
/*$.notify({
message: response
}, {
type: "danger"
});
this.removeFile(file);*/
},
init: function() {
this.on("thumbnail", function(file) {
if (file.width !== image_width || file.height !== image_height) {
file.rejectDimensions();
} else {
file.acceptDimensions();
}
});
},
accept: function(file, done) {
file.acceptDimensions = done;
file.rejectDimensions = function() {
done("Product image resolution outside of specifications. Resolution must be " + image_width + "px x " + image_height + "px");
};
},
renameFile: function(file) {
var ext = file.name.substring(file.name.lastIndexOf('.') + 1);
var newName = 'primary.' + ext;
return newName;
},
});
var photo_upload_secondary = new Dropzone("#photo_upload_secondary", {
maxFilesize: 1,
maxFiles: 1,
acceptedFiles: "image/*",
autoProcessQueue: false,
url: "upload.php",
previewsContainer: "#formfiles",
previewTemplate: genTemplate("Secondary template"),
dictFileTooBig: "Image is too large ({{filesize}}MiB). Max file size is {{maxFilesize}}MiB.",
dictInvalidFileType: "This file is not an image.",
dictMaxFilesExceeded: "You have already uploaded a secondary product image.",
dictDefaultMessage: "Click or drop secondary product image here",
success: function(file, response) {
console.log(response);
},
error: function(file, response) {
/*$.notify({
message: response
}, {
type: "danger"
});
this.removeFile(file);*/
},
init: function() {
//this.on("addedfile", function(file) {
// file.mycustomname = "my-new-name" + file.name;
//console.log(file);
//});
this.on("success", function(file, responseText) {
file.previewTemplate.setAttribute('id', responseText[0].id);
$(".dz-id:last-child").html("hi!");
file.previewElement.html = "hh";
});
this.on("thumbnail", function(file) {
if (file.width !== image_width || file.height !== image_height) {
file.rejectDimensions();
} else {
file.acceptDimensions();
}
});
},
accept: function(file, done) {
file.acceptDimensions = done;
file.rejectDimensions = function() {
done("Product image resolution outside of specifications. Resolution must be " + image_width + "px x " + image_height + "px");
};
},
renameFile: function(file) {
var ext = file.name.substring(file.name.lastIndexOf('.') + 1);
var newName = 'secondary.' + ext;
return newName;
}
});
.card {
padding: 5px;
border: 1px solid whitesmoke;
background: #eee;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.3.0/dropzone.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.3.0/dropzone.js"></script>
<h4>Image Upload</h4>
<form>
<div id="photo_upload_primary" action="/file-upload" class="dropzone m-b-15"></div>
<div id="photo_upload_secondary" action="/file-upload" class="dropzone"></div>
<!-- Preview -->
<div class="mt-3" id="formfiles"></div>
<!-- File preview template -->
<div class="d-none" id="formtemplate">
<div class="card mb-3">
<div class="p-2">
<div class="row align-items-start">
<div class="col-auto">
<img data-dz-thumbnail src="#" class="avatar border rounded">
</div>
<div class="col pl-0">
<h2 class="template-number"></h2>
<a href="#" class="text-muted font-weight-bold" data-dz-name></a>
<a href="#" class="text-muted font-weight-bold dz-id" data-dz-id></a>
<p class="mb-0"><small data-dz-size></small>
<small class="d-block text-danger" data-dz-errormessage></small></p>
</div>
<div class="col-auto pt-2">
<a class="btn-lg text-danger" href="#" data-dz-remove><i class="icon-trash-2"></i></a>
</div>
</div>
</div>
</div>
</div>
</form>
<small id="dropzoneHelp" class="form-text text-muted">Required image resolution is 380px x 507px with a maximum file size of 1MB</small>
<!-- end: File preview template -->
<button type="button" class="btn btn-light btn-shadow" onclick="upload()">Add Product</button>
我正在构建一个项目，用户需要在其中上传主图像和次图像。我正在使用 DropzoneJS 来完成这个。这是我的代码：
Dropzone.autoDiscover = false;
var image_width = 380,
image_height = 507;
var photo_upload_primary = new Dropzone("#photo_upload_primary", {
maxFilesize: 1,
maxFiles: 1,
acceptedFiles: "image/*",
autoProcessQueue: false,
url: "upload.php",
previewsContainer: "#formfiles",
previewTemplate: $("#formtemplate").html(),
dictFileTooBig: "Image is too large ({{filesize}}MiB). Max file size is {{maxFilesize}}MiB.",
dictInvalidFileType: "This file is not an image.",
dictMaxFilesExceeded: "You have already uploaded a primary product image.",
dictDefaultMessage: "Click or drop primary product image here",
success: function(file, response) {
console.log(response);
},
error: function(file, response) {
$.notify({
message: response
}, {
type: "danger"
});
this.removeFile(file);
},
init: function() {
this.on("thumbnail", function(file) {
if (file.width !== image_width || file.height !== image_height) {
file.rejectDimensions();
} else {
file.acceptDimensions();
}
});
},
accept: function(file, done) {
file.acceptDimensions = done;
file.rejectDimensions = function() {
done("Product image resolution outside of specifications. Resolution must be " + image_width + "px x " + image_height + "px");
};
},
renameFile: function(file) {
var ext = file.name.substring(file.name.lastIndexOf('.') + 1);
var newName = 'primary.' + ext;
return newName;
},
});
var photo_upload_secondary = new Dropzone("#photo_upload_secondary", {
maxFilesize: 1,
maxFiles: 1,
acceptedFiles: "image/*",
autoProcessQueue: false,
url: "upload.php",
previewsContainer: "#formfiles",
previewTemplate: $("#formtemplate").html(),
dictFileTooBig: "Image is too large ({{filesize}}MiB). Max file size is {{maxFilesize}}MiB.",
dictInvalidFileType: "This file is not an image.",
dictMaxFilesExceeded: "You have already uploaded a secondary product image.",
dictDefaultMessage: "Click or drop secondary product image here",
success: function(file, response) {
console.log(response);
},
error: function(file, response) {
$.notify({
message: response
}, {
type: "danger"
});
this.removeFile(file);
},
init: function() {
//this.on("addedfile", function(file) {
// file.mycustomname = "my-new-name" + file.name;
//console.log(file);
//});
this.on("success", function(file, responseText) {
file.previewTemplate.setAttribute('id', responseText[0].id);
$(".dz-id:last-child").html("hi!");
file.previewElement.html = "hh";
});
this.on("thumbnail", function(file) {
if (file.width !== image_width || file.height !== image_height) {
file.rejectDimensions();
} else {
file.acceptDimensions();
}
});
},
accept: function(file, done) {
file.acceptDimensions = done;
file.rejectDimensions = function() {
done("Product image resolution outside of specifications. Resolution must be " + image_width + "px x " + image_height + "px");
};
},
renameFile: function(file) {
var ext = file.name.substring(file.name.lastIndexOf('.') + 1);
var newName = 'secondary.' + ext;
return newName;
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.3.0/dropzone.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.3.0/dropzone.js"></script>
<h4>Image Upload</h4>
<form>
<div id="photo_upload_primary" action="/file-upload" class="dropzone m-b-15"></div>
<div id="photo_upload_secondary" action="/file-upload" class="dropzone"></div>
<!-- Preview -->
<div class="mt-3" id="formfiles"></div>
<!-- File preview template -->
<div class="d-none" id="formtemplate">
<div class="card mb-3">
<div class="p-2">
<div class="row align-items-start">
<div class="col-auto">
<img data-dz-thumbnail src="#" class="avatar border rounded">
</div>
<div class="col pl-0">
<a href="#" class="text-muted font-weight-bold" data-dz-name></a>
<a href="#" class="text-muted font-weight-bold dz-id" data-dz-id></a>
<p class="mb-0"><small data-dz-size></small>
<small class="d-block text-danger" data-dz-errormessage></small></p>
</div>
<div class="col-auto pt-2">
<a class="btn-lg text-danger" href="#" data-dz-remove><i class="icon-trash-2"></i></a>
</div>
</div>
</div>
</div>
</div>
</form>
<small id="dropzoneHelp" class="form-text text-muted">Required image resolution is 380px x 507px with a maximum file size of 1MB</small>
<!-- end: File preview template -->
<button type="button" class="btn btn-light btn-shadow" onclick="upload()">Add Product</button>
我想在相应文件和缩略图旁边将上传队列中的文件标记为“主要”和“次要”。我无法找到有关如何在 DropZoneJS 中完成此操作的文档。我怎样才能做到这一点？谢谢
您肯定需要 2 个模板。一个带有“主模板”，另一个带有“辅助模板”。但是为了避免创建 2 HTML 个模板，您可以使用这样的模板生成器：
genTemplate = (tmpName) => {
let tmp = $("#formtemplate").clone()
tmp.find(".template-number").html(tmpName)
return tmp.html()
}
这样您就可以轻松地为每个模板选择模板字符串而无需重写 HTML。
genTemplate = (tmpName) => {
let tmp = $("#formtemplate").clone()
tmp.find(".template-number").html(tmpName)
return tmp.html()
}
Dropzone.autoDiscover = false;
var image_width = 380,
image_height = 507;
var photo_upload_primary = new Dropzone("#photo_upload_primary", {
maxFilesize: 1,
maxFiles: 1,
acceptedFiles: "image/*",
autoProcessQueue: false,
url: "upload.php",
previewsContainer: "#formfiles",
previewTemplate: genTemplate("Primary template"),
dictFileTooBig: "Image is too large ({{filesize}}MiB). Max file size is {{maxFilesize}}MiB.",
dictInvalidFileType: "This file is not an image.",
dictMaxFilesExceeded: "You have already uploaded a primary product image.",
dictDefaultMessage: "Click or drop primary product image here",
success: function(file, response) {
console.log(response);
},
error: function(file, response) {
/*$.notify({
message: response
}, {
type: "danger"
});
this.removeFile(file);*/
},
init: function() {
this.on("thumbnail", function(file) {
if (file.width !== image_width || file.height !== image_height) {
file.rejectDimensions();
} else {
file.acceptDimensions();
}
});
},
accept: function(file, done) {
file.acceptDimensions = done;
file.rejectDimensions = function() {
done("Product image resolution outside of specifications. Resolution must be " + image_width + "px x " + image_height + "px");
};
},
renameFile: function(file) {
var ext = file.name.substring(file.name.lastIndexOf('.') + 1);
var newName = 'primary.' + ext;
return newName;
},
});
var photo_upload_secondary = new Dropzone("#photo_upload_secondary", {
maxFilesize: 1,
maxFiles: 1,
acceptedFiles: "image/*",
autoProcessQueue: false,
url: "upload.php",
previewsContainer: "#formfiles",
previewTemplate: genTemplate("Secondary template"),
dictFileTooBig: "Image is too large ({{filesize}}MiB). Max file size is {{maxFilesize}}MiB.",
dictInvalidFileType: "This file is not an image.",
dictMaxFilesExceeded: "You have already uploaded a secondary product image.",
dictDefaultMessage: "Click or drop secondary product image here",
success: function(file, response) {
console.log(response);
},
error: function(file, response) {
/*$.notify({
message: response
}, {
type: "danger"
});
this.removeFile(file);*/
},
init: function() {
//this.on("addedfile", function(file) {
// file.mycustomname = "my-new-name" + file.name;
//console.log(file);
//});
this.on("success", function(file, responseText) {
file.previewTemplate.setAttribute('id', responseText[0].id);
$(".dz-id:last-child").html("hi!");
file.previewElement.html = "hh";
});
this.on("thumbnail", function(file) {
if (file.width !== image_width || file.height !== image_height) {
file.rejectDimensions();
} else {
file.acceptDimensions();
}
});
},
accept: function(file, done) {
file.acceptDimensions = done;
file.rejectDimensions = function() {
done("Product image resolution outside of specifications. Resolution must be " + image_width + "px x " + image_height + "px");
};
},
renameFile: function(file) {
var ext = file.name.substring(file.name.lastIndexOf('.') + 1);
var newName = 'secondary.' + ext;
return newName;
}
});
.card {
padding: 5px;
border: 1px solid whitesmoke;
background: #eee;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.3.0/dropzone.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.3.0/dropzone.js"></script>
<h4>Image Upload</h4>
<form>
<div id="photo_upload_primary" action="/file-upload" class="dropzone m-b-15"></div>
<div id="photo_upload_secondary" action="/file-upload" class="dropzone"></div>
<!-- Preview -->
<div class="mt-3" id="formfiles"></div>
<!-- File preview template -->
<div class="d-none" id="formtemplate">
<div class="card mb-3">
<div class="p-2">
<div class="row align-items-start">
<div class="col-auto">
<img data-dz-thumbnail src="#" class="avatar border rounded">
</div>
<div class="col pl-0">
<h2 class="template-number"></h2>
<a href="#" class="text-muted font-weight-bold" data-dz-name></a>
<a href="#" class="text-muted font-weight-bold dz-id" data-dz-id></a>
<p class="mb-0"><small data-dz-size></small>
<small class="d-block text-danger" data-dz-errormessage></small></p>
</div>
<div class="col-auto pt-2">
<a class="btn-lg text-danger" href="#" data-dz-remove><i class="icon-trash-2"></i></a>
</div>
</div>
</div>
</div>
</div>
</form>
<small id="dropzoneHelp" class="form-text text-muted">Required image resolution is 380px x 507px with a maximum file size of 1MB</small>
<!-- end: File preview template -->
<button type="button" class="btn btn-light btn-shadow" onclick="upload()">Add Product</button>