I want the message You uploaded a file! to pop up after I select a file.
<html>
<head>
<script type="text/javascript">
$(document).ready(function() {
$("#uploadme").click(function() {
alert("You uploaded a file!")
});
});
</script>
</head>
<body>
<input type="file" id="uploadme"/>
</body>
</html>
Please consider adding a comment if you think this post can be improved.
I managed to solve this problem using a listener.
<input type="file" id="uploadme">
<script>
const fileSelector = document.getElementById('uploadme');
fileSelector.addEventListener('change', (event) => {
alert('You uploaded a file!')
});
</script>
Related
In all the codes that I wrote, the button does not work. The site simply reloads and that's it. Maybe this is an error not in the code, but in something else, please help
This is my code
<!DOCTYPE html>
<html lang="'en">
<head>
<title>Hello</title>
<script>
document.addEventListener('DOMContentLoaded', function() {
document.querySelector('form').onsubmit = function() {
const name = document.querySelectr('#name').value;
alert(`Hello, ${name}!`);
};
});
</script>
</head>
<body>
<h1>Hello!</h1>
<form>
<input autofocus id="name" placeholder="Name" type="text">
<input type="submit">
</form>
</body>
</html>
By default, a submit button will reload the page to send a request. This can be prevented with e.preventDefault(). Here's an example with your code:
document.addEventListener('DOMContentLoaded', function() {
document.querySelector('form').onsubmit = function(e) {
e.preventDefault();
const name = document.querySelector('#name').value;
alert(`Hello, ${name}!`);
};
});
I what to load the b.js file to HTML with button and function. when user type "yes" and click on "Ok" button, "b.js" must load in page (not open in new window or new tab)
what code I must to use in ??????????? place to solve my problem?
here is the code:
HOME.html
<html>
<head>
</head>
<body>
<form name="load">yes OR no<input name="id" type="text">
<input type="button" value="OK" onClick="my(document.forms.load)">
<script>
function my(form) {
if (form.id.value=="yes") {
?????????????
} else {
alert("NO")
}
}
</script>
</body>
</html>
b.js
document.write(`
<html>
<h1> Load the HTML code</h1>
</html>
`);
I tried to use <script src="b.js"></script> but this code immediately load "b.js" that I dont what this
I tried to use
var scriptTag = document.createElement('script');
scriptTag.setAttribute('src','b.js');
document.head.appendChild(scriptTag)
but not working
I tried to use
document.getElementsByTagName('body')[0].innerHTML += "<script src='b.js'></script>";
but this code not working
what can I do to load the "b.js" file after click on button?
thanks :)
Is this what you're looking gor?
function my(form) {
const loadHTML = () => {
const scriptB = document.createElement('script')
scriptB.setAttribute('src','b.js')
console.log(scriptB)
document.write(`
<h1>Load the HTML code</h1>
${scriptB.outerHTML}
`);
}
if (form.id.value==="yes") {
loadHTML()
} else {
alert("NO")
}
}
<html>
<head>
</head>
<body>
<form name="load">
<h2>YES or NO</h2>
<input name="id" type="text">
<input type="button" value="OK" onClick="my(document.forms.load)">
</form>
</body>
</html>
I working on displaying information when we press a radio button. I wanted to display an image in addition to this, so I did the following, but the text appears well, but the image is not displayed. What should I do?
The image will look like this:
my project path
html
<form name="image_type">
<input type="radio" name="check_img" value="눈" onclick="eyesinfo()" /><span>눈</span
</form>
<p class="disease-information"></p>
<script>
function eyesinfo(){
var info = "sometext<br><img src='images\earsexample.jpg'>";
$('.disease-information').html(info);
}
</script>
Please use below code it will work for you.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<form name="image_type">
<input type="radio" name="check_img" value="눈" onclick="eyesinfo()" /><span>눈</span>
</form>
<p class="disease-information"></p>
<script>
function eyesinfo(){
var info = "sometext<br><img src='https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_92x30dp.png'>";
$('.disease-information').html(info);
}
</script>
</body>
</html>
Make sure to add a real image path for the attribute of img.
var info = "sometext<br><img src='https://freeiconshop.com/wp-content/uploads/edd/eye-outline.png'>";
$('.disease-information').html(info);
Please change your script as follows:
<script>
function eyesinfo(){
let img = document.createElement("img");
$(img).attr("src","https://petokala.com/images/logo.png");
$(".disease-information").html('');
$(img).appendTo($('.disease-information'));
}
</script>
I have two HTML pages, one in which a file is uploaded and another in which the file is read.
Here is the page where it is uploaded:
<html>
<head>
<script>
function set_file() {
if (typeof(Storage) !== 'undefined') {
localStorage.file_input = document.getElementById("file_input").files[0];
}
</script>
</head>
<body>
<form action='pagetwo.html'>
File: <input type="file" id="file_input">
<input type="submit" value="run" onclick="set_file()">
</form>
</body>
</html>
Here is the file in which it is read:
<html>
<head>
</head>
<body>
<script>
let reader = new FileReader();
reader.readAsText(localStorage.file_input); // This causes the error
</script>
</body>
</html>
When I run this, I get the error "Argument 1 of FileReader.readAsText is not an object". Does anyone know why this is?
I want to upload file using jQuery, but I am getting an exception saying undefined is not a function at $('#myFile').ajaxForm({
HTML
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
<script src="jquery-1.11.1.min.js"></script>
<script src="x.js"></script>
</head>
<body>
<form enctype="multipart/form-data" action="/FileUploadUI5/upload"
method="POST" id="myFile">
<input type=file name=upfile><br> <input type="submit"
name="Upload" value="Upload" id="ubutton" />
</form>
</body>
</html>
X.js
$(document).ready(function() {
$(function() {
$('#myFile').ajaxForm({
beforeSend : function() {
},
uploadProgress : function(event, position, total, percentComplete) {
alert(position + "|" + total + "|" + percentComplete);
},
complete : function(xhr) {
// status.html(xhr.responseText);
}
});
});
$('#ubutton').click(function(e) {
$('#myFile').submit();
});
});
I believe sending files is not available in pure jquery. I did it few days ago using plugins;
http://rubaxa.github.io/jquery.fileapi/
or
https://github.com/blueimp/jQuery-File-Upload
The first one is really impressive; i was able to do it in no time and visual progress indicatior and ability to use webcam for images is astonishing.
more in the topic You can find here, i think: How can I upload files asynchronously?
hope it helps :-)