初學Image和Fileupload控制項

Fileupload控制項可以將用戶端的檔案上傳到伺服器,而image控制項則可以對映像進行一步控制;先前對label, Button控制項已經有了一些瞭解:

 

學習步驟如下:

1.先在Web表單上依次拖上Image1,Label1,Label2,FileUpload1,Button1,Label3,Button2

2.功能說明:

    在網頁上點擊瀏覽按鈕,在本地選擇一個圖片檔案,點上傳後將此檔案上傳到程式指定的目錄中,並將其顯示出來,包括圖片,檔案名稱,大小,類型.

3.效果

4.原始碼是從msdn裡面找了個例子,修改修改差不多就明白了

 

    protected void Button2_Click(object sender, EventArgs e)
    {
        if (IsPostBack)//如果要給用戶端回應
        {
            Boolean fileOK = false;//檔案類型初始化,一開始不知道要上傳檔案是什麼類型的,自然不OK,看下面
            String path = Server.MapPath("~/UploadedImages/");//得到圖片儲存的絕對路徑
            //注意這裡uploadedimages是事先已經在方案總管中建立好的
            //提示:在根目錄下右擊就會出現建立檔案夾
           
            if (FileUpload1.HasFile)//上傳前先檢查檔案是否存在,這是HasFile的功能
            {
                String fileExtension =
                    System.IO.Path.GetExtension(FileUpload1.FileName).ToLower();//得到要儲存圖片的副檔名並轉成小寫
                String[] allowedExtensions =
                { ".gif", ".png", ".jpeg", ".jpg" };//注意,副檔名是以.開頭
                for (int i = 0; i < allowedExtensions.Length; i++)//列舉字串數組
                {
                    if (fileExtension == allowedExtensions[i])
                    {
                        fileOK = true;
                    }
                }
            }

            if (fileOK)//中文意思就是 如果(檔案類型OK)
            {
                try//不太明白為什麼這裡用try,直接用if..else不是很簡單?研究中
                {
                    string size = FileUpload1.PostedFile.ContentLength.ToString();//得到上傳檔案的大小並轉換成字元
                    string type = FileUpload1.PostedFile.ContentType;//得到上傳檔案MIME類型
                    FileUpload1.PostedFile.SaveAs(path+ FileUpload1.FileName);//儲存上傳的檔案,使用絕對路徑
                    Label1.Text = " 檔案上傳成功"+"<br>"+size+"<br>"+type;
                    //顯示上傳檔案的大小和類型

                    Label2.Text = FileUpload1.FileName;
                    //
                    //顯示一下上傳到server後的檔案名稱,注意,不包含路徑
                    //
                    image1.ImageUrl = "uploadedimages//" + FileUpload1.FileName;//顯示上面上傳的圖片
                }
                catch (Exception ex)
                {
                    Label1.Text = "檔案無法上傳.";
                }
            }
            else
            {
                Label1.Text = "無法接受這個類型或檔案不存在.";
            }
        }

    }
    protected void Button1_Click(object sender, EventArgs e)
    {
        //對ImageUrl的一些研究
        image1.ImageUrl = "uploadedimages//" + FileUpload1.FileName; //本意是要顯示上面上傳的圖片,但是..
         Label3.Text= FileUpload1.FileName;
       //值為空白,說明FileUpload1已經被釋放,對局部變數又多了些瞭解

        //如果你用實體路徑,那麼image控制項無法顯示,因為後面的參數imageUrl只認識http
    
    }