2. XHTML MP Example Demonstrating File Upload

The following example demonstrates how to upload a file from a Nokia 6230 cell phone. Here is the XHTML MP document of the example. As XHTML MP is compatible with HTML/XHTML, this XHTML MP document can also be opened with web browsers such as Microsoft Internet Explorer and Mozilla Firefox.


(uploadFileEg1.xhtml)

<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>File Upload Example</title>
  </head>

  <body>
    <h1>Welcome to our photo album.</h1>

    <form action="file_upload.php" method="post" enctype="multipart/form-data">
      <p><br/>
        Choose a photo to upload to the WAP server:
        <input name="myFile" type="file"/><br/>
        On the WAP server, save the file as: (Enter something here if you want the file to be saved in a different file name.)
        <input name="filename" type="text"/>
      </p>

      <hr/>

      <p>
        <input type="submit"/>
        <input type="reset"/>
      </p>
    </form>
  </body>
</html>


The above XHTML MP document enables the user to choose a photo to upload and specify a different name for the file if he/she wants to do so.

If you have read our XHTML MP tutorial, the tags and attributes in the above XHTML MP document should be very familiar to you, with the exception of the enctype attribute of the <form> tag. The enctype attribute is used to specify how the form data should be encoded in the HTTP request when the method attribute value is post. The default value of the enctype attribute is "application/x-www-form-urlencoded". It has to be changed to "multipart/form-data" to enable file upload.

In most cases, that's all we need to know about "multipart/form-data" since we will not parse the form data encoded in HTTP requests ourselves but to use functions provided by a server-side technology. Writing the functions by our own is error-prone and is not recommended. If you need to learn the details of the "multipart/form-data" format, please refer to the Form-based File Upload in HTML (RFC 1867) document.

Note that the above XHTML MP document does not conform to the XHTML MP specification since "file" is not a valid value of the type attribute of the <input> tag in standard XHTML MP. Thus, the document cannot pass the check of an XHTML MP validator.

The screenshots below show what you will see on the screen of the Nokia 6230 cell phone:









Nokia 6230


If you click the file select field, you will see something like this:









Nokia 6230


Select the "Memory card" item in the above menu and you will see something like this:



Nokia 6230


Select the "Options" softkey in the bottom left-hand corner of the screen of the cell phone and you will see:



Nokia 6230


Select the "Select" option. The mobile browser will go back to the first page and the name of the file chosen will be displayed in the file select field, like this:



Nokia 6230


If you click the submit button of the form, the form data will be posted to the WAP server.

Now the only thing left is to write a server-side script to extract the uploaded file from the HTTP request and save it to the local file system or a database.

In the following sections, we will introduce to you how to handle file uploads with PHP and Java Servlet / JSP. If you use a server-side technology other than PHP and Java Servlet / JSP, the code will be different but the idea is the same.


Previous Page Page 2 of 11 Next Page


Feedback Form (ExpandCollapse)

What do you think about this web page?






(Optional) Please provide us more details. For example, suppose you select option 2 above, can you tell us specifically what information is missing? You can also suggest anything that can help us improve this web page.

(Optional) Your name:

(Optional) Your email address:

Please enter again to confirm:

Due to the amount of messages we received, we may not be able to reply to all messages.

A button for going back to the top of this page