I was creating a web page where I 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 an user clicks on the image an SELECT file dialog 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 dialog 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 dialog box .
Code:
<!DOCTYPE html>
<html>
<head>
<link class="jsbin" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<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>
<meta charset=utf-8 />
<style>
#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;
}
</style>
</head>
<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>
$("#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]);
}
}
</script>
</body>
</html>
This is the link to upload.html in the server
Aucun commentaire:
Enregistrer un commentaire