I am building an ASP webform application. I used
<asp:FileUpload runat="server" ID="fubillPhoto" onchange="showPreviewBill(this);" />
...to upload a pdf file. I want users to be able to review the uploaded file before submitting the form.
My idea is to create an element. When the user clicks on it a new tab open with PDF file. unfortunately I could not apply my idea... Here is my code:
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);
It does not work! Please advise.
Load data uri from input file control use javascript file api.
Convert data uri to binary.
Show binary data in canvas using PDF.js.
here is a reference on how to do that with code
[link] https://forums.asp.net/t/2062665.aspx?Preview+pdf+file+before+upload
code from above reference website
<!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`
Related
I'm working on a project and I want to display a pdf file as well as a text file in my web page
I did manage to display the contents of a text file.
function handleFileSelect(evt) {
var files = evt.target.files; // FileList object
for (var i = 0, f; f = files[i]; i++) {
var reader = new FileReader();
reader.onload = (function(reader) {
return function() {
var contents = reader.result;
var lines = contents.split('\n');
document.getElementById('container').innerHTML = contents;
}
})(reader);
reader.readAsText(f);
}
}
document.getElementById('files').addEventListener('change', handleFileSelect, false);
<input type="file" id="files" name="file" />
<div class="container">
<div class="backdrop">
<div class="highlights"></div>
</div>
<textarea id="container" style="height: 500px; min-width: 500px"></textarea>
</div>
I want to display both text files and PDF files, thanks for your help guys
You can use PDF.js which is community developed and supported by Mozilla Labs.
Looking at their example "Rendering the Page" is the golden ticket here.
I started off the example by breaking out 2 functions (1 to handle the text files and 1 to handle the PDF files) Take a look at the handlePDFFile function and you'll see its somewhat similar, a big difference is we read the file as reader.readAsDataURL(file); instead of reading it as text for the PDF.js library.
for PDF path you will still need to read the file and send the contents of the file to the pdfjsLib.getDocument function. After the loading promise is resolved you will be able to handle the pdf object.
with the pdf object we get the first page and render it onto our canvas. This is only an example so you will need to build on this if you wanted to view multiple pages (only the first page is hard coded).
const PDF_TYPE = "application/pdf";
const TXT_TYPE = "text/plain";
document.getElementById('files').addEventListener('change', handleFileSelect, false);
function handleFileSelect(evt) {
var files = evt.target.files; // FileList object
for (var i = 0, f; f = files[i]; i++) {
let fileType = files[i].type;
if (fileType === PDF_TYPE) {
handlePDFFile(files[i]);
} else if (fileType === TXT_TYPE) {
handleTxtFile(files[i])
} else {
console.error(`cannot handle file type: ${fileType}`)
}
}
}
function handleTxtFile(file) {
var reader = new FileReader();
reader.onload = (function(reader) {
return function() {
var contents = reader.result;
var lines = contents.split('\n');
document.getElementById('container').innerHTML = contents;
}
})(reader);
reader.readAsText(file);
}
function handlePDFFile(file) {
var reader = new FileReader();
reader.onload = (function(reader) {
return function() {
var contents = reader.result;
var loadingTask = pdfjsLib.getDocument(contents);
loadingTask.promise.then(function(pdf) {
pdf.getPage(1).then(function(page) {
var scale = 1.5;
var viewport = page.getViewport({
scale: scale,
});
var canvas = document.getElementById('the-canvas');
var context = canvas.getContext('2d');
canvas.height = viewport.height;
canvas.width = viewport.width;
var renderContext = {
canvasContext: context,
viewport: viewport
};
page.render(renderContext);
});
});
}
})(reader);
reader.readAsDataURL(file);
}
#the-canvas {
outline: black 3px solid;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.2.2/pdf.min.js"></script>
<input type="file" id="files" name="file" />
<div class="container">
<div class="backdrop">
<div class="highlights">
</div>
</div>
<textarea id="container" style="height: 200px; min-width: 200px"></textarea>
<canvas id="the-canvas"></canvas>
</div>
FOR PDF
Upload your PDF file in Google drive and use its URL in a iframe(like Google Drive) and use its URL in a iframe
<object data="data/test.pdf" type="application/pdf" width="500" height="300">
file.pdf
</object>
Also see this link:-How to Use pdf.js
I'm currently learning JavaScript and I'm struggling to read a txt file and use its contents in the program, what I have so far:
fileBtn.addEventListener("change", function()
{
var content = [];
var file = fileBtn.files[0];
readFile(file, function(data)
{
console.log(JSON.parse(data));
//content.push(JSON.parse(data)) doesn't work, data is undef.
});
});
and a function readFile
function readFile(file, f)
{
var reader = new FileReader();
reader.onload = function(evt)
{
f(evt.target.result);
};
reader.readAsText(file);
}
My txt file is currenty only containing a "1", and it logs this number to the console but I can't work with it, if I try to push it into an array the values is suddenly undefined. My goal is to use the content of the file in the program later on
1 . no need to use JSON.parse if the text file only contain string .
data is containing all the text file content
2 . you need to put var content = [];
globally and not inside the function readFile
follow this snippet of code i think it will solve your problem
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<body>
<label for="file-upload" class="custom-file-upload">
Custom Upload
</label>
<input id="file-upload" type="file" />
<input id="log-content" type="button" value="Click Me"/>
</body>
<script>
var content = [];
function readFile(file, f) {
var reader = new FileReader();
reader.onload = function (evt) {
f(evt.target.result);
};
var text = reader.readAsText(file);
}
var fileBtn = document.getElementById("file-upload");
var logContnt = document.getElementById("log-content");
logContnt.addEventListener("click", function () {
alert(content);
})
fileBtn.addEventListener("change", function () {
var file = fileBtn.files[0];
readFile(file, function (data) {
content.push(data);
});
});
</script>
</html>
<!DOCTYPE html >
<html>
<head>
<title>Untitled Page</title>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.3/angular.min.js"></script>
</head>
<body>
<input type="file" name="file" id="file">
<script type="text/javascript">
document.getElementById('file').onchange = function(){
// create a new instance of FileReader
var reader = new FileReader();
var file = this.files[0];
var reader = new FileReader();
reader.onload = function(progressEvent){
// By lines
var lines = this.result.split('\n');
for(var line = 0; line < 3; line++){
document.write(lines[line]);
document.write("<br>");
}
};
reader.readAsText(file);
};
</script>
</body>
</html>
this is the code I used to read text file using given as a input. Without given as a input I want to read file which already know path.(eg: "index.html") .How could I want to change this code..
I have tried in the following way for image preloading using JavaScript
<script type="text/javascript">
function preloader() {
heavyImage = new Image();
heavyImage.src = "../../Images/WFS_Homepage_GlobalServerNetwork_Transparent.jpg";
}
</script>
<body onload="javascript:preloader()" >
<a href="#" onmouseover="javascript:document.img01.src='../../Images/WFS_Homepage_GlobalServerNetwork_Transparent.jpg">
<img src="../../Images/index.jpg" name="img01" />
</a>
But not getting any idea.How can i call JavaScript function in HTML .And how can i use preloaded images for further processing.I am trying it in asp.net mvc 3 Razor
<script>
var preloadImages = [
'#Url.Content("~/Content/img/firstImage.jpg")',
'#Url.Content("~/Content/img/secondImage.jpg")',
'#Url.Content("~/Content/img/thirdImage.jpg")',
],
images = [];
for (var i = 0; i < preloadImages.length; i++){
var img = new Image();
img.src = preloadImages[i];
images.push(img);
}
</script>
Which you could place in the <body> of your document (anywhere).
Hello how i can preview Image without upload to my server in asp.net C# and when i see the image i should press upload to upload to server.
In a HTML5 capable browser you can use the FileReader object to read a file from the users hdd as a base64 encoded string.
You can use this base64 representation with css to show the preview.
In older browsers you will need flash or similar plugin-based code to do it.
Here is a HTML5 example that works in all modern browsers:
<html>
<head>
<script>
var elmFileUpload = document.getElementById('file-upload');
function onFileUploadChange(e) {
var file = e.target.files[0];
var fr = new FileReader();
fr.onload = onFileReaderLoad;
fr.readAsDataURL(file);
}
function onFileReaderLoad(e) {
var bgStyle = "url('" +e.target.result + "')";
elmFileUpload.parentElement.style.background = bgStyle;
};
elmFileUpload.addEventListener('change',onFileUploadChange,false);
</script>
</head>
<body>
<input type="file" id="file-upload"/>
</body>
</html>
See a fiddle of it in action here
Yes it is possible.
Html
<input type="file" accept="image/*" onchange="showMyImage(this)" />
<br/>
<img id="thumbnil" style="width:20%; margin-top:10px;" src="" alt="image"/>
JS
function showMyImage(fileInput) {
var files = fileInput.files;
for (var i = 0; i < files.length; i++) {
var file = files[i];
var imageType = /image.*/;
if (!file.type.match(imageType)) {
continue;
}
var img=document.getElementById("thumbnil");
img.file = file;
var reader = new FileReader();
reader.onload = (function(aImg) {
return function(e) {
aImg.src = e.target.result;
};
})(img);
reader.readAsDataURL(file);
}
}
You can get Live Demo from here.