{"id":245,"date":"2007-09-19T00:00:00","date_gmt":"2007-09-19T00:00:00","guid":{"rendered":"http:\/\/www.strongd.net\/?p=245"},"modified":"2007-09-19T00:00:00","modified_gmt":"2007-09-19T00:00:00","slug":"XHTML MP Example Demonstrating File Upload","status":"publish","type":"post","link":"https:\/\/www.strongd.net\/?p=245","title":{"rendered":"XHTML MP Example Demonstrating File Upload"},"content":{"rendered":"<p><P><SPAN class=mainText>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.<\/SPAN><\/P><br \/><DIV><br \/><P><SPAN class=codeText>&lt;?xml version=&#8221;1.0&#8243;?&gt;<BR>&lt;!DOCTYPE html PUBLIC &#8220;-\/\/WAPFORUM\/\/DTD XHTML Mobile 1.0\/\/EN&#8221; &#8220;http:\/\/www.wapforum.org\/DTD\/xhtml-mobile10.dtd&#8221;&gt;<BR><BR>&lt;html xmlns=&#8221;http:\/\/www.w3.org\/1999\/xhtml&#8221;&gt;<BR>&nbsp;&nbsp;&lt;head&gt;<BR>&nbsp;&nbsp;&nbsp;&nbsp;&lt;title&gt;File Upload Example&lt;\/title&gt;<BR>&nbsp;&nbsp;&lt;\/head&gt;<BR><BR>&nbsp;&nbsp;&lt;body&gt;<BR>&nbsp;&nbsp;&nbsp;&nbsp;&lt;h1&gt;Welcome to our photo album.&lt;\/h1&gt;<BR><BR>&nbsp;&nbsp;&nbsp;&nbsp;<B>&lt;form action=&#8221;file_upload.php&#8221; method=&#8221;post&#8221; enctype=&#8221;multipart\/form-data&#8221;&gt;<\/B><BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;&lt;br\/&gt;<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Choose a photo to upload to the WAP server:<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<B>&lt;input name=&#8221;myFile&#8221; type=&#8221;file&#8221;\/&gt;<\/B>&lt;br\/&gt;<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;On the WAP server, save the file as: (Enter something here if you want the file to be saved in a different file name.)<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;input name=&#8221;filename&#8221; type=&#8221;text&#8221;\/&gt;<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/p&gt;<BR><BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;hr\/&gt;<BR><BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;input type=&#8221;submit&#8221;\/&gt;<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;input type=&#8221;reset&#8221;\/&gt;<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/p&gt;<BR>&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/form&gt;<BR>&nbsp;&nbsp;&lt;\/body&gt;<BR>&lt;\/html&gt;<\/SPAN><\/P><br \/><P><BR><\/P><br \/><P><SPAN class=mainText>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.<\/SPAN><\/P><SPAN class=mainText><br \/><P><SPAN class=mainText>If you have read our <A href=\"http:\/\/www.strongd.net\/blog\/show\/228\">XHTML MP tutorial<\/A>, the tags and attributes in the above XHTML MP document should be very familiar to you, with the exception of the <I>enctype<\/I> attribute of the &lt;form&gt; tag. The <I>enctype<\/I> attribute is used to specify how the form data should be encoded in the HTTP request when the <I>method<\/I> attribute value is <I>post<\/I>. The default value of the <I>enctype<\/I> attribute is &#8220;application\/x-www-form-urlencoded&#8221;. It has to be changed to &#8220;multipart\/form-data&#8221; to enable file upload.<\/SPAN><\/P><br \/><P><SPAN class=mainText>In most cases, that&#8217;s all we need to know about &#8220;multipart\/form-data&#8221; 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 &#8220;multipart\/form-data&#8221; format, please refer to the <A href=\"http:\/\/www.ietf.org\/rfc\/rfc1867.txt\">Form-based File Upload in HTML (RFC 1867)<\/A> document.<\/SPAN><\/P><br \/><P><SPAN class=mainText>Note that the above XHTML MP document does not conform to the XHTML MP specification since &#8220;file&#8221; is not a valid value of the <I>type<\/I> attribute of the &lt;input&gt; tag in standard XHTML MP. Thus, the document cannot pass the check of an XHTML MP validator.<\/SPAN><\/P><br \/><P><SPAN class=mainText>The screenshots below show what you will see on the screen of the Nokia 6230 cell phone:<\/SPAN><\/P><br \/><P><BR><\/P><br \/><P><br \/><TABLE cellSpacing=0 cellPadding=4 width=\"100%\" border=0><br \/><COLGROUP><br \/><COL width=256><br \/><THEAD><br \/><TR><br \/><TD vAlign=top width=\"100%\"><br \/><P><IMG height=130 src=\"http:\/\/www.developershome.com\/wap\/wapUpload\/wap_upload_html_mf4d002c.png\" width=131 align=left border=0 name=image1><BR clear=left><BR><BR><\/P><br \/><P><IMG height=130 src=\"http:\/\/www.developershome.com\/wap\/wapUpload\/wap_upload_html_b458bb9.png\" width=131 align=left border=0 name=image2><BR clear=left><BR><BR><\/P><br \/><P><IMG height=130 src=\"http:\/\/www.developershome.com\/wap\/wapUpload\/wap_upload_html_20261981.png\" width=131 align=left border=0 name=image3><BR clear=left><SPAN class=mainText>Nokia 6230<\/SPAN><\/P><\/TD><\/TR><\/THEAD><br \/><TBODY><\/TBODY><\/TABLE><\/P><br \/><P><BR><\/P><br \/><P><SPAN class=mainText>If you click the file select field, you will see something like this:<\/SPAN><\/P><br \/><P><BR><\/P><br \/><P><br \/><TABLE cellSpacing=0 cellPadding=4 width=\"100%\" border=0><br \/><COLGROUP><br \/><COL width=256><br \/><THEAD><br \/><TR><br \/><TD vAlign=top width=\"100%\"><br \/><P><IMG height=130 src=\"http:\/\/www.developershome.com\/wap\/wapUpload\/wap_upload_html_4a5413c9.png\" width=131 align=left border=0 name=image4><BR clear=left><BR><BR><\/P><br \/><P><IMG height=130 src=\"http:\/\/www.developershome.com\/wap\/wapUpload\/wap_upload_html_3557204b.png\" width=131 align=left border=0 name=image5><BR clear=left><BR><BR><\/P><br \/><P><IMG height=130 src=\"http:\/\/www.developershome.com\/wap\/wapUpload\/wap_upload_html_m470e2881.png\" width=131 align=left border=0 name=image6><BR clear=left><SPAN class=mainText>Nokia 6230<\/SPAN><\/P><\/TD><\/TR><\/THEAD><br \/><TBODY><\/TBODY><\/TABLE><\/P><br \/><P><BR><\/P><br \/><P><SPAN class=mainText>Select the &#8220;Memory card&#8221; item in the above menu and you will see something like this:<\/SPAN><\/P><br \/><P><BR><\/P><br \/><P><br \/><TABLE cellSpacing=0 cellPadding=4 width=\"100%\" border=0><br \/><COLGROUP><br \/><COL width=256><br \/><THEAD><br \/><TR><br \/><TD vAlign=top width=\"100%\"><br \/><P><IMG height=130 src=\"http:\/\/www.developershome.com\/wap\/wapUpload\/wap_upload_html_1b49bf48.png\" width=131 align=left border=0 name=image7><BR clear=left><SPAN class=mainText>Nokia 6230<\/SPAN><\/P><\/TD><\/TR><\/THEAD><br \/><TBODY><\/TBODY><\/TABLE><\/P><br \/><P><BR><\/P><br \/><P><SPAN class=mainText>Select the &#8220;Options&#8221; softkey in the bottom left-hand corner of the screen of the cell phone and you will see:<\/SPAN><\/P><br \/><P><BR><\/P><br \/><P><br \/><TABLE cellSpacing=0 cellPadding=4 width=\"100%\" border=0><br \/><COLGROUP><br \/><COL width=256><br \/><THEAD><br \/><TR><br \/><TD vAlign=top width=\"100%\"><br \/><P><IMG height=130 src=\"http:\/\/www.developershome.com\/wap\/wapUpload\/wap_upload_html_m541262f6.png\" width=131 align=left border=0 name=image8><BR clear=left><SPAN class=mainText>Nokia 6230<\/SPAN><\/P><\/TD><\/TR><\/THEAD><br \/><TBODY><\/TBODY><\/TABLE><\/P><br \/><P><BR><\/P><br \/><P><SPAN class=mainText>Select the &#8220;Select&#8221; 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:<\/SPAN><\/P><br \/><P><BR><\/P><br \/><P><br \/><TABLE cellSpacing=0 cellPadding=4 width=\"100%\" border=0><br \/><COLGROUP><br \/><COL width=256><br \/><THEAD><br \/><TR><br \/><TD vAlign=top width=\"100%\"><br \/><P><IMG height=130 src=\"http:\/\/www.developershome.com\/wap\/wapUpload\/wap_upload_html_63242344.png\" width=131 align=left border=0 name=image9><BR clear=left><SPAN class=mainText>Nokia 6230<\/SPAN><\/P><\/TD><\/TR><\/THEAD><br \/><TBODY><\/TBODY><\/TABLE><\/P><br \/><P><BR><\/P><br \/><P><SPAN class=mainText>If you click the submit button of the form, the form data will be posted to the WAP server.<\/SPAN><\/P><br \/><P><SPAN class=mainText>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.<\/SPAN><\/P><br \/><P><SPAN class=mainText>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.<\/SPAN><\/P><\/SPAN><\/DIV><\/p>\n","protected":false},"excerpt":{"rendered":"<p>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.&lt;?xml version=&#8221;1.0&#8243;?&gt;&lt;!DOCTYPE html PUBLIC &#8220;-\/\/WAPFORUM\/\/DTD XHTML &hellip; <a href=\"https:\/\/www.strongd.net\/?p=245\" class=\"more-link\">Continue reading <span class=\"screen-reader-text\">XHTML MP Example Demonstrating File Upload<\/span><\/a><\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-245","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/www.strongd.net\/index.php?rest_route=\/wp\/v2\/posts\/245","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.strongd.net\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.strongd.net\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.strongd.net\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.strongd.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=245"}],"version-history":[{"count":0,"href":"https:\/\/www.strongd.net\/index.php?rest_route=\/wp\/v2\/posts\/245\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.strongd.net\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=245"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.strongd.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=245"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.strongd.net\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=245"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}