InfoHeap
Tech
Navigation
  • Home
  • Tutorials
    • CSS tutorials & examples
    • CSS properties
    • Javascript cookbook
    • Linux/Unix Command Line
    • Mac
    • PHP
      • PHP functions online
      • PHP regex
    • WordPress
  • Online Tools
    • Text utilities
    • Online Lint Tools
search

HTML cookbooks

  • HTML - is closing li tag required?
  • HTML form file upload hello world
  • How to disable spellcheck in textarea
 
  • Home
  • > Tutorials
  • > HTML
  • > HTML cookbook

HTML form file upload hello world

on Feb 15, 2016

HTML forms can have file type as input field to update and send files to server. To be able to handle file upload, it need to have form attribute enctype="multipart/form-data". Here is a quick code snippet which has file upload input and posts to a dummy endpoint/url. The endpoints just dumps the information about uploaded file using php $_POST and $_FILES object.

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<form id="form1" enctype="multipart/form-data" action="/api/post-dump.php" method=POST>
name1: <input type="text" name="name1" value="value1" /><br/>
file1: <input type="file" name="file1" />
<input type="submit" name="submit" value="submit"/>
</form>
refresh done
try it online


Here is how request headers look like for a form post with file upload:
html-form-file-upload-headers

Suggested posts:

  1. CSS – align text in center horizontally
  2. ReactJS – convert jsx to javascript using babel cli
  3. How to undo HTTP 301 site/domain redirect
  4. HTTP cookie and sub domains
  5. How to create youtube video link from a specific start time
  6. Running php eval on code with tags
  7. Install sass on Mac or Linux using ruby gem
  8. PHP beginning and end of string regex examples
Share this article: share on facebook share on linkedin tweet this submit to reddit
Posted in Tutorials | Tagged HTML, HTML cookbook, HTTP, PHP, Tutorials
  • Browse content
  • Article Topics
  • Article archives
  • Contact Us
Popular Topics: Android Development | AngularJS | Apache | AWS and EC2 | Bash shell scripting | Chrome developer tools | Company results | CSS | CSS cookbook | CSS properties | CSS Pseudo Classes | CSS selectors | CSS3 | CSS3 flexbox | Devops | Git | HTML | HTML5 | Java | Javascript | Javascript cookbook | Javascript DOM | jQuery | Kubernetes | Linux | Linux/Unix Command Line | Mac | Mac Command Line | Mysql | Networking | Node.js | Online Tools | PHP | PHP cookbook | PHP Regex | Python | Python array | Python cookbook | SEO | Site Performance | SSH | Ubuntu Linux | Web Development | Webmaster | Wordpress | Wordpress customization | Wordpress How To | Wordpress Mysql Queries | InfoHeap Money

Copyright © 2025 InfoHeap.

Powered by WordPress