Menu
I am new in php. I have a form on which i place a button Value as Upload MB when user click on this button it redirects on a web form where i place a file upload control and user upload file here.
Here is image
After clicking this button user redirect on this form
here user upload file.
MY QUESTION
Is it possible that can i make my button Upload Mb as file upload button? Can it works like file upload control button?
Actually i want to save user time. I want that when user click on Upload MB button it not redirects on Form. But when user Click on Upload MB button it allow to user to upload file and open browsing window. After that when user upload file it redirects on form.
Can you guys tell me it is possible or not?
794
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).
The <input type="file"> defines a file-select field and a "Browse" button for file uploads. To define a file-select field that allows multiple files to be selected, add the multiple attribute. Tip: Always add the <label> tag for best accessibility practices!
You can keep a <input type='file' hidden/> in your code and click it using javascript when the user clicks on the "Upload MB" button.
Check out this fiddle.
Here is the snippet.
document.getElementById('buttonid').addEventListener('click', openDialog); function openDialog() { document.getElementById('fileid').click(); }<input id='fileid' type='file' hidden/> <input id='buttonid' type='button' value='Upload MB' />Here is the complete code.
<html> <head> <script> function setup() { document.getElementById('buttonid').addEventListener('click', openDialog); function openDialog() { document.getElementById('fileid').click(); } document.getElementById('fileid').addEventListener('change', submitForm); function submitForm() { document.getElementById('formid').submit(); } } </script> </head> <body onload="setup()"> <form id='formid' action="form.php" method="POST" enctype="multipart/form-data"> <input id='fileid' type='file' name='filename' hidden/> <input id='buttonid' type='button' value='Upload MB' /> <input type='submit' value='Submit' /> </form> </body> </html> my 2 cents to the topic: all in code, no input needs to be added to the page.
function onClickHandler(ev) {
var el = window._protected_reference = document.createElement("INPUT");
el.type = "file";
el.accept = "image/*";
el.multiple = "multiple"; // remove to have a single file selection
// (cancel will not trigger 'change')
el.addEventListener('change', function(ev2) {
// access el.files[] to do something with it (test its length!)
// add first image, if available
if (el.files.length) {
document.getElementById('out').src = URL.createObjectURL(el.files[0]);
}
// test some async handling
new Promise(function(resolve) {
setTimeout(function() { console.log(el.files); resolve(); }, 1000);
})
.then(function() {
// clear / free reference
el = window._protected_reference = undefined;
});
});
el.click(); // open
}#out {
width: 100px; height: 100px; object-fit: contain; display: block;
}
/* hide if it would show the error img */
#out[src=''] {
opacity: 0;
}<img src="" id="out" />
<button onClick="onClickHandler(event)">select an IMAGE</button>Note: the el might get garbage collected, before you process all data - adding it to window.* will keep the reference alive for any Promise-handling.
25
I would suggest to convert button to label. apply the css to label so that it looks like button.
e.g. -
<input type="file" id="BtnBrowseHidden" name="files" style="display: none;" />
<label for="BtnBrowseHidden" id="LblBrowse">
Browse
</label>
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
