javascript - 在网站上载/查看图像不起作用-6ren

javascript - 在网站上载/查看图像不起作用

转载作者：行者123 更新时间：2023-11-28 02:29:57

我正在创建一个网页，用户可以在其中上传图像并立即在图像容器中显示。当我离线运行我自己计算机上的文件时，它运行良好，但是当我将它上传到服务器时，它没有运行。

在此网页中，当用户单击图像时，“选择文件”对话框将打开，用户可以从中选择图像。选择图像后，图像将显示在图像容器中。

When I am doing this in my computer it is showing the dialogue box and when the image is selected it is also loading the image in the image container, but when I am using 000webhost server为了运行这个网页，它甚至没有显示选择文件对话框。

代码:

$("#blah").click(function(e) {
  $("#fileToUpload").click();
});

function readURL(input) {
  if (input.files && input.files[0]) {
    var reader = new FileReader();

    reader.onload = function(e) {
      $('#blah')
        .attr('src', e.target.result)
        .width(150)
        .height(200);
    };

    reader.readAsDataURL(input.files[0]);
  }
}

@import url('http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/base/jquery-ui.css');
#blah {
  border-radius: 50%;
}

#fileToUpload {
  background-color: cyan;
  display: none;
}

.border {
  margin: 10%;
  border: 2px solid black;
  text-align: center;
  padding-top: 10px;
  padding-bottom: 30px;
  background: #eee;
  border-radius: 10px;
}

<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/jquery-ui.min.js"></script>

<body bgcolor=white>
  <div class="border">
    <img id="blah" src="profile-img.png">
    <input name="fileToUpload" id="fileToUpload" type="file" placeholder="Photo" onchange="readURL(this);" />
  </div>
  <script>
  </script>
</body>

This is the link to upload.html in the server

最佳答案

由于 CORS，资源未加载 jquery。您应该使用以下内容而不是您使用的内容:

$("#blah").click(function(e) {
  $("#fileToUpload").click();
});

function readURL(input) {
  if (input.files && input.files[0]) {
    var reader = new FileReader();

    reader.onload = function(e) {
      $('#blah')
        .attr('src', e.target.result)
        .width(150)
        .height(200);
    };

    reader.readAsDataURL(input.files[0]);
  }
}

@import url('https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css');
#blah {
  border-radius: 50%;
}

#fileToUpload {
  background-color: cyan;
  display: none;
}

.border {
  margin: 10%;
  border: 2px solid black;
  text-align: center;
  padding-top: 10px;
  padding-bottom: 30px;
  background: #eee;
  border-radius: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>


<body bgcolor=white>
  <div class="border">
    <img id="blah" src="profile-img.png">
    <input name="fileToUpload" id="fileToUpload" type="file" placeholder="Photo" onchange="readURL(this);" />
  </div>
  <script>
  </script>
</body>

关于javascript - 在网站上载/查看图像不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51414959/

文章推荐： c++ - float 到二进制的转换

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 在网站上载/查看图像不起作用