Stats: 3,192,209 members, 7,947,082 topics. Date: Thursday, 12 September 2024 at 12:14 PM |
Nairaland Forum / Science/Technology / Programming / How Do I Customize This Html Tag <input Type="file"> (1671 Views)
How Can I Center The Main-container In This HTML Layout ? / Can I Claim Expert In Html,javascript,css & Php After 1yrs Of Constant Learning? / Lets Start A Real Web-deveopment Course Here Html+css+javascript+php+mysql (2) (3) (4)
How Do I Customize This Html Tag <input Type="file"> by teampregar(m): 9:50pm On Jun 22, 2016 |
At default when the file upload tag is used it shows choose file or chose on its upload button, just like the on on Nairaland when u want to make a post. What i want to do is to change the choose text to something like 'upload now'. I have tried this: <input type='file' value='upload now'> but its not working , i know this i acheivable as facebook have it on their web app.. Pls can anyone help.. cc: dhtml18 , guru01 , CodeHouse , scoutlebest4 |
Re: How Do I Customize This Html Tag <input Type="file"> by Nobody: 9:53pm On Jun 22, 2016 |
I know I did that stuff on my Nairaland.com, but it has been long, I have forgotten the how. All I remember is that it is a very long something. |
Re: How Do I Customize This Html Tag <input Type="file"> by teampregar(m): 9:57pm On Jun 22, 2016 |
... |
Re: How Do I Customize This Html Tag <input Type="file"> by teampregar(m): 10:00pm On Jun 22, 2016 |
dhtml18:Does it involve using javscript's file upload API? help me make a google search on it and post the answers here pls, right now am using freebasics(facebook's free internet service) and i cannot access google with it no megabyte sef.. |
Re: How Do I Customize This Html Tag <input Type="file"> by Nmeri17: 10:13pm On Jun 22, 2016 |
Re: How Do I Customize This Html Tag <input Type="file"> by teampregar(m): 10:18pm On Jun 22, 2016 |
Nmeri17:Explain please |
Re: How Do I Customize This Html Tag <input Type="file"> by Nmeri17: 11:15pm On Jun 22, 2016 |
teampregar:OK. I've whipped up a jQuery snippet. More like a hack with which you can use to simulate it.It looks like this:
I've added a working bin here to demonstrate a use case for you. https://output.jsbin.com/qoqoxa Modified It seems to only work on chrome because I used vendor specific prefixes. Use other prefixes for broader access. 1 Like 1 Share |
Re: How Do I Customize This Html Tag <input Type="file"> by Nobody: 3:35am On Jun 23, 2016 |
^^^the hack i did on Nairaland works even on IE 6 (as does the entire website) as well as all browsers i tested in. These days, too much JAVA and other languages have somewhat reduced my efficiency in css/javaScript. Let me see if I can whip up a little tutorial from my past work on this matter. What I know I did not do is that your trigger click event - i remember that method failed woefully back then. |
Re: How Do I Customize This Html Tag <input Type="file"> by KvnqPrezo(m): 4:31am On Jun 23, 2016 |
during lecture was thought how to create file form... . but usinq freebasics now cant help now . but i know its done with <input type="file"> with some extra code will provide the answer tomorrow... |
Re: How Do I Customize This Html Tag <input Type="file"> by Nobody: 5:10am On Jun 23, 2016 |
^^^While we are still awaiting your lectures, me, i have been having a sleepless night over this matter. @OP just go straight to http://blogs.Nairaland.com/archives/8-How-To-Customize-The-HTML-Form-File-Upload-Element.html for the solution. This is the sample code here - http://blogs.Nairaland.com/demos/html_file_upload_customized/customized.php (you can decompile that and skip all the long long blog message jare - that is for newbies) 1 Like |
Re: How Do I Customize This Html Tag <input Type="file"> by Nmeri17: 6:40am On Jun 23, 2016 |
dhtml18: ![]() ![]() ![]() ![]() ![]() ![]() On a more serious note, as far as I'm concerned, whatever would cause you to seek to customize an upload button beyond simple styling, is evil and should be ostracised from your mind entirely. The guy that gave instances of sites using it should take cognition of the fact that LinkedIn and the Facebook mobile applications are web applications that cannot be accessed by smaller devices hence they have stronger control over how it displays. For one, Opera for mobile and IE display the button on the right. Opera for PC displays it on the left and uses webkit approved prefixes but the event never triggers regardless of if you strike the button with a stick ![]() @dhtml18 I hardly give a fûck about how my project appears on other devices/browsers. If you do not use PC Chrome, well, fûck you and your shitty browsers ![]() ![]() ![]() ![]() ![]() ![]() Finally, OP, best advice; ditch the entire setup. If you wanno style the button to the point where it sings and dance, I can help you with that also(Although this also would be a hack and is not reliable across browsers other than good old Chrome ![]() 4 Likes 1 Share |
Re: How Do I Customize This Html Tag <input Type="file"> by Nobody: 7:06am On Jun 23, 2016 |
laughing like a mad man, this is unbelievable, and they call me the master troll. . . . . . . . . . . but one thing is for sure, it is better to just use the normal way, unless you really really really have to do it. |
Re: How Do I Customize This Html Tag <input Type="file"> by bot101(m): 12:23pm On Jun 23, 2016 |
Easiest way would be to hide the file input element, style a span, input text, whatever and a button to look like a file input if it is absolutely necessary and simulate a click event on the hidden file input when the styled button is clicked. Did that sometime ago. |
Re: How Do I Customize This Html Tag <input Type="file"> by bot101(m): 12:25pm On Jun 23, 2016 |
Nmeri17: True true pesin no come this world come suffer ooo ![]() ![]() |
Re: How Do I Customize This Html Tag <input Type="file"> by teampregar(m): 12:51pm On Jun 23, 2016 |
Nmeri17:I dont understand dis part, the stuff i am talkig about works on mobile.facebook.com with an opera mini for android browser. Do u also mean that Facebook for Andorid,IOS and windows phone are not actually native applications but web applications? |
Re: How Do I Customize This Html Tag <input Type="file"> by Nobody: 2:32pm On Jun 23, 2016 |
teampregar:You are mixing up technologies bro. There are other ways of doing it - but since i speak in codes, i will rather provide another example when i have time. bot101:This will fail in most browsers like internet explorer. I mentioned that in my blog post. |
Re: How Do I Customize This Html Tag <input Type="file"> by FincoApps(m): 8:23pm On Jun 23, 2016 |
dhtml18: Nice |
Re: How Do I Customize This Html Tag <input Type="file"> by bot101(m): 8:49pm On Jun 23, 2016 |
Another hack would be to style a button blah blah blah and overlay it with a completely transparent file input element. |
Re: How Do I Customize This Html Tag <input Type="file"> by Nobody: 9:06pm On Jun 23, 2016 |
bot101:I already mentioned something like that. This is programming section, you need to speak in codes - talk is cheap. Write a code to make your point. I am the only person that have provided a likely solution on this thread. We need other alternatives. |
Re: How Do I Customize This Html Tag <input Type="file"> by Nmeri17: 9:34pm On Jun 23, 2016 |
[s] dhtml18:[/s]
|
Re: How Do I Customize This Html Tag <input Type="file"> by Nobody: 9:56pm On Jun 23, 2016 |
The poster above me needs to be e-flogged thoroughly. |
Re: How Do I Customize This Html Tag <input Type="file"> by bot101(m): 5:22am On Jun 24, 2016 |
Re: How Do I Customize This Html Tag <input Type="file"> by bot101(m): 5:23am On Jun 24, 2016 |
dhtml18: As someone said earlier, I no come this world come suffer. |
Re: How Do I Customize This Html Tag <input Type="file"> by Nobody: 5:57am On Jun 24, 2016 |
bot101:Ha ha ha ha! |
(1) (Reply)
I Need A Blog / Saas Software Development Company / Javascript Code Autocomplete In Webpage
(Go Up)
Sections: politics (1) business autos (1) jobs (1) career education (1) romance computers phones travel sports fashion health religion celebs tv-movies music-radio literature webmasters programming techmarket Links: (1) (2) (3) (4) (5) (6) (7) (8) (9) (10) Nairaland - Copyright © 2005 - 2024 Oluwaseun Osewa. All rights reserved. See How To Advertise. 45 |