Menu
I have a hidden file upload as it looks really bad, I have displayed a nicer looking button and would like it to click the hidden file upload when its clicked.
function ClickUpload() {
$("#FileUpload").trigger('click');
}
<div id="MyUpload">
<span id="FileName">Choose File</span>
<input id="uploadButton" type="button" value="Upload" onclick="ClickUpload()">
</div>
<div id="hideUglyUpload">
<input type="file" name="FileUpload" id="FileUpload"/>
</div>
So far i can move into the function ClickUpload() but it just passes through the click without the file selection window popup.
905
Use a label tag and point its for attribute to the id of the default HTML file upload button. By doing this, clicking the label element in the browser toggles the default HTML file upload button (as though we clicked it directly).
By keeping <input> elements of visibility hidden, let web developers include data that cannot be seen or modified by users when a form is submitted. As a result, the input fields of type file having visibility hidden, cannot be access using any access specifiers directly.
I prefer not to have inline JS function calls in markup ... so a little change...
$(document).ready(function() {
$('#uploadButton').on('click',function(evt){
evt.preventDefault();
$('#FileUpload').trigger('click');
});
});
<div id="MyUpload">
<span id="FileName">Choose File</span>
<input id="uploadButton" type="button" value="Upload">
</div>
<div id="hideUglyUpload">
<input type="file" name="FileUpload" id="FileUpload"/>
</div>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
