使用文件上传控件在图像轮播中添加图片

引言

对于ImageRotator，我们可以使用FileUpload 控件来上传我的图片。

这里我以一种简单的方式使用它。

步骤 1

我们使用一个图像控件 (Image1)，FileUpload 控件，按钮 (Button1)，HiddenField （用于存储文件名）和一个保存按钮来调用 JavaScript 函数。

第二步

点击Button1时，我们使用FileUpload1 上传文件，将文件名存储在HiddenField1 中，并在图像控件中显示图像。

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

步骤 3

点击Button2时，我们使用FileUpload2 上传文件，将文件名存储在HiddenField2 中，并在图像控件中显示图像。

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

步骤 4

点击Button3时，我们使用FileUpload3 上传文件，将文件名存储在HiddenField3 中，并在图像控件中显示图像。

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

假设我们只为ImageRotator添加三个图像。

步骤 5

在点击保存按钮（HTML控件）时，我们在OnClick 事件中调用 JavaScript 函数 (show())。

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