HTML Form Ajax File Upload (Front End)

Ben Cheng
Ben Cheng
Sep 6, 2018 · 2 min read

Introduction

HTML Form is extremely Important for Web Application as it aims to collect data from users. It would be very easy if HTML Form is just used with traditional method which let browser back-end script to process your passed data. It would be very relatively difficult if you choose Ajax and file control in HTML Form.

  • HTML Form
  • HTML Form (File Control)
  • HTML Form (Ajax)
  • HTML Form (File Control and Ajax)

HTML Form

HTML Form is extremely Important for Web Application as it aims to collect data from users.

<form action="{URL}" method="POST">
<input type="text"/>
<button type="submit">Submit</button>
</form>

you can select POST or GET for method. The default encoding would be application/x-www-form-urlencoded. It would make all characters to be encoded before sent (spaces are converted to “+” and specical characters are coverted to ASCII HEX values).

HTML Form (File Control)

<form enctype="multipart/form-data" action="{URL}" method="POST">
<input type="text"/>
<input type="file"/>
<button type="submit">Submit</button>
</form>

enctype specifies how the form-data would be encoded when submitting to server.

HTML Form (Ajax)

<script>
function doSubmit(){
var input1 = document.getElementById("input1");
var request = new XMLHttpRequest();
request.open('POST', "http://localhost:8080/testSimpleRequest");
request.setRequestHeader('content-type', 'application/json');
request.send({
"input1": input1
}); }</script>
<form>
<input type="text" id="input1"/>
<button type="button" onclick="doSubmit()">Submit</button>
<form>

In Modern Ajax Call, JSON is commonly used for HTTP Request instead of application/x-www-form-urlencoded.

HTML Form (File Control and Ajax)

<script>
function doSubmit(){
// Form Data
var formData = new FormData();

var fileSelect = document.getElementById("fileSelect");
if(fileSelect.files && fileSelect.files.length == 1){
var file = fileSelect.files[0]
formData.set("file", file , file.name);
}

var input1 = document.getElementById("input1");
formData.set("input1", input1.value)
// Http Request var request = new XMLHttpRequest();
request.open('POST', "http://localhost:8080/testMultipart");
request.send(formData);
}</script><form>
<input type="text" id="input1"/>
<input type="file" id="fileSelect"/>
<button type="button" onclick="doSubmit()">Submit</button>
</form>

FormData JavaScript Object is used for sending form data in for XMLHttpRequest (Ajax). FormData would accept file, blob and string for parameter.

Remark:

There are slightly difference between append() and set() method for FormData. set() would overwrite all existing values with the new one while append() will append the new value to FormData whatever the key exits or not.

set() is not supported in IE while append() is supported in IE.

Summary

Further Reading

  • HTML Form Ajax File Upload (Spring Boot Integration)
  • HTML Form Ajax File Upload (AngularJs and Spring Boot Integration)

JavaScript Self Learning

JavaScript Self-Learning and Notes

Ben Cheng

Written by

Ben Cheng

A developer in Hong Kong. Learning And Rethinking as a developer. Welcome to contact me and make friend with me. Cooperation is welcome.

JavaScript Self Learning

JavaScript Self-Learning and Notes

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade