I've seen several ways to display image preview but none of them seem to work or they work only in FF/Chrome.
Trying to keep it simple:
Markup:
<input type="file" id="logo-upload" onchange="changePreview();"/>
<br/>
<img src='#Url.Image("logo.png")' alt="Preview" id="logo-preview"/>
Javascript:
<script type="text/javascript">
function changePreview() {
var input = $('#logo-upload').val();
$('#logo-preview').attr('src', input)
.width(150)
.height(50);
}
</script>
When debugging input shows the correct local image path but preview never shows up.
Why and how can I get this to work (in all browsers ) ?
Thanks.
Try setting the $('#logo-upload').change(function(){}) instead of using onChange. I think that's a good start. Then put the jQuery inside $(document).ready(function(){}). That could be another issue, if you're setting the script before the elements exist on the page.
If you can post more code, it would be beneficial.
Also, for IE, you're going to run into permissions issues that are on the user, which you don't have control over (at least in this situation). So, in those cases, you'll either have to upload the image first, to get the image from the server, OR they'll have to change their security settings to allow for this type of content to be accessed.
<input type="file" id="logo-upload" />
<br/>
<img src="#Url.Image('logo.png')" alt="Preview" id="logo-preview"/>
<script type="text/javascript">
$(document).ready(function() {
$('#logo-upload').change(function() {
var input = $(this).val();
$('#logo-preview').attr('src', input).width(150).height(50);
})
});
</script>
Related
I have the following code and it does not work in Chrome if I keep the trigger function inside the confirm function but it works in Firefox and Edge.
fileInput = $('<input type="file" id="upload-file" name="timing-upload" style="display:none;"/>');
if (confirm("Are you sure you want to replace all files?")) {
$(fileInput).trigger('click');
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
But it works if we remove the confirm condition in Chrome.
fileInput = $('<input type="file" id="upload-file" name="timing-upload" style="display:none;"/>');
$(fileInput).trigger('click');
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
There is already a similar question Triggering a input file click does not bring the file upload dialog but not any satisfied answer.
Any help is highly appreciated. Thanks in advance.
I'm not sure but according to the confirm documentation I think that this is the reason that the code doesn't work in chrome:
Starting with Chrome 46.0 this method is blocked inside an <iframe> unless it sandbox attribute has the value allow-modal.
I am trying to get the value of a range slider after it moves and then update my page. I have approached this by using "onchange" and calling some javascript to set a value to a text box and using php to get that value. The php does not even grab the value from the text area on load and I am not sure why. It says the id of the input text box is an "unidentified index." There might be a simple thing wrong or I may be approaching it completely wrong. I am new to this...
Here is the code for the slider.
<!doctype html>
<html lang="en">
<head>
<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>
<script>
function printValue(sliderID, textbox) {
var x = document.getElementById(textbox);
var y = document.getElementById(sliderID);
x.value = y.value;
}
window.onload = function() { printValue('slider1', 'rangeValue1')};
</script>
</head>
<body>
<form action='slider.php' method='get'>
<input id="slider1" type="range" min="100" max="500" step="10" onchange="printValue('slider1','rangeValue1')">
<input id="rangeValue1" type="text" size="2">
</form>
<?php
echo $_GET['#rangeValue1'];
?>
</body>
</html>
The js function does set input text box, but the php script doesn't happen. I need to get the value in PHP because the page I'm including it in is written in PHP. I don't know if, or how, the page has to be reloaded. I tried using location.reload() in the onchange function and it just continuously loaded the page.. Please help! Any input will be helpful! Thanks!
It looks like you might be getting Javascript and PHP mixed up.
PHP is run solely on your server when a browser accesses a php file. The output of the php file (like when you use echo) is sent as a webpage. However, Javascript is run solely in the browser. To make them communicate, you will need to load another webpage (or reload the current webpage). You can either use a form or directly craft the URL (probably easier in this case).
So you could do something like this inside printValue():
location.querystring="?value=" + x.value;
This will create a GET argument, which you can access with $_GET['value'], and reload the page.
EDIT: Performance Warning!
Every time the slider is moved, your server will end up resending the webpage, which could slow down the server. You might want to only send the new value after the user has clicked a button or something, in which case it would be easier to use a form.
What I am trying to do in the code below is to change the text in the Div1 tag with the information in the text input. The thing I want to accomplish is that the text is saved when I reload/quit the page or immediately when it is changed. Is this possible?
Thanks in advance.
<div id="Div1">
<p>Hi</p>
</div>
<input type="text" id='Input'/>
<input type="button" value="submit" onclick="GetInput();" />
<script type="text/javascript">
function GetInput () {
var Input = document.getElementById("Input").value;
document.getElementById('Div1').innerHTML= (Input);
}
</script>
Javascript is a client-side language. This means that the page elements (collectively known as the DOM) are only altered after the page is loaded from the web server and rendered in your browser. Javascript can change these but can not save any data.
In order to save data (persistence), you will need some type of data store. This is usually accomplished with a database running on a server. You will need to get your hands on one or possibly rent some storage space.
Try this, it may help you.
Save value:
localStorage.setItem("name", $('#Input').val());
Get value:
localStorage.getItem("name");
I am working on web project where I have to generate image and display it on JSP page when it gets load. Now the problem is that I am have to use same image name and hence browser is using cached image always and not the new one.
Display.jsp
<html>
<head>
<script type="text/javascript">
updateImage(){
var img1 = document.getElementById("text");
img1.src="sun.png?time=".new Date().getTime();
}
</script>
</head>
<body onload="updateImage()">
<form action="com.CheckName" method="get">
<input type="button" value="submit" name="submit" />
<img src="sun.png" id="text">
</form>
</body>
</html>
By clicking on button same jsp page gets loaded again.
I am using above code but still I am getting cached(old) image only on next page load. Where I am going wrong.
Please help.
Thanks
Since you're using JSP, you could append the current time using System.currentTimeMillis().
Replace this:
<img src="sun.png" id="text">
with this:
<img src="sun.png?time=<%=System.currentTimeMillis()%>" id="text">
I wouldn't suggest you to avoid caching it all the times. Instead of appending the current time, you could append the current version number (or the last time it has changed), so users won't have to download it again everytime they open this page.
You could also do that with javascript, but yours didn't work cause it had an error. Use + instead of . to concatenate strings.
img1.src="sun.png?time=".new Date().getTime(); //wrong
img1.src="sun.png?time=" + new Date().getTime(); //ok!
Just pay attention because onload is only executed when all content (including images) has been loaded. That means you'll get the cached version when you open the page (but the non-cached version will load after a while).
There are also other approaches, like setting no-cache headers to the HTTP response, but I guess that is not the point of this question.
I am trying to use this post in order to get the animated gif for Please wait message.... on button click. However, when I open the sample html page that I am testing on, I get an input box instead of an button with am image.
Below is the html code that I am trying on a test page.
<html>
<script type="text/javascript">
function loadSubmit() {
var ProgressImage = document.getElementById('progress_image');
document.getElementById("progress").style.visibility = “visible”;
setTimeout(function(){ProgressImage.src = ProgressImage.src},100);
return true;
}
</script>
<body>
<p style="visibility:hidden;" id="progress">
<img id="progress_image" style="padding-left:5px;padding-top:5px;" src="ajax-loader.gif" alt=""> Uploading in progress… </p>
<input class="contSubmit" onclick="return loadSubmit()" type=”button” src= "submitinfo_btn.png" />
</body>
</html>
Be careful when copy-pasting Code like this.
This is wrong:
type=”button”
This is right:
type="button"
Notice the difference? This happens if you copy Code from a website that doesn't have proper formatting for Code enabled.
According to your tutorial, the input should be of type "image", not "button".
Change your input type to image. The src is only valid for image.
Also, it appears your problem has nothing to do with your "please wait" animated gif, so maybe your title is misleading.