單擊按鈕時不顯示進度條

Question

我有一個Fileupload控件，當我點擊上傳按鈕時，我只是顯示一個圖像，即進度條或加載gif圖像。我嘗試通過JavaScript，但我無法顯示該圖像。 我希望在文件上傳之前顯示圖像。

這是我的aspx代碼：

<form id="form1" runat="server"> 
    <div class="transbox" id="mainbk" runat="server" style="position:absolute; top:0px; left:0px; width: 100%; height: 100%;" > 
      <fieldset style="width:51%; margin-left:300px;font-family:'Palatino Linotype';font-size:large"> 
      <legend style="color:white;font-family:'Palatino Linotype'">Upload Video Files</legend> 
       <asp:FileUpload EnableViewState="true" runat="server" ID="UploadImages" style="background-color:white; position:relative; font-family:'Palatino Linotype'; font-size:medium" Width="500px" AllowMultiple="false"/> 
       <asp:RequiredFieldValidator ID="reqFile" runat="server" ControlToValidate="UploadImages" ErrorMessage="Select a File" style="color:red;position:absolute"></asp:RequiredFieldValidator><br /> 
       <asp:Label Text="Description:" runat="server" ID="lbldes" style="font-family:'Palatino Linotype';position:absolute; margin-top:10px; font-size:large;color:white" ></asp:Label> 
       <asp:TextBox id="txtdes" runat="server" TextMode="MultiLine" Height="60px" style="margin-top:10px;margin-left:195px;" Width="300px"></asp:TextBox> 
       <asp:RequiredFieldValidator ID="txtreq" runat="server" ControlToValidate="txtdes" ErrorMessage="Description Required" style="color:red;position:absolute;margin-top:20px;" ></asp:RequiredFieldValidator><br /> 

       <asp:Button runat="server" ID="uploadedFile" style="position:relative; font-family:'Palatino Linotype'; font-size:medium; width: 112px; height: 29px;" Text="Upload" UseSubmitBehavior="true" OnClick="uploadedFile_Click"/> 
       <asp:image id="loading_img" runat="server" style="Display:none;position:absolute;margin-top:-20px;margin-left:200px;" src="../Images/Other Images/waiting.gif" /> 
      </fieldset> 
    </div> 
    </form> 

這是我的javascript：

<script type="text/javascript"> 
     $('#uploadedFile').click(function() { 
      $('#loading_img').show(); // Show image 
      return true; // Proceed with postback 
     }); 
    </script> 

和按鈕UploadedFile的這是我的點擊事件，在aspx.cs頁面。

protected void uploadedFile_Click(object sender, EventArgs e) 
    { 
     if (Page.IsPostBack) 
     { 
      string fileExt = Path.GetExtension(UploadImages.FileName).ToLower(); 
      if (fileExt == ".flv" || fileExt == ".avi" || fileExt == ".mp4" || fileExt == ".3gp" || fileExt == ".mov" || fileExt == ".wmv" || fileExt == ".mpg" || fileExt == ".asf" || fileExt == ".swf") 
      { 
       try 
       { 

        filepath = Server.MapPath("~/Videos/" + UploadImages.FileName); 
        UploadImages.PostedFile.SaveAs(filepath); 
        vurl=UploadImages.FileName.ToString(); 
        newpath = "Images//Video_Thumbs//" + createvidImage(filepath); 
        al = txtdes.Text.ToString(); 
        id += 1; 
        string Insert = "Insert into video (vid,videoname,videourl,vidthumb) values (@id,@alter,@vrl,@IMAGE_PATH)"; 
        SqlCommand cmd = new SqlCommand(Insert, con); 
        cmd.Parameters.AddWithValue("@IMAGE_PATH", newpath.ToString()); 
        cmd.Parameters.AddWithValue("@id", id); 
        cmd.Parameters.AddWithValue("@alter", al); 
        cmd.Parameters.AddWithValue("@vrl", vurl); 
        try 
        { 
         con.Open(); 
         cmd.ExecuteNonQuery(); 
         con.Close(); 
         Page.ClientScript.RegisterStartupScript(GetType(), "msgbox", "alert('Video Uploaded!!');", true); 

         txtdes.Text = ""; 
        } 
        catch (Exception e1) 
        { 
         Page.ClientScript.RegisterStartupScript(GetType(), "msgbox", "alert('" + e1.Message.ToString() + "!!');", true); 
        } 
       } 
       catch (Exception ex) 
       { 
        Page.ClientScript.RegisterStartupScript(GetType(), "msgbox", "alert('" + ex.Message.ToString() + "!!');", true); 
       } 
      } 
     } 
    } 

請幫我在JavaScript或C＃中做到這一點。

Answer 1

這裏的問題是<asp:Button/>標籤（和所有asp標籤，就此而言）在頁面中呈現的方式。如果你右鍵單擊並檢查元素，你會發現它的ID實際上並不是'uploadedFile'，但可能類似'ctl00_uploadedFile'，因此，你的jQuery選擇器沒有找到元素。我建議兩件事之一：

1）檢查頁面，看看實際呈現的元素正在命名，然後相應地更新您的jQuery。

2）使用內嵌的C＃代碼段來提取ID。例如，您將用$('#' + '<%=uploadedFile.ClientID%>')替換$('#uploadedFile')。那個的<%%>部分將評估爲C＃並將ClientID屬性（即在頁面上呈現的id值）插入到jQuery選擇器中。

編輯：顯然我錯了約<asp:Button/>標籤，他們渲染一個不變的name屬性，而不是一個id財產。您想要用於上傳文件按鈕的選擇器是$('input[name="uploadedFile"]')。