通过在html中自定义<a></a>来上传图像

Question

我是html的新手并尝试将图片上传到我的主页。

我已经在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>

然而，它显示了一个按钮，如下面的老式典型按钮，

我希望它能够通过点击来制作我自己的自定义按钮。

我试图在谷歌中找到，但他们使用的是<div>而不是我的<form>。 所以我在这里发布了customize the file button for image upload

我知道这可能是一个愚蠢的问题，但我只想学习！

我该如何做到？？

提前致谢！

Answer 1

以下是如何设置上传按钮样式的工作示例。基本上你必须隐藏你的html输入。

＆＃13;

＆＃13;

.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);
}

＆＃13;

<!-- 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>

＆＃13;

＆＃13;

＆＃13;