Question

我正在构建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>

=====

JavaScript

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);

它不起作用！请告知。

Answer 1

使用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`

预览以ASP Web形式上传的.pdf文件

1 个答案: