Java Servlet & JSP Cookbook

2017-07-07 02:10:07

Problem

You want to set up an HTML page to allow the user to specify a file from his filesystem to upload to the server.

Solution

Use the HTML form tag with its enctype attribute set to "multipart/form-data". Use an input tag nested in the form tag with a type attribute of "file".

Discussion

The HTML for file uploading involves a few "must haves." The form tag specifies the servlet (or other server-side component) that is handling the file upload in its action attribute. The method attribute must be POST (not GET ) for the file upload action to work. The form tag's enctype attribute must be "multipart/form-data".

The widget with which the user enters the file to upload is an input tag with a type of "file", and looks like a text field. The name attribute uniquely names the particular input tag, which becomes important when the HTML specifies the uploading of more than one file (see the note at the end of this recipe). Without any additional intervention, the server saves the uploaded file with its original filename. The accept attribute is designed to limit the file types that the user can choose for uploading, such as to the "application/pdf" MIME type, but this attribute has poor support among browsers.

When displaying the HTML in Example 8-2, browsers automatically show a Browse button. When the form client selects the button, the browser displays a typical filesystem navigation window with which the user can select the file.

Example 8-2. Simple HTML for file uploading

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>Please Choose The File</title> </head> <body bgcolor="#ffffff"> <table border="0"><tr> <form action="/home/servlet/com.jspservletcookbook.UploadServlet" method="post" enctype="multipart/form-data"> <td valign="top"><strong>Please choose your document:</strong><br></td> <td> <input type="file" name="file1"> <br><br> </td></tr> <tr><td><input type="submit" value="Upload File"></td></tr> </form> </table> </body> </html>

After selection, the text field displays the full path to the selected file. Figure 8-1 shows this HTML page in a web browser.

Figure 8-1. HTML page for uploading a file to a servlet

Figure 8-1 shows the input field after the user has already chosen the file. The browser then automatically fills in the text field with the complete file path.

To allow the uploading of multiple files, include more than one input tag with different values for the name attribute. The browser associates a Browse button with each of them.