locked
how to show a rel percent of file uploading RRS feed

  • Question

  • User-1045082127 posted

    Hello <g class="gr_ gr_10 gr-alert gr_spell gr_inline_cards gr_run_anim ContextualSpelling ins-del" id="10" data-gr-id="10">every body</g>

    I was Looking out for a way to show a real percent of file <g class="gr_ gr_169 gr-alert gr_gramm gr_inline_cards gr_run_anim Style multiReplace" id="169" data-gr-id="169">uploading  <g class="gr_ gr_168 gr-alert gr_gramm gr_inline_cards gr_run_anim Grammar multiReplace" id="168" data-gr-id="168">in</g></g> <g class="gr_ gr_79 gr-alert gr_spell gr_inline_cards gr_disable_anim_appear ContextualSpelling ins-del multiReplace" id="79" data-gr-id="79"><g class="gr_ gr_84 gr-alert gr_gramm gr_inline_cards gr_run_anim Grammar only-ins replaceWithoutSep" id="84" data-gr-id="84">server</g> side</g>. but I suggest it can be done by <g class="gr_ gr_132 gr-alert gr_spell gr_inline_cards gr_run_anim ContextualSpelling ins-del multiReplace" id="132" data-gr-id="132"><g class="gr_ gr_176 gr-alert gr_gramm gr_inline_cards gr_run_anim Grammar only-ins replaceWithoutSep" id="176" data-gr-id="176">client</g> side</g>(I <g class="gr_ gr_152 gr-alert gr_spell gr_inline_cards gr_run_anim ContextualSpelling ins-del multiReplace" id="152" data-gr-id="152">dont</g> know) by <g class="gr_ gr_335 gr-alert gr_spell gr_inline_cards gr_run_anim ContextualSpelling ins-del multiReplace" id="335" data-gr-id="335">seperating</g> file into the bytes. Please help <g class="gr_ gr_208 gr-alert gr_gramm gr_inline_cards gr_run_anim Style multiReplace" id="208" data-gr-id="208">me .</g>

    tnx and regards

    Saturday, October 12, 2019 4:13 PM

Answers

  • User665608656 posted

    Hi aminsoraya,

    According to your description, I recommend you can use XMLHttpRequest to upload your files to show the percentage.

    If you want to upload mutilple files, you could better add this setting to your web.config to allow large files.

    <configuration>
        <system.web>
            <httpRuntime maxRequestLength="1048576" />
        </system.web>
    </configuration>

    Here is the full code:

    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
    
        <link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" rel="stylesheet" />
        <script src="../Scripts/jquery-3.2.1.js"></script>
        <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
        <style>
            .progressbar {
                width: 300px;
                height: 21px;
            }
    
            .progressbarlabel {
                width: 300px;
                height: 21px;
                ;
                text-align: center;
                font-size: small;
            }
        </style>
        <script type="text/javascript">
    $(document).ready(function () {
      $("#Button1").click(function (evt) {
        var xhr = new XMLHttpRequest();
        var data = new FormData();
        var files = $("#FileUpload1").get(0).files;
        for (var i = 0; i < files.length; i++) {
          data.append(files[i].name, files[i]);
        }
        xhr.upload.addEventListener("progress", function (evt) {
        if (evt.lengthComputable) {
          var progress = Math.round(evt.loaded * 100 / evt.total);
          $("#progressbar").progressbar("value", progress);
        }
        }, false);
        xhr.open("POST", "UploadHandler.ashx");
        xhr.send(data);
    
        $("#progressbar").progressbar({
          max: 100,
          change: function (evt, ui) {
            $("#progresslabel").text($("#progressbar").progressbar("value") + "%");
          },
          complete: function (evt, ui) {
            $("#progresslabel").text("File upload successful!");
          }
        });
        evt.preventDefault();
      });
    });
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
            <asp:Label ID="Label1" runat="server" Text="Select File(s) to Upload :"></asp:Label>
            <br />
            <br />
            <asp:FileUpload ID="FileUpload1" runat="server" AllowMultiple="true" />
            <br />
            <br />
            <asp:Button ID="Button1" runat="server" Text="Upload" />
            <br />
            <br />
            <div id="progressbar" class="progressbar">
                <div id="progresslabel" class="progressbarlabel"></div>
            </div>
        </form>
    </body>
    </html>
    

    Create an UploadHandler.ashx file in your project :

            public void ProcessRequest(HttpContext context)
            {
                
                    HttpFileCollection files = context.Request.Files;
                    foreach (string key in files)
                    {
                        HttpPostedFile file = files[key];
                        string fileName = file.FileName;
                        fileName = context.Server.MapPath("~/Uploads/" + fileName);
                        file.SaveAs(fileName);
                    }
                    context.Response.ContentType = "text/plain";
                    context.Response.Write("File(s) uploaded successfully!");
               
            }
    

    Here is the result of this work demo:

    For more details, you could refer to this link : Displaying File Upload Progress Using JQuery UI Progressbar Widget

    You can also refer to this link : How set progress bar on file upload

    If you want to seperate file into the bytes, you can refer to this link: File Upload Progress with Percentage and Bytes

    Best Regards,

    YongQing.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, October 14, 2019 7:41 AM