javascript 有没有办法使用默认的 Word 或 PDF 图像/图标作为缩略图而不是通用的灰色背景？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31840374/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Is there a way to use default Word or PDF images/icons as the thumbnail rather than generic greyed out background?
提问by Gabriel C
I want to change the generic greyed out background for word/pdf files in dropzone file preview. This is the default view:
我想在 dropzone 文件预览中更改 word/pdf 文件的通用灰色背景。这是默认视图：
Which is the best way to do it?
哪种方法最好？
回答by Gabriel C
This is the way I did it finally:
这就是我最终做到的方式：
myAwesomeDropzone.on('addedfile', function(file) {
var ext = file.name.split('.').pop();
if (ext == "pdf") {
$(file.previewElement).find(".dz-image img").attr("src", "/Content/Images/pdf.png");
} else if (ext.indexOf("doc") != -1) {
$(file.previewElement).find(".dz-image img").attr("src", "/Content/Images/word.png");
} else if (ext.indexOf("xls") != -1) {
$(file.previewElement).find(".dz-image img").attr("src", "/Content/Images/excel.png");
}
});
The images must be 120x120 pixels to fit the default preview template.
图像必须为 120x120 像素以适合默认预览模板。
This is the result:
这是结果：
回答by Travis
I found a simple way to do this just now. Please note that I amusing jQuery, so make sure to include that, too.
我刚刚找到了一个简单的方法来做到这一点。请注意，我正在使用jQuery，所以一定要包括这一点。
First of all, make sure your Dropzone has an id. Mine is myAwesomeDropzone:
首先，确保你的 Dropzone 有一个id. 我的是myAwesomeDropzone：
<form id="myAwesomeDropzone" action="/upload-target" class="dropzone"></form>
Second, create image icons for each filetype you want to include. I found icons for PDF and Word and put them in a directory called img.
其次，为要包含的每种文件类型创建图像图标。我找到了 PDF 和 Word 的图标，并将它们放在一个名为img.
Then include the following JavaScript:
然后包含以下 JavaScript：
// Make sure to use YOUR Dropzone's ID below...
Dropzone.options.myAwesomeDropzone = {
accept: function(file, done) {
var thumbnail = $('.dropzone .dz-preview.dz-file-preview .dz-image:last');
switch (file.type) {
case 'application/pdf':
thumbnail.css('background', 'url(img/pdf.png');
break;
case 'application/vnd.openxmlformats-officedocument.wordprocessingml.document':
thumbnail.css('background', 'url(img/doc.png');
break;
}
done();
},
};
The code above will work for PDF and Word. If you want to add more, just add more cases to the switchstatement using this template:
上面的代码适用于 PDF 和 Word。如果要添加更多，只需使用此模板case在switch语句中添加更多s ：
case '[mime type]':
thumbnail.css('background', 'url(img/[icon filename]');
break;
Note that you can find the mime type by adding console.log(file.type);in the acceptfunction, then drop a test file and check your browser's console.
请注意，您可以通过添加找到MIME类型console.log(file.type);的accept功能，然后删除测试文件，并检查浏览器的控制台。
Explanation
解释
Dropzone allows you to configure a dropzone with a configuration object in the form of Dropzone.options.[your dropzone's id]. One of the options is an acceptfunction that is fired before a file is accepted. You can use this function's first parameter to spy on the incoming file.
Dropzone 允许您使用 .xml 格式的配置对象配置 dropzone Dropzone.options.[your dropzone's id]。选项之一是accept在接受文件之前触发的函数。您可以使用此函数的第一个参数来监视传入的文件。
That parameter has properties such as typewhich can tell you the mime type. Once you know the mime type, you can change the element's background image using CSS. Our element will always be $('.dropzone .dz-preview.dz-file-preview .dz-image:last')since we always want to target the latest dropzone file. Just change the background-image to an appropriate icon. For example, any of thesewill work for PDF.
该参数具有诸如type可以告诉您 MIME 类型之类的属性。一旦知道 mime 类型，就可以使用 CSS 更改元素的背景图像。我们的元素将始终是，$('.dropzone .dz-preview.dz-file-preview .dz-image:last')因为我们总是希望以最新的 dropzone 文件为目标。只需将背景图像更改为适当的图标即可。例如，任何的这些会为PDF工作。
回答by mkk
Use this:
用这个：
this.emit("thumbnail", file, "/WebResources/cre_pdf_icon");
or
或者
myDropzone.emit("thumbnail", file, "/WebResources/cre_pdf_icon");
回答by Liknes
I ended up using a variation of the answer given by @Gabriel
我最终使用了@Gabriel 给出的答案的变体
Dropzone.options.myAwesomeDropzone= {
init: function () {
this.on("addedfile", function (data) {
console.log(data);
var ext = data.name.split('.').pop();
if (ext == "pdf") {
$(data.previewElement).find(".dz-image img").attr("src", "/Content/Images/pdf.png");
} else if (ext.indexOf("doc") != -1) {
$(data.previewElement).find(".dz-image img").attr("src", "/Content/Images/word.png");
} else if (ext.indexOf("xls") != -1) {
$(data.previewElement).find(".dz-image img").attr("src", "/Content/Images/excel.png");
} else if (ext.indexOf("xlsx") != -1) {
$(data.previewElement).find(".dz-image img").attr("src", "/Content/Images/excel.png");
}
});
}
};
回答by Faruk üNAL
I think, it's important to resize thumbnail image, so you should add a line to resize.
我认为，调整缩略图大小很重要，因此您应该添加一行来调整大小。
Dropzone.options.myAwesomeDropzoneUpload = {
accept: function(file, done) {
switch (file.type) {
case 'application/pdf':
this.emit("thumbnail", file, "/static/img/pdf.png");
break;
case 'application/vnd.openxmlformats-officedocument.wordprocessingml.document':
this.emit("thumbnail", file, "/static/img/word.png");
break;
}
file.previewTemplate.querySelector(".dz-image img").style.width="120px";
done();
}
};
