function up_files() {

        var fileSelect = document.getElementById('file-select');

        var files = fileSelect.files;

        var formData = new FormData();

        for (var i = 0; i < files.length; i++) {

            var file = files[i];

            if (!file.type.match('image.*')) {

                continue;

            }

            formData.append('photos[]', file, file.name);

        }

        var xhr = new XMLHttpRequest();

        xhr.open('POST', 'test.php', true);

        xhr.onload = function () {

            if (xhr.status !== 200) {

                alert('An error occurred!');

            }

        };

        var progressBar = document.getElementById('progress');

        xhr.upload.onprogress = function(e) {

            if (e.lengthComputable) {

                progressBar.value = (e.loaded / e.total) * 100;

                progressBar.textContent = progressBar.value; // Fallback for unsupported browsers.

            }

        };

        xhr.send(formData);

    }

<div id="progress" style="width: 100px;height: 100px;background-color: #0baae4">Test content</div>

<input type="file" id="file-select" name="photos[]" multiple/>

<button onclick="up_files()">上传</button>