버튼을 클릭 할 때 진행 표시 줄이 표시되지 않습니다.

Question

제어가 Fileupload이고 업로드 버튼을 클릭하면 이미지가 진행률 표시 줄 또는로드 중 GIF 이미지로 표시됩니다. 나는 자바 스크립트를 통해 그것을 시도했지만 그 이미지를 표시 할 수 없습니다. File이 업로드 될 때까지 Image가 표시되기를 원합니다.

이 내 영문 코드 :

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

이 내 자바 스크립트입니다 :

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

및 aspx.cs 페이지에서 버튼 uploadedFile이 내 클릭 이벤트.

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); 
       } 
      } 
     } 
    } 

자바 스크립트 나 C#으로이 작업을 도와주세요.

Answer 1

여기서 문제는 <asp:Button/> 태그 (및 모든 관련 asp 태그)가 페이지에 렌더링되는 방식입니다. 요소를 마우스 오른쪽 버튼으로 클릭하고 검사하면 ID가 실제로 'uploadedFile'이 아니지만 'ctl00_uploadedFile'과 같은 것일 수 있습니다. 결과적으로 jQuery 선택기가 요소를 찾지 못합니다. 두 가지 중 하나를 권하고 싶습니다.

1) 페이지를 검사하고 실제 렌더링 된 요소의 이름을 확인한 다음 이에 따라 jQuery를 업데이트하십시오.

2) 인라인 C# 코드 조각을 사용하여 ID를 추출합니다. 예를 들어, $('#uploadedFile')을 $('#' + '<%=uploadedFile.ClientID%>')으로 바꿉니다. <%%> 부분은 C#으로 평가되고 ClientID 속성 (즉, 페이지에서 렌더링되는 id 값)을 jQuery 선택기에 삽입합니다.

편집

:은 분명히 나는 ​​ <asp:Button/> 태그에 대한 오해, 그리고 그들은 변경되지 않은 name 특성보다는 id 속성을 렌더링합니다. 업로드 된 파일 버튼에 사용할 선택자는 $('input[name="uploadedFile"]')입니다. (WebForm_DoPostBackWithOptions :