CODEWITHSUNDEEP
javascriptphpjqueryhtmlfile-upload
sanin
sanin

Reputation: 274

How to upload file on button click

I am trying to upload my file when user clicks the view button as shown in code below. I have tried the following code. Any kind of help is appreciated. Thank you.

#myInput {
  width: 50%;
  padding: 12px 20px 12px 40px;
  border: 1px solid #000;
  display: inline-block;
}

input[type=file]::-webkit-file-upload-button {
  width: 0;
  padding: 0;
  margin: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  border: none;
  border: 0px;
}

x::-webkit-file-upload-button,
input[type=file]:after {
  -webkit-appearance: button;
  -moz-appearance: button;
  border-collapse: separate;
  border-radius: 7px;
  -webkit-border-radius: 7px;
  --moz-outline-radius: 7px;
  content: 'View';
  color: #080708;
  background: #e3e3e3;
  text-decoration: none;
  display: inline-block;
  left: 100%;
  margin-left: 50px;
  position: relative;
  padding: 10px 46px 10px 40px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="file" name="myInput" id="myInput">

Upvotes: 0

Views: 2339

Answers (2)

Robin Zhang
Robin Zhang

Reputation: 1

You should put input tag into a form tag like this

<form action="" enctype="multipart/form-data" method="post">
    <input type="file" name="myInput" id="myInput">
    <input type="submit" value="submit">
</form>

also you need php(or some else) to restore upload files on your server.

Upvotes: 0

Eduardo Ponce de Leon
Eduardo Ponce de Leon

Reputation: 9696

Uploading a file to the server requires of back-end programming, like php for instance, and ideally some JavaScript validation. In this particular case CSS is not important as it does not play a roll on the task, only for aesthetics.

You will need to create:

  1. An HTML form that will submit multipart/form-data (enctype), ideally in post (method) to a specific file on the server (action)

  2. The file on the server requires of back-end programming like PHP to handle the uploaded file and save it somewhere on the server.

  3. You must validate your form (JavaScript) and also the file and data sent to the server (PHP) this to protect yourself from malicious files and data.

I believe with this information you can have a better idea on how to accomplish the task and do more specific research on your end.

Here is a tutorial that has been around for a while: http://www.tizag.com/phpT/fileupload.php

Good Luck.

Upvotes: 1

Related Questions