文件上传进度自定义页面 RestAPI SPO

Question

下面的代码可以很好地通过 RestAPI 将文件上传到 SPO。没有收到关于文件上传进度的反馈。上传完成后会引发警报。

我想要一个进度条来显示上传百分比并重新加载此上传页面，同时单击确定以显示成功警报消息。

请提供帮助。

<script src="https://code.jquery.com/jquery-1.12.4.min.js" type="text/javascript"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script type="text/javascript">
$(document).ready(function () {
    init();   
});
function init(){
    $("#btnUploadFiles").click(function(){
        var files=$("#inputTypeFiles")[0].files;
        uploadFiles(files[0]); // uploading singe file
    });
}
function uploadFiles (uploadFileObj) {
    var fileName = uploadFileObj.name;
    var webUrl = _spPageContextInfo.webAbsoluteUrl;
    var documentLibrary="TEST";
    var folderName = "";
    var targetUrl = _spPageContextInfo.webServerRelativeUrl + "/" + documentLibrary + "/" + folderName;
    var url = webUrl + "/_api/Web/GetFolderByServerRelativeUrl(@target)/Files/add(overwrite=true, url='" + fileName + "')?$expand=ListItemAllFields&@target='" + targetUrl + "'";
 
    uploadFileToFolder(uploadFileObj, url, function (data) {
        var file = data.d;
        var updateObject = {
            __metadata: {
                type: file.ListItemAllFields.__metadata.type
            },
            departname: $("#departname").val(),   //meta data column1
            Filename: $("#filename").val(),    //meta data column2
            ACFTREG: $("#ACFTREG").val(),    //meta data column3
            Date: $("#datepicker").val()    //meta data column4
        };
        url = webUrl + "/_api/Web/lists/getbytitle('"+documentLibrary+"')/items(" + file.ListItemAllFields.Id + ")";
        updateFileMetadata(url, updateObject, file, function (data) {
            alert("File uploaded & metadata updation done successfully");
        }, function (data) {
            alert("File upload done but metadata updating FAILED");
        });
    }, function (data) {
        alert("File uploading and metadata updating FAILED");
    });
}
 
function getFileBuffer(uploadFile) {
    var deferred = jQuery.Deferred();
    var reader = new FileReader();
    reader.onloadend = function (e) {
        deferred.resolve(e.target.result);
    }
    reader.onerror = function (e) {
        deferred.reject(e.target.error);
    }
    reader.readAsArrayBuffer(uploadFile);
    return deferred.promise();
}
 
function uploadFileToFolder(fileObj, url, success, failure) {
    var apiUrl = url;
    var getFile = getFileBuffer(fileObj);
    getFile.done(function (arrayBuffer) {
        $.ajax({
            url: apiUrl,
            type: "POST",
            data: arrayBuffer,
            processData: false,
            async: false,
            headers: {
                "accept": "application/json;odata=verbose",
                "X-RequestDigest": jQuery("#__REQUESTDIGEST").val(),
            },
            success: function (data) {
                success(data);
            },
            error: function (data) {
                failure(data);
            }
        });
    });
}
 
function updateFileMetadata(apiUrl, updateObject, file, success, failure) {
    $.ajax({
        url: apiUrl,
        type: "POST",
        async: false,
        data: JSON.stringify(updateObject),
        headers: {
            "accept": "application/json;odata=verbose",
            "X-RequestDigest": $("#__REQUESTDIGEST").val(),
            "Content-Type": "application/json;odata=verbose",
            "X-Http-Method": "MERGE",
            "IF-MATCH": file.ListItemAllFields.__metadata.etag,
        },
        success: function (data) {
            success(data);
        },
        error: function (data) {
            failure(data);
        }
    });
}
SP.SOD.executeFunc('sp.js', 'SP.ClientContext', getItems);
function getItems() {
    $.ajax({
        url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/GetByTitle('L%20-%20MDB%20-%20ACFTREG')/items?$Select=Title&$top=2000",
        type: "GET",
        headers: {
            "accept": "application / json;odata = verbose",
        },
        success: function(data) {
            var results = data.d.results;
            var options = "";
            for(var i = 0; i < results.length; i++){
                options = options + "<option value='" + results[i].Title + "'>" + results[i].Title + "</option>";
            }
            $("#ACFTREG").append(options);
        },
        error: function(error) {
            alert(JSON.stringify(error));
        }
    });
}

$( function() {$( "#datepicker" ).datepicker(
    {
      changeMonth: true,
      changeYear: true
    }
    );} );
  
</script>


Select File:<input type="File" id="inputTypeFiles" /><br />
Departname: <input id="departname" type="textbox"/><br />
Date: <input type="text" id="datepicker" autocomplete="off" name="hidden"><br />
Filename: <input id="filename" type="textbox"/><br />
ACFTREG: <select id="ACFTREG" class="select">
<option selected="selected">Select</option><br />
<input type="button" id="btnUploadFiles" value="Upload"/><br />

Answer 1

在$.ajax({})函数内部，你可以在ajax里面添加xhr设置。

$.ajax({
xhr: function() {
    var xhr = new window.XMLHttpRequest();
    xhr.upload.addEventListener("progress", function(evt) {
        if (evt.lengthComputable) {
            var percentComplete = (evt.loaded / evt.total) * 100;
            // Place upload progress bar visibility code here
        }
    }, false);
    return xhr;
},
type: 'POST',
//add the rest of ajax settings

查看此链接以获取 ajax 文档 jQuery/ajax

检查此链接，例如上传进度 jQuery-upload-progress/example