Add Images in Image Rotator with the Help of FileUpload Control

Introduction

In case of ImageRotator, we can use FileUpload control to upload my images.

Here I use it in a simple way.

Step 1

We use a image control (Image1), FileUpload control, button (Button1), HiddenField (for storing the file name) and a Save button to call the JavaScript function.

Step 2

On the click of Button1, we upload a file with the help of FileUpload1 and store the file name in HiddenField1 and show the image in the image control.

string filename = FileUpload1.PostedFile.FileName.ToString();
FileUpload1.SaveAs(Server.MapPath("~/") + filename);
Image1.ImageUrl = filename.ToString();
HiddenField1.Value = filename.ToString();

Step 3

On the click of Button2, we upload a file with the help of FileUpload2 and store the file name in HiddenField2 and show the image in the image control:

string filename = FileUpload2.PostedFile.FileName.ToString();
FileUpload2.SaveAs(Server.MapPath("~/") + filename);
Image1.ImageUrl = filename.ToString();
HiddenField2.Value = filename.ToString();

Step 4

On the click of Button3, we upload a file with the help of FileUpload3 and store the file name in HiddenField3 and show the image in the image control.

string filename = FileUpload3.PostedFile.FileName.ToString();
FileUpload3.SaveAs(Server.MapPath("~/") + filename);
Image1.ImageUrl = filename.ToString();
HiddenField3.Value = filename.ToString();

Suppose we add only three Images for ImageRotator.

Step 5

In the click of the Save Button (HTML control) we call the JavaScript function (show()) in the OnClick event.

<script language="javascript" type="text/javascript" >
    function show()
    {
        var a=document.getElementById('HiddenField1').value;
        document.getElementById('Image1').src=a;
        setTimeout("show2()",1000);
    }

    function show2()
    {
        var b=document.getElementById('HiddenField2').value;
        document.getElementById('Image1').src=b;
        setTimeout("show3()",1000);
    }
    
    function show3()
    {
        var b=document.getElementById('HiddenField3').value;
        document.getElementById('Image1').src=b;
        setTimeout("show()",1000);
    }
</script>