Processing of Uploaded Image Along With Associated Text Data
When a form like the one containing personal data is submitted with a photograph, how the submitted photograph is processed in such a way that whenever a request for the given record is made, the correct photograph is always displayed along with the associated text data is of interest to many web developers. This is because the issue has been raised times without number especially by those who have no idea how submitted images can be printed dynamically on the browser as and when required.
There are two ways to go about it.
- Submit the photograph along with the text data into the database.
- Submit the form and first copy the photograph to a special folder, followed by storing the photograph’s name along with the text data in the database.
The drawback of the first method is that the performance of the database can be greatly reduced if big pictures are stored in it. The second method avoids this problem and it is the focus of this article. For a task of the nature of the second method, you need
- A form that can upload file and submit data simultaneously.
- A self-created folder where uploaded photographs will be copied.
The HTML form that is used to perform the task has the following characteristics:
- An attribute called enctype with value multipart/form-data in the form tag.
- An input tag with
- Attribute type and value file.
- Attribute name and for this write-up, we shall assign it value x.
When you submit a form of this type, the photograph is actually uploaded into a particular folder. Information about the photograph in terms of name, size and type can be retrieved with the appropriate functions or methods of a particular scripting language. For upload anh example, in PHP $_Files[‘x’][‘name’], $_Files[‘x’][‘size’] and $_Files[‘x’][‘type’] will retrieve the image name, size and type (gif, jpeg etc) respectively. In ASP.NET, you use GetFileName() method with the appropriate parameters to retrieve the file name or size. If you use HTMLFileInput control of ASP.NET to upload image, the form is a bit different from the generic HTML form.
As soon as the image is uploaded, your script will
- Copy the image to its folder using SaveAs() method in ASP.NET,Copy() function in PHP or the appropriate function of any other scripting language that you are using.
- Retrieve its name and submit it along with the text data into the database.
To output the photograph on the browser, your script will
- Search for the record in the database with appropriate search criterion.
- Retrieve the photograph’s name and pass it to a specific img tag for printing. The src attribute of the img tag will contain the path of the photograph which consists of the directory for the uploaded photograph and a variable that holds the photograph’s name passed from the database.