Uploading images with customizing in html

Question

I'm a newbie in html and trying to upload image to my homepage.

I already set up the uploading part like below in html,

<div class="collapse navbar-collapse" id="navbar-collapse">
  <ul class="nav navbar-nav navbar-right">
     <li>
       <form action="/upload", method="post", enctype="multipart/form-data">
         <input type="file" style="max-width: 30%; max-height: 50%;"  name="upFile" id="upFile" onchange="getCmaFileView(this,'name')" target="dropzone_1">
         <input type="submit" name="Upload" >
       </form>
     </li>
     <li>
       <form action="/jsondata", method="get", id="jsd", enctype="multipart/form-data"  ></form>
     </li>
     <li><a onclick="save2()" id="imageSave">Save</a></li>
  </ul>

However, it shows a button like old-fashioned typical button like below,

and I want it to make my own customized button using with clicking..

I tried to find in google, but they used <div> instead of <form> of mine.. So I posted here customize the file button for image upload

I know this might be a stupid question, but I just want to learn!

How can I make that...?

Thanks in advance!

@mplungjan Thanks for editing! :) I was kinda in a daze.. :'( — paulc1111, Apr 03 '17 at 08:56
Why does http://stackoverflow.com/questions/6461252/custom-upload-button not work for you? — mplungjan, Apr 03 '17 at 08:56
@mplungjan nope.. doesn't work.. made a button with using and followed answer from the link but doesn't appear anything when I click the — paulc1111, Apr 03 '17 at 09:16

score 1 · Accepted Answer · answered Apr 03 '17 at 08:55

Here is working example how to style your upload button. Basically you have to hide your html input.

.fileUpload {
    position: relative;
    overflow: hidden;
    margin: 10px;
}
.fileUpload input.upload {
    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
    padding: 0;
    font-size: 20px;
    cursor: pointer;
    opacity: 0;
    filter: alpha(opacity=0);
}

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<div class="fileUpload btn btn-success">
    <span>Click to upload new file</span>
    <input type="file" class="upload" />
</div>

Uploading images with customizing in html

1 Answers1