Uploading/viewing image in website not working

Question

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

Possible duplicate of [Preview an image before it is uploaded](https://stackoverflow.com/questions/4459379/preview-an-image-before-it-is-uploaded) — TAHA SULTAN TEMURI, Jul 19 '18 at 05:33
A bit improvised... and yes i took help from that code too. thank you — Priyom saha, Jul 19 '18 at 05:37
Why `class="jsbin"` for js and css resources ? . Remove them and try . — Ashraf, Jul 19 '18 at 05:38

score 0 · Answer 1 · answered Jul 19 '18 at 05:32

0

Use https protocol in script loading like this: https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js

This should solve the problem.

answered Jul 19 '18 at 05:32

dsmaslov

41
6

I used it but still not working... chek it out... actually the code working offline but when I am uploading the same code to the server it is not working is workin – Priyom saha Jul 19 '18 at 05:42
I have this error: Mixed Content: The page at 'https://firstwbst.000webhostapp.com/upload.html' was loaded over HTTPS, but requested an insecure stylesheet 'http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/base/jquery-ui.css'. This request has been blocked; the content must be served over HTTPS. – dsmaslov Jul 19 '18 at 05:43
Bro there is a single inverted comma after upload.html the link should be as follows https://firstwbst.000webhostapp.com/upload.html – Priyom saha Jul 19 '18 at 06:06

score 0 · Accepted Answer · answered Jul 19 '18 at 05:46

The resources are not loading of jquery because of CORS. You should be using following instead what have you used:

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

@TAHASULTANTEMURI it's not a duplicate of that, the problem was jquery is not loading. So in my sense, your interpretation is wrong. — Ullas Hunka, Jul 19 '18 at 06:03
Actually I have only 8 points so I cannot upvote you right now but i have accepted your answer... — Priyom saha, Jul 19 '18 at 06:12
a message is dispalyed that "vote cast by users with less than 15 reputation are being recorded but not displayed publicly" @ULLAS_HUNKA — Priyom saha, Jul 19 '18 at 06:23

Uploading/viewing image in website not working

2 Answers2