Salve, perché in alcune foto ottengo questo errore:
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.
avete idea cosa è .. problema di php o javascript .?
Grazie mille e buona giornata.
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.
