上传图片与定制<a></a>在html

我是一个在html中的新手，并试图上传图片到我的主页。上传图片与定制<a></a>在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

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

我该怎么做...？

在此先感谢！

来源

2017-04-03 paulc1111

@mplungjan感谢编辑！ :)我有点发呆..：'（ – paulc1111

为什么http://stackoverflow.com/questions/6461252/custom-upload-button不适合你？ – mplungjan

@mplungjan nope ..不起作用..做了一个按钮，使用并遵循链接的答案，但当我点击 – paulc1111

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

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

来源

2017-04-03 08:55:42 loelsonk

上传图片与定制<a></a>在html

回答

相关问题