Classical ASP Upload Image method

I recently took over a project that moved a warranty application (Warranty Claim) system to the Internet. The play for the project is the image that is related to storing and warranty requests. The components I choose include:

· A database table to store images
· An ASP page to upload images
· A script that interprets uploaded images and stores them in a table
· A Web page to view the name of the image that corresponds to the selected application number
· A Web page is used to display the actual image

Here's a closer look at each component of the application.

Table

Since I just wanted to quickly verify the feasibility of the scenario, I used Microsoft Access instead of a more reliable database, such as SQL Server, Oracle, or MySQL. Since the information to be processed is certainly more than the warranty request and the image, the table must contain more than 2 columns, as shown in Figure A. The meaning of these columns is self-evident, the only thing worth mentioning is the content type of the image (Content_Type), which refers to the data type of the graphics file. OLE object is used to replace a binary large object (BLOB) because we are using access.

Figure A

Upload page

After getting the job, I spent about 10 minutes pondering how to upload a file from the client to the ASP server. Later, I remembered that the HTML INPUT element had a type attribute that could be set to file. It also recalls the Accept property, which helps filter the listed files based on the MIME type. Unfortunately, the quality of this implementation is not very high.

The form element is the last "client" section in the upload page. This element is involved in file upload, so it is necessary to do special processing, specifically to set the method property to post and set the Enctype property to Multipart/form-data, this is a one-time send multiple files standard practice. Finally, in the case of using client JavaScript, to ensure that the text is separate from the file when the form is submitted, I added the application number (claim numbers) to the form's action attribute. Figure B shows the final page, as shown in listing a.

Figure B

Server-side scripting

When a form is submitted, the script specified by the Action property of the form will gain control. This script determines the actions to take later. Later work is actually very simple, because the application number, all files, and the properties of these files are sent by the client at once. You can also detach this data programmatically, but I choose to use the Aspsmartupload component that Aspsmart provides for free to separate different files. This component, which includes documentation and samples, greatly simplifies my work.

The Aspsmartupload component's files object provides a way to access individual files in the collection. The properties of each file are retrieved using the file object, which includes the file name, MIME type, MIME subtype, and the file itself.

Image list and display

If the image is listed according to the application number and file name, it is much more reasonable than simply displaying the image. As a result, dial-up users can choose the image they want without straining the bandwidth. With that in mind, I created the Web page as shown in Figure C. Its code is shown in Listing B.

Figure C

Usually, when an image is displayed on a Web page, the image itself originates from a file. For example, the content type is determined based on the file name extension, such as Whatever.jpeg or stuff.gif. Unfortunately, because images are stored in a table, we cannot enjoy this convenience. However, our advantage is that we have mastered the content type.

In a script called by a pop-up window, an IFRAME, or a frame, you can use the content type to set the content type of the response object and write the image in binary form, as follows:

Response.ContentType = Rsimage ("Content_Type")
Response.binarywritersimage ("Picture")

Listing C shows the details.

Don't be thwarted by the details of the implementation

Most people know that the project can be achieved in the beginning, but when the concrete is done, it is found that the implementation details have seriously affected their progress. In this situation, do not lose heart, only step by step, in order to finally achieve success.