[PHP] problema con upload e javascript (upload multiplo)

luigi777

Utente Attivo
14 Feb 2008
1.073
1
38
38
Massa, Italy
Salve, perché in alcune foto ottengo questo errore:
Codice:
3(index):75 Uncaught TypeError: Cannot read property 'type' of undefined
    at multiUploader._uploader ((index):75)
    at multiUploader._startUpload ((index):109)
    at HTMLFormElement.multiUploader._submit ((index):31)
e invece altre no?
Vi mostro il codice che ho trovato su github qualche anno fa.. che non ricordo più come si chiama il suo sito.
PHP:
<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Image upload</title>
<script  src="https://code.jquery.com/jquery-3.2.1.min.js"  integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="  crossorigin="anonymous"></script>
<script type="text/javascript">
function multiUploader(config){
 
    this.config = config;
    this.items = "";
    this.all = []
    var self = this;
    
        multiUploader.prototype._init = function(){
        if (window.File &&
            window.FileReader &&
            window.FileList &&
            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();
                var sampleIcon = '<img src="img/image.png" />';
                var errorClass = "";
                if(typeof this.items[i] != undefined){
                    if(self._validate(this.items[i].type) <= 0) {
                        sampleIcon = '<img src="img/unknown.png" />';
                        errorClass =" invalid";
                    }
                    html += '<div class="dfiles'+errorClass+'" rel="'+uId+'"><h5>'+sampleIcon+this.items[i].name+'</h5><div id="'+uId+'" class="progress" style="display:none;"><img src="img/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);
    }
    
    multiUploader.prototype._uploader = function(file,f){
        if(typeof file[f] != undefined && self._validate(file[f].type) > 0){
            var data = new FormData();
            var ids = file[f].name._unique();
            data.append('file',file[f]);
            data.append('index',ids);
            $(".dfiles[rel='"+ids+"']").find(".progress").show();
            $.ajax({
                type:"POST",
                url:this.config.uploadUrl,
                data:data,
                cache: false,
                contentType: false,
                processData: false,
                success:function(rponse){
                    $("#"+ids).hide();
                    var obj = $(".dfiles").get();
                    $.each(obj,function(k,fle){
                        if($(fle).attr("rel") == rponse){
                            $(fle).slideUp("normal", function(){ $(this).remove(); });
                        }
                    });
                    if (f+1 < file.length) {
                        self._uploader(file,f+1);
                    }
                }
            });
        } else
            console.log("Invalid file format - "+file[f].name);
    }
    
    multiUploader.prototype._startUpload = function(){
        if(this.all.length > 0){
            for(var k=0; k<this.all.length; k++){
                var file = this.all[k];
                this._uploader(file,0);
            }
        }
    }
    
    String.prototype._unique = function(){
        return this.replace(/[a-zA-Z]/g, function(c){
            return String.fromCharCode((c <= "Z" ? 90 : 122) >= (c = c.charCodeAt(0) + 13) ? c : c - 26);
        });
    }

    this._init();
}

function initMultiUploader(){
    new multiUploader(config);
}
var config = {
    support : "image/jpg,image/png,image/bmp,image/jpeg,image/gif",        // Valid file formats
    form: "demoFiler",                    // Form ID
    dragArea: "dragAndDropFiles",        // Upload Area ID
    uploadUrl: "upload.php"                // Server side upload url
}
$(document).ready(function(){
    initMultiUploader(config);
});
</script>
<style>
.uploadArea{ min-height:300px; height:auto; border:1px dotted #ccc; padding:10px; cursor:move; margin-bottom:10px; position:relative;}
h1, h5{ padding:0px; margin:0px; }
h1.title{ font-family:'Boogaloo', cursive; padding:10px; }
.uploadArea h1{ color:#ccc; width:100%; z-index:0; text-align:center; vertical-align:middle; position:absolute; top:25px;}
.dfiles{ clear:both; border:1px solid #ccc; background-color:#E4E4E4; padding:3px;  position:relative; height:25px; margin:3px; z-index:1; width:97%; opacity:0.6; cursor:default;}
h5{ width:95%; line-height:25px;}
h5, h5 img {  float:left;  }
.invalid { border:1px solid red !important; }
.buttonUpload { display:inline-block; padding: 4px 10px 4px; text-align: center; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); background-color: #0074cc; -webkit-border-radius: 4px;-moz-border-radius: 4px; border-radius: 4px; border-color: #e6e6e6 #e6e6e6 #bfbfbf; border: 1px solid #cccccc; color:#fff; }
.progress img{ margin-top:7px; margin-left:24px; }
</style>
</head>
<body lang="en">
<center><h1 class="title">Multiple Drag and Drop File Upload</h1></center>
<div id="dragAndDropFiles" class="uploadArea">
    <h1>Drop Images Here</h1>
</div>
<form name="demoFiler" id="demoFiler" enctype="multipart/form-data">
<input type="file" name="multiUpload" id="multiUpload" multiple />
<input type="submit" name="submitHandler" id="submitHandler" value="Upload" class="buttonUpload" />
</form>
<div class="progressBar">
    <div class="status"></div>
</div>
</body>
</html>
avete idea cosa è .. problema di php o javascript .?

Grazie mille e buona giornata.
 

luigi777

Utente Attivo
14 Feb 2008
1.073
1
38
38
Massa, Italy
ok, grazie mille.. per caso è questo problema: support : "image/jpg,image/png,image/bmp,image/jpeg,image/gif",
perché alcune immagini funziona e altre no, tipo le immagini dei vecchi cellulari con bassa risoluzione e invece con gli samsung s5, non da problemi.. idee?