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

问题描述

下面的代码可以很好地通过 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,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,failure) {
    $.ajax({
        url: apiUrl,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 />

解决方法

在 $.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