Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>Follow these steps then you can create custom styles for your file upload form:</p> <p>1.) This is the simple HTML form(please read the HTML comments I have written here bellow)</p> <pre><code> &lt;form action="#type your action here" method="POST" enctype="multipart/form-data"&gt; &lt;div id="yourBtn" style="height: 50px; width: 100px;border: 1px dashed #BBB; cursor:pointer;" onclick="getFile()"&gt;Click to upload!&lt;/div&gt; &lt;!-- this is your file input tag, so i hide it!--&gt; &lt;div style='height: 0px;width: 0px; overflow:hidden;'&gt;&lt;input id="upfile" type="file" value="upload"/&gt;&lt;/div&gt; &lt;!-- here you can have file submit button or you can write a simple script to upload the file automatically--&gt; &lt;input type="submit" value='submit' &gt; &lt;/form&gt; </code></pre> <p>2.) Then use this simple script to pass the click event to file input tag.</p> <pre><code> function getFile(){ document.getElementById("upfile").click(); } </code></pre> <p>Now you can use any type of a styling without worrying how to change default styles. I know this very well, because I have been trying to change the default styles for month and a half. believe me it's very hard because different browsers have different upload input tag. So use this one to build your custom file upload forms.Here is the full AUTOMATED UPLOAD code.</p> <pre><code>&lt;html&gt; &lt;style&gt; #yourBtn{ position: relative; top: 150px; font-family: calibri; width: 150px; padding: 10px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border: 1px dashed #BBB; text-align: center; background-color: #DDD; cursor:pointer; } &lt;/style&gt; &lt;script type="text/javascript"&gt; function getFile(){ document.getElementById("upfile").click(); } function sub(obj){ var file = obj.value; var fileName = file.split("\\"); document.getElementById("yourBtn").innerHTML = fileName[fileName.length-1]; document.myForm.submit(); event.preventDefault(); } &lt;/script&gt; &lt;body&gt; &lt;center&gt; &lt;form action="#type your action here" method="POST" enctype="multipart/form-data" name="myForm"&gt; &lt;div id="yourBtn" onclick="getFile()"&gt;click to upload a file&lt;/div&gt; &lt;!-- this is your file input tag, so i hide it!--&gt; &lt;!-- i used the onchange event to fire the form submission--&gt; &lt;div style='height: 0px; width: 0px;overflow:hidden;'&gt;&lt;input id="upfile" type="file" value="upload" onchange="sub(this)"/&gt;&lt;/div&gt; &lt;!-- here you can have file submit button or you can write a simple script to upload the file automatically--&gt; &lt;!-- &lt;input type="submit" value='submit' &gt; --&gt; &lt;/form&gt; &lt;/center&gt; &lt;/body&gt; &lt;/html&gt; </code></pre>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    3. VO
      singulars
      1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload