自定义上传图像 <a></a> 在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!

Answer 1

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>