在 ASP Web 窗体中预览上载的.pdf文件

我正在构建一个ASP Webform应用程序。我用了

<asp:FileUpload runat="server" ID="fubillPhoto" onchange="showPreviewBill(this);" />

。以上传 PDF 文件。我希望用户能够在提交表单之前查看上传的文件。我的想法是创建一个元素。当用户单击它时，会打开一个包含PDF文件的新选项卡。不幸的是，我无法应用我的想法...这是我的代码：

.HTML

<asp:FileUpload runat="server" ID="fuBillPhoto" onchange="showPreviewBill(this);" />
<div runat="server" id="divPdfBill" class="hidden"> 
<a runat="server" id="pdfBilllink" href="#"  target="_blank">click here</a>
</div>

=====

爪哇语

function showPreviewBill(input) {
var pdfLink = document.getElementById('#<%=pdfBilllink.ClientID %>');
var file = document.querySelector('#<%=fubillPhoto.ClientID %>').files[0];
var reader = new FileReader();
reader.onloadend = function () {
if (reader.result) {
$('#<%=pdfBilllink.ClientIDMode %>').attr("href", reader.result);
$('#<%=divPdfBill.ClientID %>').attr("class", "");
}
}
$('#<%=pdfBilllink.ClientIDMode %>').attr("href", reader.result);

它不起作用！请指教。

使用 JavaScript 文件 API 从输入文件控件加载数据 URI。
将数据 uri 转换为二进制。
使用 PDF.js 在画布中显示二进制数据。

这是有关如何使用代码执行此操作的参考

[链接] https://forums.asp.net/t/2062665.aspx?Preview+pdf+file+before+upload

来自上述参考网站的代码

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="../Scripts/jquery-1.10.2.js"></script>
<script src="https://mozilla.github.io/pdf.js/build/pdf.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#pdfInp").change(function () {
if (this.files && this.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
showInCanvas(e.target.result);
}
reader.readAsDataURL(this.files[0]);
}
});
function convertDataURIToBinary(dataURI) {
var BASE64_MARKER = ';base64,';
var base64Index = dataURI.indexOf(BASE64_MARKER) + BASE64_MARKER.length;
var base64 = dataURI.substring(base64Index);
var raw = window.atob(base64);
var rawLength = raw.length;
var array = new Uint8Array(new ArrayBuffer(rawLength));
for (i = 0; i < rawLength; i++) {
array[i] = raw.charCodeAt(i);
}
return array;
}
function showInCanvas(url) {
// See README for overview 
'use strict';
// Fetch the PDF document from the URL using promises 
var pdfAsArray = convertDataURIToBinary(url);
PDFJS.getDocument(pdfAsArray).then(function (pdf) {
// Using promise to fetch the page 
pdf.getPage(1).then(function (page) {
var scale = 1.5;
var viewport = page.getViewport(scale);
// Prepare canvas using PDF page dimensions 
var canvas = document.getElementById('the-canvas');
var context = canvas.getContext('2d');
canvas.height = viewport.height;
canvas.width = viewport.width;
// Render PDF page into canvas context 
var renderContext = {
canvasContext: context,
viewport: viewport
};
page.render(renderContext);
});
});
}
});
</script>
</head>
<body>
<form id="form1" >
<p>
<input type='file' id="pdfInp" />
<canvas id="the-canvas" style="border:1px solid black"></canvas>
</p>
</form>
</body>
</html>

<asp:FileUpload runat="server" ID="fubillPhoto" onchange="showPreviewBill(this);" 
/>`enter code here`

相关内容

最新更新

热门标签：