How can I upload a new file on click of image button - javascript

I have got a task to upload new file from the click of image button.
My code is
<label>File</lable>
<input type="image" src="http://upload.wikimedia.org/wikipedia/commons/c/ca/Button-Lightblue.svg" width="30px"/>
On the click of this button I want to upload a new file.How can I do this?
You can check my code from
Demo

You could add a hidden file input field, like:
<input type="image" src="http://upload.wikimedia.org/wikipedia/commons/c/ca/Button-Lightblue.svg" width="30px"/>
<input type="file" id="my_file" style="display: none;" />
And do:
$("input[type='image']").click(function() {
$("input[id='my_file']").click();
});
Demo:: Updated Fiddle

There is no need for javascript just put the <input> and the <img> inside <label> make sure you hide the <input> like so:
<label for="image">
<input type="file" name="image" id="image" style="display:none;"/>
<img src="IMAGE URL"/>
</label>

There is no need for javascript.
Just place both <input type="file"> and <img src=""> inside a label.
Eg:
<label>
<input type="file" style="display:none">
<img src="">
</label>
This will work Just Fine
Demo: https://codepen.io/sandeeprana1001/pen/dyPVvJZ

If you are looking for a cross-browser compatible solution you should check out plupload(http://www.plupload.com) it supports image buttons aswell from what i remember.

you are using the wrong input, use file instead, if you want the button to loke like the circle in your code demo you will need to use CSS to change the way "submit" looks like. This has to be in a form:
<form action="upload_file.php" method="post" enctype="multipart/form-data">
<input type="file" name="myfile"/>
<input type="submit" class="circle-btn"/>
<form>
I don't know what language are you using in the server-side (PHP, ASP.NET, etc) but you will need to create a page (for xample "upload_file.php" for php). You can easily find examples in google about how to create a page like that, just copy pasete the code:
An example in PHP: http://www.w3schools.com/php/php_file_upload.asp
Hope it helps :)

You can do this using css.
Please check the 4th answer in this blog.
How can I customize the browse button?
You can use your image as background image of the .button class.

You can also use this in order to access the file that you uploaded since in PHP you can't access the file inside a label.
<input type="file" name="input" id="input" style="display:none;">
<label for="input">
<img src="images/default.jpg" id="image">
</label>

Supplement for DemoUser's answer, add .focus() works for me.
$("input[type='image']").click(function() {
$("input[id='my_file']").focus().click();
});

Related

HTML 5 Linking/Masking <input type='file'> to an <a>

If the title confuses you; what's the most elegant way to mask the difficult <input type='file'/> to a friendly <a/> so when the <a> is selected, the file explorer is prompted?
You can simulate a click with jQuery like this.
<input type='file' id="myInput"/>
Launch File Upload
​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​
$("#myAnchor").click(function () {
$("#myInput").trigger('click');
});
Working Fiddle
​

Hiding input doesnt work

<input type="checkbox" name="AvatarfileSelected" value="image"
id="AvatarfileSelected" onclick="$('#extra').hide('slow')"/>
<span style="color:#538f05;">Change Image</span>
<div id="extra">
<input type="file" name="avatarfile" id="avatarfile"></input>
</div>
The above code doesn't work. Could someone show me the mistakes?
You probably didn't include jQuery...
Use vanilla javascript:
onclick="document.getElementById('extra').style.display = 'none'";
Instead of:
onclick="$('#extra').hide('slow')"
(Or include jQuery if you want to use it.)
BTW, <input> doesn't have a closing tag: </input>
Replace:
<input type="file" name="avatarfile" id="avatarfile"></input>
With:
<input type="file" name="avatarfile" id="avatarfile" />
Take out the onclick event from the HTML markup and do it in unobutrusive way. Make sure you bind your event functionalities in document ready event.
Use it like this
$(function(){
$("#AvatarfileSelected").click(function(){
$("#extra").hide();
});
});​
Jsfiddle sample : http://jsfiddle.net/p9tdf/1/

Upload File with one button

How can I make a button in the html you need to send files that allow you to select the file and then sending it on the page that I want without using a button to select the file and a button to send it to another page?
Thanks you!
<form>
<input type="file" onchange="this.form.submit()" />
</form>
jsFiddle Demo
form.submit() on MDN
You should use
HTML
<form id="form">
<input type="file" id=file"/>
</form>
more info: http://www.w3.org/wiki/HTML/Elements/input/file
Jquery
$("#file").onchange(function () {
$("#form").submit();
});
I think it more simple, has no javascript need(inline) and fully functional, it works great.
<form id="MyGreatFileUploadForm" action="/upload">
<input type="file" id="MyGreatFileUploadHidedButton" onChange="document.getElementById('MyGreatFileUploadForm').submit();" style="display:none;" />
<button type="button" onclick="document.getElementById('MyGreatFileUploadHidedButton').click();">Upload My Great File</button>
</form>

External javascript file giving problems

I am new to javascript and working on a small form validation project...I have used external javascript file for this purpose but it is giving me problems.I have included this file properly in my html form but it is not updating any div or changing any color however this file is showing popup alerts.....Another thing is that when I copy and paste the same code directly into my html tags then it works fine......I dont know why this is happening ????
The html tags I have used are actually SPRING HTML tags...Are these tage creating problem????
<label for="edit-mail"> First Name<span class="form-required" title="This field is required.">*</span></label>
<form:input path="firstName" id="firstName" />
<div id="firstNameError"</div>
<form:errors path="firstName"/>
<div id='user-register_FirstName_errorloc' class="error_strings"></div>
Make sure that you're returning false to prevent the default behavior of your button (which is to submit the form:
<input type="submit" name="op" id="edit-submit" value="Next" class="form-submit" onClick="validateForm();return false;">
See the difference here: http://jsfiddle.net/atc3B/

HTML + Javascript form submission question

I have authored a html + javascript form which displays a set of images along with a submit button. The user can select the images he or she is interested in and when the user clicks the image, I change the image border to indicate image selection.
And when the user clicks on the submit button, I would like my server side script to receive the image uris associated with the selected images for further processing.
I am a JS newbie. I would like to know how best to do this. Will I need a global javascript array which gets populated with the selected image URIs? And this array can then be submitted as part of HTTP POST?
Any tips/pointers will be helpful.
If I were you, I’d make sure it works without JavaScript too. E.g.
<form action="" method="POST">
<label for="image_1">
<img src="image_1_uri" alt="Image 1" />
<input type="checkbox" name="images" id="image_1" value="image_1_uri" />
</label>
<label for="image_2">
<img src="image_2_uri" alt="Image 2" />
<input type="checkbox" name="images" id="image_2" value="image_2_uri" />
</label>
<input type="submit" />
</form>
Then adapt your border-adding JavaScript to work when the label is clicked on, rather than the image.
Hide the checkboxes via CSS if you’re not keen on them being there. (You’ll need to add a class to the checkboxes to do this in older versions of Internet Explorer.)
Try this:
//...let's suppose this is the image you change the border of on click..
<img src="whatever" onclick="createHidden(this);" />
<script type="text/javascript">
function createHidden(field)
{
var hdn = document.createElement("input");
hdn.setAttribute('type', 'hidden');
hdn.setAttribute('name', 'hdn[]');
hdn.setAttribute('value', field.src); // populate images src now
var frm = document.getElementsByTagName("form")[0];
frm.appendChild(hdn);
}
</script>
Now you can access the images' paths in the hdn array in your server-side script.

Categories