2012-01-12 12 views
0

更新パネル内に非同期ファイルをアップロードし、ファイルが選択されたらアップロードします。ファイルがアップロードされると、私は更新の進行状況を示しています。ここで私は画像処理をしています。アップロードが完了すると、イメージは消えます。イメージを表示する代わりに、アップロードされた割合をどのように表示できますか?アップロードのパーセンテージをasp.netに表示する方法

<asp:UpdateProgress ID="UpdateProgress2" runat="server"> 
          <ProgressTemplate> 
           <div> 
            <b>Please Wait...</b> 
            <img runat="server" id="ajaxLoader" style="background-color: White; width: 338px;" 
             src="styles/images/loadImage.gif" alt="loading" /> 
           </div> 
          </ProgressTemplate> 
         </asp:UpdateProgress> 

答えて

0

ない可能ここに代わり、あなたはアニメーションの画像を表示してもよいか、jQueryのプラグインやuplodifyをしようとします。

1

yoが試すことができます。

<head runat="server"> 
<title></title> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script> 
<script src="http://malsup.github.com/jquery.form.js"></script> 
<script> 
$(document).ready(function(){ 
var options = { 
    beforeSend: function() { 
    $("#progress").show(); 
    //clear everything 
    $("#bar").width('0%'); 
    $("#message").html(""); 
    $("#percent").html("0%"); 
          }, 
    uploadProgress: function (event, position, total, percentComplete) { 
     $("#bar").width(percentComplete + '%'); 
     $("#percent").html(percentComplete + '%'); 
      }, 
    success: function() { 

    $("#bar").width('100%'); 
    $("#percent").html('100%'); 
     }, 
    complete: function (response) { 
    $("#message").html("<font color='green'>" + response.responseText + "</font>"); 
     }, 
    error: function() { 
    $("#message").html("<font color='red'> ERROR: unable to upload files</font>"); 
    } 
    }; 
    $("#form1").ajaxForm(options); 

    }); 
</script> 

<body> 
<form id="form1" action="AjaxUploadFile.aspx" method="post" enctype="multipart/form-data" runat="server"> 
<div> 
<input type="file" size="60" name="myfile" /> 
<input type="submit" value="Ajax File Upload" /> 
<div id="progress"> 
<div id="bar"></div> 
<div id="percent">0%</div > 
</div> 
<br/> 
<div id="message"></div> 
</div> 
</form> 

コードの背後にある:

protected void Page_Load(object sender, EventArgs e) 
    { 

     HttpPostedFile file =null; 
     if (Request.Files.Count>0) 
     { 
      file = Request.Files[0]; 
      file.SaveAs(Server.MapPath("~/UploadedFiles/")+file.FileName); 
     } 
    } 
関連する問題