Блог

Приведенный ниже код отлично работает для загрузки файлов в SPO через RestAPI. Никаких отзывов о ходе загрузки файла не получено. После завершения загрузки выдается предупреждение.

Я хотел бы иметь индикатор выполнения для отображения процента загрузки и перезагрузки этой страницы загрузки при нажатии OK для успешного сообщения с предупреждением.

Пожалуйста, помогите.

 <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=ListItemAllFieldsamp;@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 amp; 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 - MDB - ACFTREG')/items?$Select=Titleamp;$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({}) функции вы можете добавить xhr настройку внутри ajax.

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