如何解决如何根据上传的文件类型设置背景图片
我正在尝试使输入文件预览。如果单击标签,则图像预览应设置为标签的背景图像。到目前为止,我可以使它工作。现在,如果上传的文件是pdf(例如),我想将标签的背景图像设置为pdf徽标图像。
$("#boleto").on("change",function() {
// THIS IS FOR IMAGE PREVIEW
var reader = new FileReader();
reader.onload = function(e) {
$("#previewboleto").css({
"background-image": "url(" + e.target.result + ")","background-position": "center","background-size": "100%"
});
};
reader.readAsDataURL(this.files[0]);
//
// THIS CODE SHOULD SET BACKGROUND TO A PDF logo IMG
Object.values(this.files).forEach(function(file) {
console.log(`Type: ${file.type}`);
if (file.type == 'application/pdf') { //IF THE UPLOADED FILE IS A PDF...
Object.values(this.files).forEach(function(file) {
console.log(`Type: ${file.type}`);
if (file.type == 'application/pdf') {
$("#previewboleto").css({
"background-image": 'url("https://www.google.com/url?sa=i&url=https%3A%2F%2Fes.wikipedia.org%2Fwiki%2FArchivo%3APDF_file_icon.svg&psig=AOvVaw0fAUI2NwxolUUCjOI_Gyxv&ust=1601173071562000&source=images&cd=vfe&ved=0CAIQjRxqFwoTCIDTndTghewCFQAAAAAdAAAAABAQ")',"background-repeat": "no-repeat"
});
}
})
} else {
// IF UPLOADED FILE IS AN IMAGE...
}
});
});
.inputs input[type="file"] {
display: none
}
.labelboleto,.labeldni {
width: 100%;
height: 190px;
background-color: gray;
Box-shadow: 0px 2px 11px rgba(0,0.0582113);
border-radius: 6px;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="file" name="boleto" id="boleto" accept="image/*;capture=camera">
<label for="boleto" class="labelboleto" id="previewboleto"></label>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。