This might be helpful to you.
$(document).ready(function() {
var fileTypes = ['jpg', 'jpeg', 'png', 'tiff', 'tif', 'pdf']; //acceptable file types
$("input:file").change(function(evt) {
var parentEl = $(this).parent();
$(this).parent().find("img.preview").remove();
$(this).parent().find("canvas.preview").remove();
var tgt = evt.target || window.event.srcElement,
files = tgt.files;
// FileReader support
if (FileReader && files && files.length) {
var fr = new FileReader();
var extension = files[0].name.split('.').pop().toLowerCase();
var tif = false;
var pdf = false;
if (extension == "tiff" || extension == "tif")
tif = true;
fr.onload = function(e) {
success = fileTypes.indexOf(extension) > -1;
if (success) {
if (tif) {
//Using tiff.min.js library - https://github.com/seikichi/tiff.js/tree/master
console.debug("Parsing TIFF image...");
//initialize with 100MB for large files
Tiff.initialize({
TOTAL_MEMORY: 100000000
});
var tiff = new Tiff({
buffer: e.target.result
});
var tiffCanvas = tiff.toCanvas();
$(tiffCanvas).css({
"max-width": "100px",
"width": "100%",
"height": "auto",
"display": "block",
"padding-top": "10px"
}).addClass("preview");
$(parentEl).append(tiffCanvas);
} else {
console.debug("render immmm");
$(parentEl).append('<img src="' + fr.result + '" class="preview"/>');
}
}
}
fr.onloadend = function(e) {
console.debug("Load End");
}
if (tif)
fr.readAsArrayBuffer(files[0]);
else
fr.readAsDataURL(files[0]);
}
// Not supported
else {
// fallback -- perhaps submit the input to an iframe and temporarily store
// them on the server until the user's session ends.
}
});
});
<!DOCTYPE html>
<html>
<head>
<script data-require="jquery@2.1.4" data-semver="2.1.4" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="https://cdn.rawgit.com/rfvallina/Misc/master/pdf.js"></script>
<script src="script.js"></script>
<script src="https://cdn.rawgit.com/seikichi/tiff.js/master/tiff.min.js"></script>
</head>
<body>
<h2>Image Preview</h2>
<label>Select a file (jpg, png, tiff)</label>
<br />
<div>
<input type="file" />
</div>
</body>
</html>
与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
