Блог

У меня есть функция загрузки, которая работает, но не просматривает загружаемое изображение, как это происходит с уникальным именем файла. Я использовал функцию window.FileReader, как было предложено.

У меня есть перетаскивание и удаление addEventListeners, но по какой-то причине я не могу получить данные изображения для предварительного просмотра в div «prev-img». Любая помощь будет отвергнута.

 function multiUploader(config){

    this.config = config;
    this.items = "";
    this.all = []
    var self = this;

    multiUploader.prototype._init = function(){
        if (window.File amp;amp; 
            window.FileReader amp;amp; 
            window.FileList amp;amp; 
            window.Blob) {      
             var inputId = $("#" this.config.form).find("input[type='file']").eq(0).attr("id");
             document.getElementById(inputId).addEventListener("change", this._read, false);
             document.getElementById(this.config.dragArea).addEventListener("dragover", function(e){ e.stopPropagation(); e.preventDefault(); }, false);
             document.getElementById(this.config.dragArea).addEventListener("drop", this._dropFiles, false);
             document.getElementById(this.config.form).addEventListener("submit", this._submit, false);
        } else
            console.log("Browser supports failed");
    }

    multiUploader.prototype._submit = function(e){
        e.stopPropagation(); e.preventDefault();
        self._startUpload();
    }

    multiUploader.prototype._preview = function(data){
        this.items = data;
        if(this.items.length > 0){
            var html = "";      
            var uId = "";
            for(var i = 0; i<this.items.length; i  ){
                uId = this.items[i].name._unique();
                let iMg = this.items[i];  // This is where I thought I'd be able to preview
                var sampleIcon = '<img src="images/image.png" />';
                var errorClass = "";
                if(typeof this.items[i] != undefined){
                    if(self._validate(this.items[i].type) <= 0) {
                        sampleIcon = '<img src="images/unknown.png" />';
                        errorClass =" invalid";
                    } 
                    html  = '<div class="dfiles' errorClass '" rel="' uId '"><div class="prev-img"><img src=' iMg ' /></div><button onclick="closeprev(this);" type="button" class="close">×</button><h5>' sampleIcon this.items[i].name '</h5><div id="' uId '" class="progress" style="display:none;"><img src="images/ajax-loader.gif" /></div></div>';
                }
            }
            $("#dragAndDropFiles").append(html);
        }
    }

    multiUploader.prototype._read = function(evt){
        if(evt.target.files){
            self._preview(evt.target.files);
            self.all.push(evt.target.files);

        } else 
            console.log("Failed file reading");
    }

    multiUploader.prototype._validate = function(format){
        var arr = this.config.support.split(",");
        return arr.indexOf(format);
    }

    multiUploader.prototype._dropFiles = function(e){
        e.stopPropagation(); e.preventDefault();
        self._preview(e.dataTransfer.files);
        self.all.push(e.dataTransfer.files);
    }