HTML: Form upload file

Question

I´m trying to create a form in HTML5 to upload a file to the server. My HTML code is the following

<form action='upload.php' method='post' enctype='multipart/form-data'>
  Select file to upload:
  <input type='file' name='fileToUploadNep'>
  <input type='submit' value='submit'></form>;

but as output i get this

there is no way to select the file from the harddisk. can someone please help me ?

I'm not able to reproduce your issue. What browser are you using? Is there any odd styling going on? — Zev
– Zev, Commented Jul 1, 2018 at 6:37
I have copied your markup into a snippet into the question, so that you can run it and confirm that it is identical to the screenshot you linked to. Feel free to edit the snippet in order to reproduce the issue. — Nisarg Shah
– Nisarg Shah, Commented Jul 1, 2018 at 6:43
Hi. thanks for the fast reply. You are right. I have the following style "input[type='file'] {display: none;}" that I cannot remove because of another input form. How can I solve my problem ? — zepifiwe
– zepifiwe, Commented Jul 1, 2018 at 6:50

Jswq · Accepted Answer · 2018-07-01 07:01:01Z

1

Use inner CSS style like this:

<form action='upload.php' method='post' enctype='multipart/form-data'>
  Select file to upload:
  <input type='file' name='fileToUploadNep' style="display:block" >
  <input type='submit' value='submit'></form>

answered Jul 1, 2018 at 7:01

Jswq

7861 gold badge8 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jishnu Raj · Accepted Answer · 2018-07-01 07:00:51Z

1

This maybe an error with your web browser. The code is working perfectly on my web browser. Just tried it on Chrome web browser. I don't know why you added that semi-colon at the end of your code:

<form action='upload.php' method='post' enctype='multipart/form-data'>
  Select file to upload:
  <input type='file' name='fileToUploadNep'>
  <input type='submit' value='submit'></form>

; The code is working properly. Ask the developer of your web browser. Screenshot, taken from my computer... If you have another form on the web page and wants to hide one of it's input element, just simple hidden class to it and in your CSS file, add .hidden{display: none} and that's all! or, the simplest way is to add an inline style to the input.file element. It'll override the style, written on your CSS file. Sample: <input type='file' name='fileToUploadNep' style="display: inline-block">

edited Jul 1, 2018 at 7:00

answered Jul 1, 2018 at 6:51

Jishnu Raj

2204 silver badges18 bronze badges

3 Comments

zepifiwe Over a year ago

Hi. thanks for the fast reply. You are right. I have the following style "input[type='file'] {display: none;}" that I cannot remove because of another input form. How can I solve my problem ?

Jishnu Raj Over a year ago

Edited the answer. Check it out.

zepifiwe Over a year ago

Hi. style="display: inline-block" does the job. Thank a lot :)

Collectives™ on Stack Overflow

HTML: Form upload file

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related