在这里我创建文件输入的预览(允许多个),多个jpg和png可以工作,但是如果我选择多个pdf,则仅显示最后一个pdf 。我正在使用PDFJS库,Filereader和canvas来生成预览。我检查了许多网站,发现其中一篇文章显示多个pdf: https://bl.ocks.org/palerdot/bf0c52d84aa046a6963c
这是我的代码:
var pdfArr = [];
$("#upload-button").on('click', function() {
$("#file-to-upload").trigger('click');
});
$("#file-to-upload").on('change', function(evt) {
$("#thumbs").html("");
var fileTypes = ['jpg', 'jpeg', 'png', 'tiff', 'tif', 'pdf', 'doc', 'docx', 'ppt', 'pptx'];
var tgt = evt.target || window.event.srcElement,
files = tgt.files;
for (var i = 0; i < files.length; i++) {
var extension = files[i].name.split('.').pop().toLowerCase();
if (FileReader && files && files.length) {
if (extension == "pdf") {
fileReader = new FileReader();
fileReader.onload = function(ev) {
console.log(ev);
var img = "";
PDFJS.getDocument(fileReader.result).then(function getPdfHelloWorld(pdf) {
pdf.getPage(1).then(function(page) {
var viewport = page.getViewport(0.5);
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
canvas.height = viewport.height;
canvas.width = viewport.width;
var renderContext = {
canvasContext: ctx,
viewport: viewport
};
page.render(renderContext).then(function() {
ctx.globalCompositeOperation = "destination-over";
ctx.fillStyle = "#fff";
ctx.fillRect(0, 0, canvas.width, canvas.height);
var img_src = canvas.toDataURL();
$("#thumbs").html($("#thumbs").html() + '<div class="col-sm-12 col-lg-3 mt-2"><div class="card" style="background: #ccc"><div style="text-align:center"><img src="' + img_src + '" alt="" id="pdfs" class="img-fluid" style="height:280px;width:auto;margin:10px auto"></div></div></div>');
canvas.remove();
});
});
}, function(error) {
console.log(error);
});
};
fileReader.readAsArrayBuffer(files[i]);
} else if (extension == "jpg" || extension == "jpeg" || extension == "png") {
var readerObj = new FileReader();
readerObj.onload = function(element) {
$("#thumbs").html($("#thumbs").html() + '<div class="col-sm-12 col-lg-3 mt-2"><div class="card" style="background: #ccc"><div style="text-align:center"><img src="' + element.target.result + '" alt="" id="pdfs" class="img-fluid" style="height:280px;width:auto;margin:10px auto"></div></div></div>');
}
readerObj.readAsDataURL(files[i]);
}
}
}
$("#pdf-contents").html("");
});
function renderPDF(content) {
$("#thumbs").html($("#thumbs").html() + '<div class="col-sm-12 col-lg-3 mt-2"><div class="card" style="background: #ccc"><div style="text-align:center"><img src="' + content + '" alt="" id="pdfs" class="img-fluid" style="height:280px;width:auto;margin:10px auto"></div></div></div>');
}
.card {
height: 300px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/seikichi/tiff.js/master/tiff.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="pdf.js"></script>
<script src="pdf.worker.js"></script>
<button id="upload-button">Select file</button>
<input type="file" id="file-to-upload" multiple />
<div id="pdf-main-container">
<div class="row" id="thumbs">
</div>
<div class="file-preview">
<img class="img-preview" />
</div>
<a class="file-link" download href="" target="_blank">הורד קובץ</a>
</div>
有人可以帮我吗?还是告诉我代码有什么问题?为什么只显示最后一个pdf?