body
<iframe id="resource-pdf" width="800px" height="600px" style="display: none" data="22"></iframe>
<img class="resource-img" width="200px" height="200px" style="display: none" data="33">
<input class="input" type="button" onclick="Resize()" value="点击查看">
js
<script>
//判断文件是图片
function imgType(result) {
return ['png', 'jpg', 'jpeg', 'bmp', 'gif', 'webp', 'psd', 'svg', 'tiff'].
indexOf(result.toLowerCase()) !== -1;
}
// let fileName = "slider-2.jpg";
var fileName = "flexbox.pdf";
let index = fileName.lastIndexOf(".");
let result = fileName.substr(index + 1);
var img = document.getElementsByClassName('resource-img')[0];
// var pdf = document.getElementsByClassName('resource-pdf')[0];
var pdf = document.getElementById("resource-pdf");
var input = document.getElementsByClassName("input")[0];
//判断文件是pdf
function pdfType(result2) {
return ['pdf'].indexOf(result2.toLowerCase()) !== -1;
}
// console.log(imgType(result));
if (imgType(result) == 1){
console.log("我是图片");
img.src = fileName;
img.style.display = "block";
input.style.display = "none"
} else if (pdfType(result) == 1){
console.log("我是pdf");
pdf.src = fileName;
pdf.style.display = "block";
input.style.display = "block";
} else {
console.log("不支持替他格式");
}
var reset = false;
function Resize(){
if (reset == false){
pdf.style.height = "600px";
pdf.style.width = "800px";
reset = true;
} else {
pdf.style.height = "200px";
pdf.style.width = "200px";
reset = false;
}
}
window.onload = function () {
var img = document.getElementsByClassName('resource-img')[0];
var pdf = document.getElementById("resource-pdf");
var valu = img.getAttribute("data");
var valuu = pdf.getAttribute("data");
console.log(img);
console.log(valuu);
}
</script>