There is a sufficient number of js libraries to implement the data load (upload) indicator. I want to try to do the same myself. But I do not understand what the principle of the indicator is based on. Where do data on the amount of information transmitted come from?

    1 answer 1

    UPDATE. If you do not use the method provided by HTML5 , you can try to create a hidden <iframe> through which to download the file. So, as far as I know, Google does, as well as a bunch of Javascript libraries. For jQuery , for example, there is such a solution . But it is pretty tambourine.

    The remaining methods include the use of other client technologies, such as Flash . For example, SWFUpload .

    If you want to learn about the standard method that does not attract Flash or the like, then the new XMLHttpRequest in HTML5 exposes the onprogress event, onprogress when the status of the current data upload to the server changes. With this event you can track the amount of data transferred.

    Here is a detailed description of how this can be done. Here is an example.

     function upload(blobOrFile) { var xhr = new XMLHttpRequest(); xhr.open('POST', '/server', true); xhr.onload = function(e) { ... }; // Наблюдаем за процессом закачки. var progressBar = document.querySelector('progress'); xhr.upload.onprogress = function(e) { if (e.lengthComputable) { progressBar.value = (e.loaded / e.total) * 100; progressBar.textContent = progressBar.value; // Если бразуер не поддерживает. } }; // Отправляем данные на сервер. xhr.send(blobOrFile); } upload(new Blob(['hello world'], {type: 'text/plain'}));
    • Well, yes, it's all built into html5, thanks for the answer. What about the "self-made" indicator? Without the involvement of embedded entities. Is it real? Using only js and ajax? - Deus
    • @Deus Updated the answer. If it helped, it’s better + press =) - khaos