时间戳

首页 > 解决方案 > Uploading/viewing image in website not working

javascript - Uploading/viewing image in website not working

问题描述

I am creating a web page where a user can upload an image and show it in the image container immediately. When I am running the file offline that is in my own computer then it is running fine, but when I am uploading it to the server it is not running.

In this web page when a user clicks on the image can SELECT file dialogue box gets opened from which the user can select an image. After selecting the image the image will be shown in the Image container.

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 for running this web page it is not even showing the select file dialogue box.

Code:

$("#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

标签： javascripthtmlcssweb

解决方案

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

这应该可以解决问题。

推荐阅读