在新窗口中显示文件 [英] Show files in new window
本文介绍了在新窗口中显示文件的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想在新标签中显示或显示文件，但是在此之前，我必须先上传文件
I want to display or show my file in a new tab, but before that, I had to upload my file first
我尝试使用 FileReader()，但无法加载图像
I've tried to use FileReader() and I can't load the image
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function(e) {
$('#blah').attr('src', e.target.result);
window.open(e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
$("#imgInp").change(function() {
readURL(this);
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="form1" runat="server">
<input type='file' id="imgInp" />
<img id="blah" src="#" alt="your image" />
</form>
推荐答案
您不能使用"data:...."作为URL直接打开它，但是可以将该图像保存在本地存储中并在另一个存储中使用页面
You can't open it directly using "data:...." as url, but you can save that image in local storage and use it on another page
<!-- FIRST PAGE -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
<form id="form1" runat="server">
<input type='file' id="imgInp" />
<img id="blah" src="#" alt="your image" />
</form>
<script>
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function(e) {
$('#blah').attr('src', e.target.result);
window.open("second_page.html", "_blank");
localStorage.setItem("image",e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
$("#imgInp").change(function() {
readURL(this);
});
</script>
</body>
</html>
<!--SECOND PAGE -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
<img id="img2" src="#" alt="your image" />
</body>
</html>
<script>
$(document).ready(function() {
$("#img2").attr('src', localStorage.getItem("image"));
});
</script>
这篇关于在新窗口中显示文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
