This demonstration shows how to capture image files that are uploaded in an html form and save them to disk on the server. The files needed can be downloaded below and they consist of the sample scripts as well as the trial version of the csASPUpload component.
Unfortunately, this example has very limited browser support. It will not work with Netscape / Firefox browsers or with Internet Explorer 7. It does work with earlier versions of Internet Explorer.
There are 2 ASP files which must all be put in the same folder/directory. It must be web shared, set to read, write and execute scripts and the csASPUpload component installed. It assumes the trial version, csASPUploadTrial, is being used. The files are listed below.
|filesave.asp||This is the script that handles the form data. It uses the csASPUpload component to save the file.|
Some of the key points will be explained here, although it should be easy to follow by viewing the code listings.
This is the starting page. It contains an html form with an input type of "file". The important lines of the form are:
<form method="post" action="filesave.asp" enctype="multipart/form-data" name=form1>
<input type="file" name="filesent" onSubmit="return CheckUpload()">
<input type="button" value="Preview" name="Preview" onClick="DoPreview()">
<input type="hidden" name="height" value="0">
<input type="hidden" name="width" value="0">
The first part gives the script that will process the form, and the method of sending the data. The tag <input type="file"...> causes the browser to show a text field for the filename and a browse button (if the browser supports file uploads).
The DoPreview function is listed below:
var filename = document.form1.filesent.value;
var Img = new Image();
if (navigator.appName == "Netscape")
alert("Previews do not work in Netscape.");
Img.src = filename;
document.images.src = Img.src;
The CheckUpload() function is not listed here, but you can view it if you download the demo. It also loads the file into an Image object and performs some verification. If verification fails the form will not be submitted. Verification includes checking that a file has been entered, checking that it has a .jpg extension, and checking that the image has a size. If the image is corrupt or in an invalid format nothing will be loaded into the image object so it will have no height or width.
The height and width properties of the Image object are read and assigned to two hidden form variables so they can be passed to the form processing script.
This function also cannot work with Netscape / Firefox / IE 7 for the same reasons. If the browser is one of these types, the form is not submitted. This part of the function could be removed to allow the file to be uploaded, but the height and width would not be read.
This is the script that saves the file. It saves the file in the same directory as this script and it uses the original file name. In a serious application the name and location of the new file would need to be set with more care.
The important lines of the script are:
Set Upload = Server.CreateObject("csASPUpload32Trial.Process")
Response.Write "Height: " & Upload.Value("height")
Response.Write "Width: " & Upload.Value("width") & "<br>"
If Upload.FileQty > 0 Then
Upload.OverwriteMode = 2
Upload.FileSave Upload.CurrentDir & Upload.FileName(0), 0
<p>The file has been stored.</p>
<p>No file has been received.</p>
The first line creates an object called Upload. This example uses the trial version of the component.
Next the height and width are displayed. These have been passed from the previous script as hidden form variables. Note that Request.Form cannot be used when files are uploaded so the Value property of csASPUpload must be used instead. Nothing is actually done with the height and width here, but the demo does show how they can be found and also how to read a form varaible. To perform server side image manipulation, use our csImageFile component.
There is a check that a file has been uploaded before any attempt is made to save it. The If..Then..Else statement allows for conditional HTML output to be used. Before the file is saved, OverwriteMode is set to 2, which automatically renames the file if the name is already used. The CurrentDir property is used to find the directory containing the "filesave.asp" script. The syntax of the FileSave command is:
FileSave FileName, Index
Where FileName is the full physical path and file name and Index is the index of the uploaded file. The index will always be 0 when only one file is uploaded.
We have several upload related products that are used in file uploading either from the client or server side. Of these, csXImage and csXThumbUpload are ActiveX controls which can display images in the browser before uploading them.
© Chestysoft, 2013.