Question

我想在新标签中显示或显示文件，但是在此之前，我必须先上传文件

我尝试使用FileReader()，但无法加载图像

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>

Answer 1

您不能使用“ data：....”作为URL直接打开它，但是可以将该图像保存在本地存储中并在另一页上使用

<!-- 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>

在新窗口中显示文件

1 个答案: