0

コントロールが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>

これは、 aspx.csページのuploadFileボタンのクリックイベントです。

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＃でこれを行うのを手伝ってください。

4

1 に答える 1

3

ここで問題と<asp:Button/>なるのは、ページでのタグ (およびすべての asp タグ) のレンダリング方法です。要素を右クリックして調べると、その ID が実際には「uploadedFile」ではなく、おそらく「ctl00_uploadedFile」のようなものであることがわかります。その結果、jQuery セレクターは要素を見つけられません。次の 2 つのいずれかをお勧めします。

1) ページを調べて、実際にレンダリングされた要素の名前を確認し、それに応じて jQuery を更新します。

2) インライン C# スニペットを使用して ID を引き出します。たとえば、 に置き換え$('#uploadedFile')ます$('#' + '<%=uploadedFile.ClientID%>')。その<%%>部分は C# として評価され、ClientID プロパティ (つまり、ページに表示される id 値) が jQuery セレクターに挿入されます。

編集:どうやら私はタグについて間違っていたようで、プロパティではなく変更されていないプロパティで<asp:Button/>レンダリングされます。UploadFile ボタンに必要なセレクターは.nameid$('input[name="uploadedFile"]')

于 2013-08-29T17:02:09.747 に答える