1

XmlHttpRequest这是使用API上传 Javascript/JQuery 多文件的工作示例。然后我注意到进度条动画没有自行更新。调试后，我发现XmlHttpRequest' 的 Progress 监听器正在工作。

那么，是什么导致进度条不自行更新呢？当我使用 javascriptalert()时，进度条动画可以工作，但是如果我为生产用户注释掉 javascript，alert()进度条动画就不起作用。

可能是什么问题呢？我们能做些什么来解决这个问题？

/* Outer (1) - Centering the Popup Box... */
#WebUploadProgressWebpageOuter {  
    z-index:2497;
    display: none;
    width:100%;
    height:100%;
    position:absolute;
    top:0px;
    left:0px;
}
/* Middle (2) - Centering the Popup Box... */
#WebUploadProgressWebpageMiddle {
    vertical-align:middle;
    display:table-cell;
}
/* Inner (3) - Centering the Popup Box... */
#WebUploadProgressWebpageInnerDialogBox {
    margin: 0px auto;
    width: 600px;
    padding: 20px 20px 40px 20px;
    border: solid 2px #ccc;
    background-color: #F5F5F5;
    height: 320px;
    position: relative;
    -moz-box-shadow: 0 0 16px #ccc;
    overflow-x:auto;
}
.WebUploadProgressBar p {
    display: block;
    width: 350px;
    padding: 2px 5px;
    margin: 12px 0;
    border: 1px inset #446;
    border-radius: 5px;
}

$('#buttonFileBrowserUpload').on('change', function (e) {
    var formFiles = $('#buttonFileBrowserUpload')[0].files;
    var fileCount = 0;

    //Initialize & clear the html dialog data from previous File upload...
    $('#WebUploadProgressWebpageInnerDialogBox').empty();

    var htmlCustomUploadDialog = "";
    if ($('#WebUploadProgressWebpageOuter').length == 0) {
        htmlCustomUploadDialog += "<div id='WebUploadProgressWebpageOuter' style='display:none;'>";  //Hide the pop-up dialog til after the file-picker dialog is closed... /* To place this pop-up div on-top-of any of the AJAX's UpdatePanel html tag & javascript's popup error validation... */
        htmlCustomUploadDialog += " <div id='WebUploadProgressWebpageMiddle'>";
        htmlCustomUploadDialog += "  <div id='WebUploadProgressWebpageInnerDialogBox'></div>";
        htmlCustomUploadDialog += " </div>";
        htmlCustomUploadDialog += "</div>";
        $('body').append(htmlCustomUploadDialog);
    }

    //We'll grab our file upload form element (there's only one, hence [0]).
    $.each(formFiles, function (i, o) {
        //================================================================================
        //Build file-data layout and append to pop-up modal dialog...
        //================================================================================
        var htmlCustomFileDivBox = "<div id='WebUploadProgressFile" + i + "'>";
        htmlCustomFileDivBox += "    <div>Filename: <strong>" + o.name + "</strong><br />type: <strong>" + o.type + "</strong><br />size: <strong>" + o.size + "</strong> bytes</div>";
        htmlCustomFileDivBox += "    <div id='WebUploadProgressBarFile" + i + "' class='WebUploadProgressBar'><p>Upload file 0 %</p></div>";
        htmlCustomFileDivBox += "</div>";
        $('#WebUploadProgressWebpageInnerDialogBox').append(htmlCustomFileDivBox);
        //================================================================================

        //================================================================================
        //File Upload...
        //================================================================================
        var xhr = new XMLHttpRequest();
        var formData = new FormData();

        //Display the pop-up dialog...
        if (fileCount == 0) { $('#WebUploadProgressWebpageOuter').css({ "display": "table" }); }  //"display: table;" is required for the pop-up centering to work...

        formData.append("formVin", "1FAFP53U74A144331");
        formData.append(o.name, o);

        xhr.open("POST", "https://" + window.location.host + "/WebApi/AmazonCloud/VehiclePhotosManager/UploadAsync/102/83", true);
        xhr.upload.addEventListener("progress", function (e) {  //Update Uploading Progress-Bar...
            var percentage = parseInt(100 - (e.loaded / e.total * 100));
            alert(percentage);

            $("#WebUploadProgressBarFile" + i + " p").text("Upload filey " + percentage + " %");
        }, false);
        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4) {
                fileCount++;

                if (xhr.status == 200) {
                    $("#WebUploadProgressBarFile" + i + " p").text("Upload filez 100 %");
                }

                if (fileCount == formFiles.length) {
                    $('#WebUploadProgressWebpageOuter').css({ "display": "none" });  //Close the pop-up dialog...
                }
            }
        };
        xhr.send(formData);
        //================================================================================
    });
});

Upload
<input type="file" id="buttonFileBrowserUpload" name="files[]" multiple />
4

0 回答 0