Using ajaxFileUpload jQuery Plugin for Asynchronous File Upload

ajaxFileUpload is a jQuery plugin that enables asynchronous file uploads.

Syntax: $.ajaxFileUpload([options]) Options description:

url: address of the server‑side upload handler.

fileElementId: the id of the <input type="file"> element.

secureuri: whether to use a secure request (default false).

dataType: expected data type returned by the server.

success: callback executed on successful response; receives the server data.

error: callback executed on failure.

data: custom parameters to send together with the file.

type: HTTP method, usually POST.

Usage steps

1. Include jQuery and the ajaxFileUpload plugin in the page (jQuery must be loaded first).

2. Add the HTML for the file input. Because the default file input cannot be styled, hide it and trigger it via another element.

3. Add JavaScript that calls $.ajaxFileUpload after the user selects a file, updates the UI with the file name, and handles the response.

4. Implement the server‑side handler (Java example shown).

Notes

The example uses Bootstrap CSS for styling, but any CSS framework or custom styles can be used.

The deprecated live method is no longer available in jQuery 1.9+; use on instead.

The file input must have a name attribute that matches the server‑side parameter (e.g., name="myfile" and MultipartFile myfile in Java).