未捕获的类型错误：无法读取未定义的属性“样式”

Question

我正在制作一个Web应用程序，并希望从本地文件加载图像，并显示进度栏。 我一直在从https://www.html5rocks.com/en/tutorials/file/dndfiles/

阅读有关文件API的信息

我遇到了Uncaught Type错误：无法读取ImageLoader类中progress变量上未定义的属性“ style”。 当我在没有require.js和ImageLoader（）类的情况下这样做时，确实会导入图像，但不会显示进度条。

define(
    function(){
    'use strict';

        function ImageLoader() {

            this.reader;
            this.input_files = document.getElementById('files');
            this.output_files = document.getElementById('image-list');
            this.progress = document.getElementById('percent');
            this.progress_bar = document.getElementById('progress_bar');
        }

        ImageLoader.prototype.load = function(){
            this.input_files.addEventListener('change', this.handleImageSelect, false);
        };

        ImageLoader.prototype.abortRead = function(){
            this.reader.abort();
        };      

        ImageLoader.prototype.errorHandler = function(evt){ 

            switch(evt.target.error.code) {
                case evt.target.error.NOT_FOUND_ERR:
                    alert('File Not Found!');
                    break;
                case evt.target.error.NOT_READABLE_ERR:
                    alert('File is not readable');
                    break;
                case evt.target.error.ABORT_ERR:
                    break; 
                default:
                    alert('An error occurred reading this file.');
            };  
        };      

        ImageLoader.prototype.updateProgress = function(evt){

            if (evt.lengthComputable) {
                var percentLoaded = Math.round((evt.loaded / evt.total) * 100);
                if (percentLoaded < 100) {
                    this.progress.style.width = percentLoaded + '%';
                    this.progress.textContent = percentLoaded + '%';
                }
            }           
        };

        ImageLoader.prototype.handleImageSelect = function(evt){

            this.progress.style.width = '0%';
            this.progress.textContent = '0%';

            var files = evt.target.files;

            for (var i = 0, f; f = files[i]; i++) {

                if (!f.type.match('image.*')){ continue; }

                this.reader = new FileReader();
                this.reader.onerror = this.errorHandler;
                this.reader.onabort = this.abortRead;
                this.reader.onprogress = this.updateProgress;

                this.reader.onloadstart = function(e){
                    this.progress_bar.className = 'loading';
                }

                this.reader.onload = (function(theFile) {
                    return function(e) {
                        this.progress.style.width = '100%';
                        this.progress.textContent = '100%';
                        setTimeout(function(){ this.progress_bar.className = '';}, 2000);

                        var label = document.createElement('label');
                            console.log(theFile.name);

                        label.innerHTML = [
                            '<img src="', 
                            e.target.result,
                            '" title="', 
                            escape(theFile.name), 
                            '"/>'
                        ].join('');
                        this.output_files.appendChild(label);
                    };
                })(f);

                // Read in the image file as a data URL.
                this.reader.readAsDataURL(f);
            }            
        }


        //------------------------------------------------------------------------------------
        return ImageLoader;

    })

---

<div id="myModal" class="modal fade" role="dialog">
    <div class="modal-dialog">

        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Loading images</h4>
            </div>
            <div class="modal-body">

                <input type="file" id="files" name="files[]" multiple />
                <button onclick="abortRead();">Cancel read</button>
                <div id="progress_bar"><div id="percent">0%</div></div>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

---

require(
    ['jquery',
     'popper',
     'bootstrap',
     'imgloader'],

    function($, Popper, Bootstrap, Imgloader){
    'use strict';

        var imgloader = new Imgloader();
        imgloader.load();


});