CODEWITHSUNDEEP
javascriptjqueryhtml
Goten13
Goten13

Reputation: 43

make file input an href

I need to hide an input so that I looks like you're clicking a regular custom button and firing an input type"file". I've looked at a couple examples and used what I saw, but for some reason I can't get the <a> tag to fire. What Am I missing?

HTML:

<input id="ad-docs[]" type="file" name="ad-docs[]" multiple="multiple" style="display:none;"/>
    <a id="upload_link" class="button-link button-link-blue">BROWSE</a>

JS:

$("#upload_link").click(function(){
    $("#ad-docs[]").click();
});

Upvotes: 1

Views: 180

Answers (3)

Philipp
Philipp

Reputation: 4270

If i understand correctly, you want to hide the file-input and control it via a "nicer" button. Try this:

html

<span class="btn-file">
   <span>Click to select or simply drag and drop files here...</span>
   <input type="file" id="files" required multiple>
</span>

css

.btn-file {
    position: relative;
    overflow: hidden;
    height: 4em;
}
.btn-file input[type=file] {
    position: absolute;
    top: 0;
    right: 0;
    min-width: 100%;
    min-height: 100%;
    font-size: 100px;
    text-align: right;
    filter: alpha(opacity=0);
    opacity: 0;
    outline: none;
    background: white;
    cursor: inherit;
    display: block;
}

Upvotes: 0

rahul
rahul

Reputation: 187030

You can use CSS for doing this and using z-index and opacity you should be able to achieve this.

Sample Code

HTML

<div id="container">
  <input type="file" id="txtFile" />
  <button id="btnFile">
    Click me
  </button>
</div>

CSS

#container {
  positin: relative;
}

#txtFile {
  position: absolute;
  z-index: 50;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  /* IE 5-7 */
  filter: alpha(opacity=0);
  /* Netscape */
  -moz-opacity: 0;
  /* Safari 1.x */
  -khtml-opacity: 0;
  /* Good browsers */
  opacity: 0;
}

#btnFile {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 20;
}

JSFIDDLE

Upvotes: 0

Andrew Brooke
Andrew Brooke

Reputation: 12163

You have some invalid characters in your selector -> []

You can avoid this problem by using the jQuery Attribute Equals Selector for your ID, like this

$("[id='ad-docs[]']").click();

Upvotes: 1

Related Questions