Question

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

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

当我在计算机上执行此操作时，它会显示对话框，并且在选择图像时，它还会将图像加载到图像容器中，但是当我使用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

Answer 1

在脚本加载中使用https协议，如下所示：https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js

这应该可以解决问题。

Answer 2

由于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>

网站中的上传/查看图片不起作用

2 个答案: