How to check if file was selected with Jquery? - javascript

I can't seem to find out why this won't work.
photoVal always equals nothing. So the background I have never disappears. When I select a file shouldn't the value change?
Jquery
$(document).ready(function() {
$('.browsebutton').bind("click" , function () {
$('#uploadphoto').click();
});
var photoVal = $('#uploadphoto').val();
$('#uploadphoto').change(function(){
alert(photoVal);
});
if (photoVal !== ''){
$('#photo').css('background', 'none');
}
});
HTML
<div id="photo">
<img id="preview" src="#" alt="Image Preview" />
</div>
<br>
<div id="browse">
<button type="button" class="browsebutton">Add Photo</button>
</div>
<input type="file" id="uploadphoto" name="uploadphoto" style="display: none;"/>

This question seems like a duplicate.
Try this :
$(function() {
$("#uploadphoto").change(function (){
var file_name = $(this).val();
});
});

Related

Getting the url of an image if selected

I'm pretty new to js and having some trouble trying to get the img src next to a checkbox.
The structure of the elements looks like this:
'<input type="checkbox" class="myCheck" id="myCheck" data-s3="object"><!--...--><img src="'+object2hrefvirt(s3exp_config.Bucket, data)+'" width="100" height="100">';
Being object2hrefvirt(s3exp_config.Bucket, data) the image url.
The goal is to get all the urls to download them in a pack (not necessarily in a zip but to download all the selected urls at once) when a button is clicked.
Here's what I have so far to know if a checkbox has been selected:
$(document).ready(function() {
$('#download-checker').click(function(e) {
checkDownload();
});
function checkDownload(){
if(document.getElementsByTagName("input")){
if(document.getElementById("myCheck").checked){
//get img url
} else if (!document.getElementById("myCheck").checked){
alert("No selected files");
} else {
alert("Error");
}
}
}
}
Like this
NOTE: IDs need to be unique
const checkDownload = () => {
const list = $(".myCheck:checked")
.map(function() { return $(this).next().attr("src") })
.get();
$("#list").text( list.join(", ")); // or return list.length>0 if you want
}
$(function() {
$('#download-checker').on("click",checkDownload);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" class="myCheck" data-s3="object">
<img src="image1.jpg" width="100" height="100">
<input type="checkbox" class="myCheck" data-s3="object">
<img src="image1.jpg" width="100" height="100">
<button type="button" id="download-checker">Check</button>
<span id="list"></span>

How to preview images uploaded to database?

I've tried several different ways to upload image to database, using Bootstrap. My IDE is Visual Studio. What I need is to let the uploaded image appear in a preview. Although I've seen a working demo before, when I run my code, the photo file appears on screen without a preview image. Because of this, I'm not sure if the image is stored in database successfully or not. Any advice would be very appreciated! I've included all of the current code:
HTML:
<div>
<form>
<div>
<div class="form-group hirehide is-empty is-fileinput width100">
<div class=socialmediaside2>
<input class=fileUpload accept="image/jpeg, image/jpg" name=profilepic[] type=file value="Choose a file">
<div class=input-group>
<input class=form-control id=uploadre placeholder="Please select your profile picture" readonly>
<span class="input-group-btn input-group-sm">
<button class="btn btn-fab btn-fab-mini"type=button><i class=material-icons>attach_file</i></button>
</span>
</div>
</div>
</div>
<div class=upload-demo>
<div class=upload-demo-wrap><img alt="your image" class=portimg src=#></div>
</div>
</div>
</form>
</div>
JavaScript:
function readURL() {
var $input = $(this);
var $newinput = $(this).parent().parent().parent().find('.portimg');
if (this.files && this.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
reset($newinput.next('.delbtn'), true);
$newinput.attr('src', e.target.result).show();
$newinput.after('<input type="button" class="delbtn removebtn" value="remove">');
}
reader.readAsDataURL(this.files[0]);
}
}
$(".fileUpload").change(readURL);
$("form").on('click', '.delbtn', function (e) {
reset($(this));
});
function reset(elm, prserveFileName) {
if (elm && elm.length > 0) {
var $input = elm;
$input.prev('.portimg').attr('src', '').hide();
if (!prserveFileName) {
$($input).parent().parent().parent().find('input.fileUpload').val("");
//input.fileUpload and input#uploadre both need to empty values for particular div
}
elm.remove();
}
}
CSS:
body {
img.portimg {
display: none;
max-width: 200px;
max-height: 200px;
}
}

get value with javascript into iframe

please help me to solve this error
<input id="webadd" type="text"></input>
<div id="mydiv">
<iframe id="frame" src="" width="320px" height="480px"></iframe>
</div>
<button id="button">Load</button>
<script>
$(document).ready(function(){
$("#button").click(function () {
var web-add=document.getElementById('#webadd').value
$("#frame").attr("src",+web-add);
});
});
</script>
this code contain error
Remove - from variable name, the + before variable, and the # before the id in getElementById
<script>
$(document).ready(function(){
$("#button").click(function () {
var webadd=document.getElementById('webadd').value
$("#frame").attr("src",webadd);
});
});
</script>
try removing '+' in
$("#frame").attr("src",+web-add); //remove '+' in this line
You need to remove the "+" before web-add in your script, and the "-" while declaring variable.
That gives :
var webadd=document.getElementById('#webadd').value
$("#frame").attr("src",web-add);
Full code :
<input id="webadd" type="text"></input>
<div id="mydiv">
<iframe id="frame" src="" width="320px" height="480px"></iframe>
</div>
<button id="button">Load</button>
<script>
$(document).ready(function(){
$("#button").click(function () {
var webadd=document.getElementById('#webadd').value
$("#frame").attr("src",web-add);
});
});
</script>

How to use dynamic div ID

I've been looking at so many answers here that are so close but because my jQuery knowledge is so patchy, I can't make them relevant. So I'll just go ahead and ask. I hope you all don't mind!
So, here's the script:
$("#button1").mouseenter(function(){
$("#a1").fadeIn('100', function() { });
$("#button1").mouseleave(function(){
$("#a1").fadeOut('100', function() {});
});
});
I have multiple buttons which, on mouseenter, I want to activate the corresponding arrow.
Rather than repeat the script for each pair - #button2 to #arrow2 etc - how can I just put in some neat variable in the $() bit and have it work? Sounds simple, I'm sure there's a way that my denseness cannot find.
This is the HTML (for those who requested it):
<div id="buttons">
<p><img src="images/1.png" name="button1" id="button1" /></p>
<p><img src="images/2.png" name="button2" id="button2" /></p>
<p><img src="images/3.png" name="button3" id="button3" /></p>
<p><img src="images/4.png" name="button4" id="button4" /></p>
<p><img src="images/5.png" name="button5" id="button5" /></p>
</div>
<div class="arrow" id="a1"><img src="images/arrow.png" width="747" height="75" /></div>
<div class="arrow" id="a2"><img src="images/arrow.png" width="747" height="75" /></div>
<div class="arrow" id="a3"><img src="images/arrow.png" width="747" height="75" /></div>
<div class="arrow" id="a4"><img src="images/arrow.png" width="747" height="75" /></div>
<div class="arrow" id="a5"><img src="images/arrow.png" width="747" height="75" /></div>
<div class="arrow" id="a6"><img src="images/arrow.png" width="747" height="75" /></div>
Your solution doesn't scale.
You are assigning eventhandlers for each element in the dom.
This is one of the beefs I have with jQuery. It makes it very easy to do these things wrong and shoot yourself in the foot along the way.
What you need is event delegation.
Essentially the concept is that you have an event handler much higher up in the dom tree that listens to events that bubble up. So you might be handling your mouse events on a list, not on the list items themselves, but on the document, in a single event handler.
Take a look at http://api.jquery.com/on/
Your code should be something like this:
$('body').on('mouseenter', '#buttons img', function (e) {
$('#a' + $(this).attr('id').slice(-1)).fadeIn(300);
});
$('body').on('mouseleave', '#buttons img', function (e) {
$('#a' + $(this).attr('id').slice(-1)).fadeOut(300);
});
Notice that I'm actually only using the id to get a link between the buttons and the arrows. You might consider skipping the id's all together and just go by what index the element has in its parent element.
Working example can be found here: http://jsfiddle.net/GNs44/1/
$(".buttonClass").mouseenter(function(){
$(this).siblings('.aClass').fadeIn('100', function() { });
$(".buttonClass").mouseleave(function(){
$(this).siblings('.aClass').fadeOut('100', function() {});
});
});
You can use this (or similar, instead of siblings use a proper selector) and add the mentioned classes (aClass and buttonClass) to your components).
An example where this works:
<div>
<button class="buttonClass">Description</button>
<a class="aClass">Description</a>
</div>
Note that it's important to "group" them inside a div tag, because otherwiese ALL <a> tags will fade in/out when you hover a button.
Rather than using the ID, give the button a class.
HTML:
<button id="button1" class="hoverbutton" />
<button id="button2" class="hoverbutton" />
jQuery:
$(".hoverbutton").mouseenter(function () {
$(".arrowclass").fadeIn('100', function () { });
});
$(".hoverbutton").mouseleave(function () {
$(".arrowclass").fadeOut('100', function () { });
});
Something like this might get you started:
$("[id*=button]").mouseenter(function(){
var t = $(this),
idnum = t.slice(-1);
$("[id=a" + idnum + "]").fadeIn('100', function() {
});
}).mouseleave(function(){
var t = $(this),
idnum = t.slice(-1);
$("[id=a" + idnum + "]").fadeOut('100', function() {
});
});

jQuery code refactoring help needed

An update to before, here's what I'm dealing with:
<body>
<div class="header"> <img class="imgLogo" src="img/vegtablelogo.jpg"> </div>
<div id="thumbsContainer">
<div class="thumb" id="carrotThumb"> <img id="showCarrot" class="imgThumb" src="img/carot.jpg" onClick=setupVeg("showCarrot", "carrotBig") /> </div>
<div class="hidden" id="carrotBig"> <img class="imgBig" src="img/carot.jpg" /> </div>
<div class="thumb" id="brocThumb"> <img id="showBroc" class="imgThumb" src="img/brocoli.jpg" onClick=setupVeg("showBroc", "brocBig") /> </div>
<div class="hidden" id="brocBig"> <img class="imgBig" src="img/brocoli.jpg" /> </div>
</div>
<!-- end thumbs container -->
<script>
var active = "";
function setupVeg(thumbVeg, hiddenVeg) {
$("#" + thumbVeg).click(function() {
if (active != hiddenVeg) {
$("div.hidden").hide("fast");
$("#" + hiddenVeg).show("fast", function() {});
active = hiddenVeg;
}
else {
$("div.hidden").hide("fast");
active="";
}
});
}
$("div.hidden").click(function () {
$("div.hidden").hide("fast");
isAnyBig=false;
});
</script>
</body>
This code is not working unfortunately. I have borrowed from suggested solution below.
Would be nice if it did work!
Any suggestions, most welcome.
I don't think you need any of the flags or the if conditions really. I think your logic is:
toggle carrotBig whenever showCarrot
is clicked.
hide div.hidden whenever showCarrot is clicked.
So all you need is:
$("#showCarrot").click(function () {
$("#carrotBig").toggle("fast");
$("#div.hidden").hide();
});
.toggle will handle one of your flags (isCarrotBig) and .hide() won't do anything if div.hidden is already hidden, so that takes care of your isAnyBig flag.
Now.. let's make that work with broc as well...
function setupVegetable(showId, toggleId) {
$("#" + showId).click(function () {
$("#" + toggleId).toggle("fast");
$("#div.hidden").hide();
});
}
setupVegetable("showCarrot", "carrotBig");
setupVegetable("showBroc", "brocBig");
If you're interested, you can refactor it FURTHER so you don't need to supply the IDs for each of the vegetables. I'll need to see your HTML markup though.
Ok I'll post a new answer in response to the edit.
Points worth noting:
Removed divs surrounding the imgs - they are unnecessary and complicate the relationship between the thumnnails and the large images.
Removed onclick attribute from within HTML - you will be attaching the event handlers in the JS so this is not needed.
Since the relationship between the thumbnails and the large images is quite obvious (the large images is just the next element) you don't need IDs to identify ANY of them. All you need is a class on the thumbnails.
Since we're not using IDs, only classes, you can add as many vegetables as you want without touching the JS
Your code modified:
<body>
<div class="header"> <img class="imgLogo" src="img/vegtablelogo.jpg"> </div>
<div id="thumbsContainer">
<img class="imgThumb" src="img/carot.jpg" />
<img class="imgBig hidden" src="img/carot.jpg" />
<img class="imgThumb" src="img/brocoli.jpg" />
<img class="imgBig hidden" src="img/brocoli.jpg" />
</div>
<!-- end thumbs container -->
<script>
$("#thumbsContainer .imgThumb").click(function () {
var thisImgBig = $(this).next();
// Hide all imgBigs, except for this one
$("#thumbsContainer .imgBig").not(thisImgBig[0]).hide();
// Toggle this imgBig
thisImgBig.toggle();
});
$("#thumbsContainer .imgBig").click(function () {
// Hide this imgBig
$(this).hide();
});
</script>
</body>
create a function and reuse it....something like:
/**
* document here....
*/
var toggleElements = function() {
// your code here
}
and then
$("#whatever").click(toggleElements);
Personally I would suggest creating a simple jQuery plugin. Something like so:
(function($){
$.fn.big = function(options) {
var defaults = {
target: '#carrotBig',
};
var options = $.extend(defaults, options);
return this.each(function() {
$(this).click(function () {
isBrocBig=false;
if (isCarrotBig == false && isAnyBig == false) {
$(options.target).show("fast", function() {});
isCarrotBig=true;
isAnyBig=true;
}
else if (isCarrotBig == true) {
$(options.target).hide("fast");
isCarrotBig=false;
isAnyBig=false;
}
else if (isCarrotBig == false && isAnyBig == true) {
$("div.hidden").hide("fast");
$(options.target).show("fast", function() {});
isCarrotBig=true;
}
else {
$("div.hidden").hide("fast");
isCarrotBig=false;
isAnyBig=false;
}
});
});
};
})(jQuery);
Then you just call it with something like so:
$("#showCarrot").big({target: '#carrotBig'})
Your next step should be to investigate whether you can get rid of the global variables or not.
Ok I have found a neat(ish) sollution, dependent on each hidden DIV being the .next() one. If it isn't it won't work but should be fine generally though. Hacked!
<div class="header"> <img class="imgLogo" src="img/vegtablelogo.jpg"> </div>
<div id="thumbsContainer">
<div class="thumb" id="carrotThumb"> <img id="showCarrot" class="imgThumb" src="img/carot.jpg" /> </div>
<div class="hidden" id="carrotBig"> <img class="imgBig" src="img/carot.jpg" /> </div>
<div class="thumb" id="brocThumb"> <img id="showBroc" class="imgThumb" src="img/brocoli.jpg" /> </div>
<div class="hidden" id="brocBig"> <img class="imgBig" src="img/brocoli.jpg" /> </div>
</div>
<!-- end thumbs container -->
<script>
var active = "";
$("div.thumb").click(function() {
var thumbVeg = $(this).attr("id");
var hiddenVeg = $(this).next().attr("id");
setupVeg(thumbVeg, hiddenVeg);
});
function setupVeg(thumbVeg, hiddenVeg) {
if (active != hiddenVeg) {
$("div.hidden").hide("fast");
$("#" + hiddenVeg).show("fast", function() {});
active = hiddenVeg;
}
else {
$("div.hidden").hide("fast");
active="";
}
}
$("div.hidden").click(function () {
$("div.hidden").hide("fast");
});
</script>

Categories

Resources