65.9K
CodeProject is changing. Read more.
Home

Add Images in Image Rotator with the Help of FileUpload Control

starIconstarIconstarIconstarIconstarIcon

5.00/5 (1 vote)

Oct 11, 2013

CPOL
viewsIcon

10130

How to 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>