CODEWITHSUNDEEP
jqueryhtml
srsxyz
srsxyz

Reputation: 231

How to have a single button for upload file

Im trying to have a single upload file button without the choose file or submit buttons. I posted the image of my upload file button and the HTML and was wondering if anyone could point me in the right direction. Thanks

<a href="#" class="btn btn-info btn-sm remove">
  <span class="glyphicon glyphicon-upload"></span> Upload File
</a>

enter image description here

Upvotes: 8

Views: 32317

Answers (4)

bronze man
bronze man

Reputation: 1607

One button and one onClick event and one js. No more where to put the input dom problem.

html:

<button onClick="AskUserUploadFile()" >upload</button>

js:

let gElemInput = undefined;
function AskUserUploadFile(){
    if (gElemInput===undefined){
        gElemInput = document.createElement('input');
        gElemInput.style.display = "none";
        gElemInput.type="file"
        gElemInput.accept="image/png, image/jpeg"
        document.body.appendChild(gElemInput);
    }
    gElemInput.click();
}

https://jsfiddle.net/x04tuzgd/

Upvotes: 0

Arpit Shrivastava
Arpit Shrivastava

Reputation: 396

why don't you hide your <input type="file" id="file"> and show only your image button, when someone click your button use this code:

HTML:

<input type="file" id="file" style="display:none;" />
<button id="button" name="button" value="Upload" onclick="thisFileUpload();">Upload</button>

SCRIPT:

<script>
        function thisFileUpload() {
            document.getElementById("file").click();
        };
</script>

Upvotes: 21

Hadeel Alharthi
Hadeel Alharthi

Reputation: 84

You can do this:

<form enctype="multipart/form-data">
  <div>
    <input type="file" />
    <a href="#0" class="btn btn-info btn-sm remove">
      <span class="glyphicon glyphicon-upload"></span> Upload File
    </a>
  </div>
</form>

This is the CSS. It's basically positioning the input field on top of your button with opacity: 0. You can't see it but it works and it looks like your button is doing the job when it's not.

form div {
  position: relative;
  width: 102px;
  height: 38px;
  overflow: hidden;
  cursor: pointer;
}

input {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  z-index: 10;
}

.btn {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  padding: 10px 8px;
  background-color: lightblue;
  color: white;
  text-decoration: none;
  cursor: pointer;
}

Here's the JSFiddle to see it in action

Upvotes: 2

Ryan
Ryan

Reputation: 989

You can use like this

<form id="form">
<input type="file" id=file"/> 
</form>

Jquery for this

$("#file").onchange(function () {
$("#form").submit();
});

Upvotes: 5

Related Questions