Can I Add an "Upload File" Feature to HTML Submit Form?

Posted on 2007-07-27
Last Modified: 2010-04-09
I have a simple Submit form on our organization's network, and I receive the form results in my e-mail.

This is a VERY SIMPLY HTML SUBMIT FORM. How tough would it be to add the option where users can attach files to the form?

Question by:mksalva
    LVL 70

    Accepted Solution

    Hi Mike,

    It's simple enough to add the field to the form, but you need to use some form of server scripting to handle the uploaded file.  

    When you say you get form results by email, which scripting language is used to process the form.  If you tell me that, I can give you some links or sample scripts to handle a file upload.
    LVL 29

    Assisted Solution

    Depends on your host and how you're submitting the form, there are large number of form scripts available, many free, see Hot Scripts it has a lot of resources for forms


    Author Comment

    Most of the HTML from my current form is listed below. (I have X'd out the names and e-mail address.)When the form is submitted, I receive a simple e-mail that has a subject line that reads "Form posted from Microsoft Internet Explorer."

    In case it matters, this form is only on our network, and only people in our organization have access to it. We all have Outlook, so the e-mail is sent via Outlook.

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>"The Blue Form" - Submit a Web Request</title>


    <body background="html_images/blue-texture.jpg">
    <table width="800" border="0" align="center" cellpadding="8" cellspacing="0" bordercolor="#16788D" bgcolor="#58cae4">
        <td background="html_images/box-bkgd2.gif" bgcolor="#16788D"><strong><font color="#FFFFFF" size="5" face="Verdana, Arial, Helvetica, sans-serif">The Blue Form<br>
          <font color="#000000" size="3">TBC Web Site Request Form </font></font></strong></td>
        <td><form action="" method="post" enctype="text/plain" name="form1">
          <p><strong><font color="#000000" size="2" face="Verdana, Arial, Helvetica, sans-serif">If you have any files that must accompany this web request, please put them in the Shared/Web folder, or e-mail them to XXXX XXXXX.</font></strong></p>
          <table width="98%" border="1" align="center" cellpadding="6" cellspacing="2" bordercolor="#FFFFFF">
                <font face="Arial, Helvetica, sans-serif"><strong><em><font color="#FFFFFF" size="3">NOTE: If this request is for an event not yet listed on the web site's Calendar of Events, please send the details to XXXXX XXXXXXXXX for approval first. This also applies to major changes to existing events, such as date or location change.</font></em></strong></font>
          <table width="100%" border="0" cellspacing="0" cellpadding="8">
              <td width="40%" align="right"><strong><font color="#000000" size="3" face="Verdana, Arial, Helvetica, sans-serif">Your Name</font></strong></td>
              <td width="60%"><input name="Name" type="text" size="60"></td>
              <td width="40%" align="right" valign="top"><font color="#000000" size="3" face="Verdana, Arial, Helvetica, sans-serif"><strong>Web Request Title </strong></font></td>
              <td width="60%"><input name="Web Request" type="text" size="60"></td>
              <td width="40%" align="right" valign="top"><p><font color="#000000" size="3" face="Verdana, Arial, Helvetica, sans-serif"><strong>Name and web address of existing page to be edited</strong></font></p>
                <p><font color="#000000" size="2" face="Arial, Helvetica, sans-serif">Please include details, and indicate the location and names of applicable files.</font></p></td>
              <td width="60%"><textarea name="Existing Page" cols="60" rows="7"></textarea></td>
              <td width="40%" align="right" valign="top"><p><font color="#000000" size="3" face="Verdana, Arial, Helvetica, sans-serif"><strong>Create New Page</strong></font></p>
                <p><font color="#000000" size="2" face="Arial, Helvetica, sans-serif">Please include details, and indicate the location and names of applicable files.</font></p></td>
              <td width="60%"><textarea name="Create New Page" cols="60" rows="7"></textarea></td>
              <td colspan="2">
                <input type="submit" name="Submit" value="SUBMIT WEB REQUEST!">
                <em><font color="#000000" size="3" face="Arial, Helvetica, sans-serif"><strong>IMPORTANT! After clicking the Submit button, please select &quot;OK&quot; and &quot;Yes&quot; to allow your Outlook to send an e-mail to XXXX XXXXX </strong></font></em></td>
        </form>    </td>
    LVL 70

    Expert Comment

    by:Jason C. Levine
    <form action="" method="post" enctype="text/plain" name="form1">

    Yeah, this won't work for file uploads, because there is no scripting method to handle the file.  You need to enable PHP or ASP on the server and write a script to handle this form.  Alternately, you can use Perl or Python if that's easier to install.  Perl's module has a good file upload handler...
    LVL 1

    Expert Comment

    Forced accept.

    EE Admin

    Featured Post

    Javascript: Crash Course

    Javascript is not only emerging as the most important language to know, it's flexibility is unique. With Javascript being deployed on the web, mobile and even the desktop this is the one language that all technologists need to know.

    Join & Write a Comment

    This is a PowerShell web interface I use to manage some task as a network administrator. Clicking an action button on the left frame will display a form in the middle frame to input some data in textboxes, process this data in PowerShell and display…
    I've been asked to discuss some of the UX activities that I'm using with my team. Here I will share some details about how we approach UX projects.
    This tutorial demonstrates how to identify and create boundary or building outlines in Google Maps. In this example, I outline the boundaries of an enclosed skatepark within a community park.  Login to your Google Account, then  Google for "Google M…
    HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

    730 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    15 Experts available now in Live!

    Get 1:1 Help Now