Javascript come vedere in anteprima le foto caricate nel input file prima di mandarle al server
- Autore discussione coronel
- Data d'inizio
- Stato
Vorrei che tu imparassi come debuggare/risolvere queste problematiche, come ti ho detto il problema alla base sta rimanendo.
Quando usi delle librerie, devi utilizzarle di conseguenza - se usi una funzione di una libreria devi anche assicurarti che essa sia utilizzata su un elemento effettivamente riconosciuto.
Aggiungi un console log di questo:
Ti renderai conto che non è un elemento jQuery.
Quando usi delle librerie, devi utilizzarle di conseguenza - se usi una funzione di una libreria devi anche assicurarti che essa sia utilizzata su un elemento effettivamente riconosciuto.
Aggiungi un console log di questo:
JavaScript:
$(".file_input")[0]
Ultima modifica:
scusa non ho capito, se riesco ad accedere con $ perche non sarebbe un elemento jquery?
Messaggio unito automaticamente:
ho capito adesso che stavo usando selettore jquery su una variabile in cui facevo selezione di un altro elemento senza jquery, cmq ora non riesco a vedere le foto in anteprima
Vedi: https://jsfiddle.net/tuhe273a/2/
Messaggio unito automaticamente:
ho provato a fare una leggera modifica e ancora nn va
Vedi: https://jsfiddle.net/tuhe273a/3/
Ultima modifica:
ok mi sono accorto che nel for mancava indicare l'indice ma cmq ancora nulla non vedo le anteprime
Vedi: https://jsfiddle.net/tuhe273a/4/
Messaggio unito automaticamente:
ho un problema in locale, inanzitutto voglio farlo in locale perche mi risulta piu comodo muovermi nella console di quella di jsfiddle, cmq tutti i files stanno nella stessa cartella main.js index.html output2.php
index
main.js
Ciao,
ho provato a guardare e mi dispiace ma non riesco neanche a leggere il codice che hai scritto, o comunque ci metterei molto più tempo a capirlo che a riscriverlo, è molto confusionario e ci sono delle cose che sono logicamente (e purtroppo in modo importante) sbagliate.
Ti consiglio vivamente di, con i consigli delle precedenti risposte, provare a riscrivere da 0 tutta la logica tenendo un filo unico con le librerie che usi (se usi jQuery, usalo bene e ovunque - altrimenti rimani su VJS).
Inoltre, ti prego, cerca di essere ordinato - se dovessi mai lavorare su un progetto grande la mantenibilità è forse una delle cose più importanti, se la code base è illeggibile è impossibile mantenere il progetto.
Se ti riferisci al log nella console, è letteralmente lo stesso problema di qualche risposta fa che si ripresenta, stai cercando di usare una funzione jQuery su un elemento VJS.
Quando riformulerai una logica che sia leggibile sarò felice di darti una mano come nelle precedenti risposte, così è solo controproducente per te.
ho provato a guardare e mi dispiace ma non riesco neanche a leggere il codice che hai scritto, o comunque ci metterei molto più tempo a capirlo che a riscriverlo, è molto confusionario e ci sono delle cose che sono logicamente (e purtroppo in modo importante) sbagliate.
Ti consiglio vivamente di, con i consigli delle precedenti risposte, provare a riscrivere da 0 tutta la logica tenendo un filo unico con le librerie che usi (se usi jQuery, usalo bene e ovunque - altrimenti rimani su VJS).
Inoltre, ti prego, cerca di essere ordinato - se dovessi mai lavorare su un progetto grande la mantenibilità è forse una delle cose più importanti, se la code base è illeggibile è impossibile mantenere il progetto.
Se ti riferisci al log nella console, è letteralmente lo stesso problema di qualche risposta fa che si ripresenta, stai cercando di usare una funzione jQuery su un elemento VJS.
Quando riformulerai una logica che sia leggibile sarò felice di darti una mano come nelle precedenti risposte, così è solo controproducente per te.
ho provato a corregere li errori ma ancora la console mi segnala errori
JavaScript:
cont =0;
rotate = 0;
$(".file_input")[cont].on("change", () => {
//cont++;
//rotate -= 90;
div = document.createElement("div");
for(let file of $(".fileInput")[cont].files) {
var image = file
if (image) {
var imageElement = new Image();
imageElement.src = URL.createObjectURL(image);
imageElement.width = 100;
var imageElement2 = new Image();
imageElement2.src = "https://img.icons8.com/material-two-tone/24/000000/rotate-left.png";
//imageElement2.width = 100;
var imageElement3 = new Image();
imageElement3.src="https://img.icons8.com/material-rounded/24/000000/rotate-right.png";
var imageElement4 = new Image();
imageElement4.src="https://img.icons8.com/material-two-tone/24/000000/remove-image.png";
document.getElementById('gallery').appendChild(div);
div.appendChild(imageElement2);
div.appendChild(imageElement3);
div.appendChild(imageElement4);
div.appendChild(imageElement);
$(imageElement2).click(function(){
rotate = rotate - 90;
// rrotate = rotate + 90;
console.log(7)
$(imageElement).css("transform", "rotate("+rotate+"deg)");
// $(imageElement).css("transform", "rotate("+lrotate+"deg)");
});
$(imageElement3).click(function(){
// lrotate = rotate - 90;
rotate = rotate + 90;
console.log(7)
// $(imageElement).css("transform", "rotate("+lrotate+"deg)");
$(imageElement).css("transform", "rotate("+rotate+"deg)");
});
$(imageElement4).click(()=>{
$(imageElement).css("display","none");
})
}
}
$("img").click(function(){
console.log(4);
})
cont++
});
//cont=0;
$("#addimg").click(()=>{
// cont++
$(".file_input")[cont].click();
})Uncaught TypeError: $(...)[cont].on is not a function
<anonymous> http://localhost/main.js:56
jQuery 13
Ultima modifica:
Scusa ho controllato varie volte il codice e non ho trovato elementi plain js in cui uso jq, potresti indicarmeli x favore? E poi quali sarebbero questi gravi errori di logica?
Messaggio unito automaticamente:
Ciao dany buongiorno, scusami sto ricontrollando adesso il codice ma non ho ancora individuato l errore, ho fatto come mi hai detto cioe usare jquery anche se qualche elemento e rimasto in vjs cioe solo quelli che creano nuovi elementi
Messaggio unito automaticamente:
neanche usando il metodo eq x li elementi array jq va
JavaScript:
$(document).ready(function(){
$(".menu").siblings().hide();
$("#submit").show();
//$("input[type='submit']").show();
//$("input[type='file']").show();
$("#gallery").show();
//$('.menu, .submenu, .scarpe').val('select');
$(".menu, .submenu1, .submenu2, .misure_magliette").on("change", function(){
val = $(this).val();
console.log(val);
$("."+val).show();
console.log($(this).attr("class"));
if($(this).attr("class") == "menu"){
$("."+val).show();
$("."+val).siblings().hide();
$("#submit").show();
$(".menu").show();
console.log("ok")
}
if($(this).attr("class") == "submenu1" || $(this).attr("class") == "submenu2"){
$("#gallery").show();
}
// $("."+val).val('select');
// $("."+val).siblings().hide();
});
$("input[type='number']").mouseout(function(){
console.log($(this).val());
})
$("input[type='submit']").mouseover(function(){
})
//var fileInput = document.getElementById('file_input');
//fileInput = $(".file_input");
cont =0;
rotate = 0;
$(".file_input").eq(cont).on("change", () => {
//cont++;
//rotate -= 90;
div = document.createElement("div");
for(let file of $(".file_input").eq(cont).files) {
var image = file
if (image) {
var imageElement = new Image();
imageElement.src = URL.createObjectURL(image);
imageElement.width = 100;
var imageElement2 = new Image();
imageElement2.src = "https://img.icons8.com/material-two-tone/24/000000/rotate-left.png";
//imageElement2.width = 100;
var imageElement3 = new Image();
imageElement3.src="https://img.icons8.com/material-rounded/24/000000/rotate-right.png";
var imageElement4 = new Image();
imageElement4.src="https://img.icons8.com/material-two-tone/24/000000/remove-image.png";
document.getElementById('gallery').appendChild(div);
div.appendChild(imageElement2);
div.appendChild(imageElement3);
div.appendChild(imageElement4);
div.appendChild(imageElement);
$(imageElement2).click(function(){
rotate = rotate - 90;
// rrotate = rotate + 90;
console.log(7)
$(imageElement).css("transform", "rotate("+rotate+"deg)");
// $(imageElement).css("transform", "rotate("+lrotate+"deg)");
});
$(imageElement3).click(function(){
// lrotate = rotate - 90;
rotate = rotate + 90;
console.log(7)
// $(imageElement).css("transform", "rotate("+lrotate+"deg)");
$(imageElement).css("transform", "rotate("+rotate+"deg)");
});
$(imageElement4).click(()=>{
$(imageElement).css("display","none");
})
}
}
$("img").click(function(){
console.log(4);
})
cont++
});
//cont=0;
$("#addimg").click(()=>{
// cont++
$(".file_input").eq(cont).click();
})
/*
imageElement2.addEventListener("click", ()=>{
})
*/
})<anonymous> http://localhost/main.js:65
jQuery 8
<anonymous> http://localhost/main.js:58
jQuery 13
main.js:65:42
Ciao,
Ti rinnovo l'invito a riscrivere la logica da capo, facendo tesoro dei consigli nelle risposte al topic.
Per come è scritto adesso il codice si fa più fatica a leggerlo e capire i problemi che riscriverlo da 0 – dato che (spero) sei interessato ad imparare qualcosa – sarebbe assolutamente controproducente scriverti la soluzione ai problemi fornendoti la pappa pronta e, al contrario, assolutamente ORO che tu sbatta la testa sul problema e provi a risolverlo ripartendo da capo.
Ti consiglio inoltre nuovamente di leggere la documentazione di jQuery, hai ancora dubbi sulla differenza tra elementi jq e plain, è abbastanza grave nell'ottica del fatto che vuoi utilizzare la libreria.
ho usato il metodo eq di query , ma neanche cosi funziona, -- scusa ma x poi che ci provo non riesco a identificare il problema
Ciao;
stai provando ad andare da Milano a Roma passando per la Grecia, ti stai complicando la vita usando delle funzioni che non servono (e una logica sbagliata).
Perchè stai facendo questa cosa? Non ha senso, stai usando un contatore per assegnare dei listener a degli elementi quando puoi usare un ciclo normalissimo e usare poi la referenza di ogni elemento per tirare fuori i file presenti.
E potrei indicarti anche altre cose che non hanno senso.
Fai uno wipe completo del codice, riscrivilo da capo e io ti aiuterò a capire e risolvere eventuali (nuovi) problemi.
Capisci che per chi ti aiuta leggere 100 righe di codice in cui ci sono cose del genere è veramente difficile oltre che controproducente per te stesso?
stai provando ad andare da Milano a Roma passando per la Grecia, ti stai complicando la vita usando delle funzioni che non servono (e una logica sbagliata).
JavaScript:
$(".file_input").eq(cont).on("change", () => {
div = document.createElement("div");
for(let file of $(".file_input").eq(cont).files) {
...Perchè stai facendo questa cosa? Non ha senso, stai usando un contatore per assegnare dei listener a degli elementi quando puoi usare un ciclo normalissimo e usare poi la referenza di ogni elemento per tirare fuori i file presenti.
E potrei indicarti anche altre cose che non hanno senso.
Fai uno wipe completo del codice, riscrivilo da capo e io ti aiuterò a capire e risolvere eventuali (nuovi) problemi.
JavaScript:
// $("."+val).val('select');
// $("."+val).siblings().hide();
});
$("input[type='number']").mouseout(function(){
console.log($(this).val());
})
$("input[type='submit']").mouseover(function(){
})
//var fileInput = document.getElementById('file_input');
//fileInput = $(".file_input");Capisci che per chi ti aiuta leggere 100 righe di codice in cui ci sono cose del genere è veramente difficile oltre che controproducente per te stesso?
Broo la documentazione a cui mi apogio io e quella di w3school xke mi e piu facile da capire e anche xke ce il edjtore incluso x provare i codici.. le altre guide quali html.it e simili nn li capjsco tanto bene e figuriati la guida ufficiale di jquery scritta in inglese... Tu mi hai detto di usare jquery e io l sto usando, nn capisco dove sta il problema
Ultima modifica:
Scusa l.ignoranza, che vuol dire wipe? Cmq assegno un listener agli elementi usando un contatore perche logicamente il primo elemento rimane in ascolto e una volta che viene attivato la var cont sale e quindi il prossimo elemento rimane in ascolto e cosi via, nn capisco che ce che nn va in questa logica
Messaggio unito automaticamente:
Scusami comunque non ho ancora capito perche mi la consola mi segnala questo errore:
Uncaught typeerror $(...).eq(...).files is undefined
Messaggio unito automaticamente:
cioe fare cosi
JavaScript:
cont = 0;
$(".file_input").eq(cont).on("change", () => {
//cont++;
//rotate -= 90;
div = document.createElement("div");
for(let file of $(".file_input").eq(cont).files) {
var image = file
if (image) {
var imageElement = new Image();
imageElement.src = URL.createObjectURL(image);
imageElement.width = 100;
var imageElement2 = new Image();
imageElement2.src = "https://img.icons8.com/material-two-tone/24/000000/rotate-left.png";
//imageElement2.width = 100;
var imageElement3 = new Image();
imageElement3.src="https://img.icons8.com/material-rounded/24/000000/rotate-right.png";
var imageElement4 = new Image();
imageElement4.src="https://img.icons8.com/material-two-tone/24/000000/remove-image.png";
document.getElementById('gallery').appendChild(div);
div.appendChild(imageElement2);
div.appendChild(imageElement3);
div.appendChild(imageElement4);
div.appendChild(imageElement);
$(imageElement2).click(function(){
rotate = rotate - 90;
// rrotate = rotate + 90;
console.log(7)
$(imageElement).css("transform", "rotate("+rotate+"deg)");
// $(imageElement).css("transform", "rotate("+lrotate+"deg)");
});
$(imageElement3).click(function(){
// lrotate = rotate - 90;
rotate = rotate + 90;
console.log(7)
// $(imageElement).css("transform", "rotate("+lrotate+"deg)");
$(imageElement).css("transform", "rotate("+rotate+"deg)");
});
$(imageElement4).click(()=>{
$(imageElement).css("display","none");
})
}
}
$("img").click(function(){
console.log(4);
})
cont++
JavaScript:
cont = 0;
$(".file_input").eq(0).on("change", () => {
//cont++;
//rotate -= 90;
div = document.createElement("div");
for(let file of $(".file_input").eq(0).files) {
var image = file
if (image) {
var imageElement = new Image();
imageElement.src = URL.createObjectURL(image);
imageElement.width = 100;
var imageElement2 = new Image();
imageElement2.src = "https://img.icons8.com/material-two-tone/24/000000/rotate-left.png";
//imageElement2.width = 100;
var imageElement3 = new Image();
imageElement3.src="https://img.icons8.com/material-rounded/24/000000/rotate-right.png";
var imageElement4 = new Image();
imageElement4.src="https://img.icons8.com/material-two-tone/24/000000/remove-image.png";
document.getElementById('gallery').appendChild(div);
div.appendChild(imageElement2);
div.appendChild(imageElement3);
div.appendChild(imageElement4);
div.appendChild(imageElement);
$(imageElement2).click(function(){
rotate = rotate - 90;
// rrotate = rotate + 90;
console.log(7)
$(imageElement).css("transform", "rotate("+rotate+"deg)");
// $(imageElement).css("transform", "rotate("+lrotate+"deg)");
});
$(imageElement3).click(function(){
// lrotate = rotate - 90;
rotate = rotate + 90;
console.log(7)
// $(imageElement).css("transform", "rotate("+lrotate+"deg)");
$(imageElement).css("transform", "rotate("+rotate+"deg)");
});
$(imageElement4).click(()=>{
$(imageElement).css("display","none");
})
}
}
$("img").click(function(){
console.log(4);
})
cont++
Messaggio unito automaticamente:
Cmq scusa se suono confuso, preparero una spiegazione migliore
Ecco ^_^ a quanto pare il problema era quello, il metodo files del elemento input che funziona solo con vjs... Cmq visto che vogliamo jquerizzare tutto, mi chiedevo se con jquery si potessero creare nuovi elementi nel domWipe vuol dire pulire.
Perché vuoi usare un contatore in quel modo quando puoi benissimo usare un ciclo? E poi, dato che il contatore viene aumentato nell'evento, i nuovi listener verranno registrati solo se i precedenti sono stati triggerati (qui l'errore logico grave).
Evidentemente $(...).eq(...) non è un oggetto che ha la proprietà files, questo è quello che la console ti sta indicando.
Comunque sono confuso, ti ho postato una soluzione con un codice riscritto da 0, funzionante e pulito e mi chiedi di nuovo cose sul vecchio codice, ancora confusionario e con gli stessi errori logici di prima? Mi sono perso qualcosa?
Sinceramente non so più come aiutarti, non sto capendo più neanche io quali siano le domande
ei sono riuscito a farlo funzionare ma non del tutto, cioe riesco solo a caricare 1 foto e a vedere l anteprima di questa foto, e se poi premo la imagine incaricata di caricare le foto, non va piu, non vedo nuove foto e non vedo manco errori nella console
Vedi: https://jsfiddle.net/txum2wq1/
Vedi: https://jsfiddle.net/txum2wq1/
Si lo letto ma nn ci ho capito tanto, cmq vedi che ho impostato il listenee e la chiamata al metodo files con vjs,.. la prima volta che uso il bottoe x caricare la foto funziona, ma le altre no, e non capiscoJavaScript:fileInput[cont].addEventListener("change", ()=>{
scusa ma hai letto quello che ho scritto nelle risposte precedenti?
Non ha senso quello che stai facendo. Guarda la soluzione che ti ho proposto, perfettamente funzionante, e prendi spunto...
Si so che funziona, ma piu che altro vorrei capire perché il mio codice non funziona
Non funziona perché non ha senso quello che stai cercando di fare, non so più come spiegartelo.
Hai un contatore settato a 0 che va ad applicare l'event listener all'oggetto dell'array in posizione counter (quindi iniziale = 0).
Quindi, per il primo elemento il listener funzionerà sempre mentre per gli altri no, visto che non vengono assegnati altri eventi.
Hai un contatore settato a 0 che va ad applicare l'event listener all'oggetto dell'array in posizione counter (quindi iniziale = 0).
Quindi, per il primo elemento il listener funzionerà sempre mentre per gli altri no, visto che non vengono assegnati altri eventi.
Scusami guarda, io ho impostato il listener al primo input file usando il contatore e al primo funziona okay, ma poi come vedi il contatore cresci di uno alla fine del change, e quindi dopo finito di usare il primo listener in automatico dovrebbe attivarsi il listener del secondo elemento input file visto che il contatore da 0 diventa 1.
infatti avevi ragione, condivido la soluzione qua, ora nn resta che poter inviare tutti queste immagine al server, e finora non ho mai fatto una cosa del genere, cioe prima con ajax inviavo solo dati testo, ora non saprei, secondo te conviene farlo con ajax e jq o usare vjs?Non funziona così, sarebbe una magia se ti funzionasse: il listener non viene assegnato automaticamente solo perché il contatore aumenta.
Stai facendo un errore logico abbastanza grave.
Tu stai assegnando un listener ad UN elemento (il primo), poi quando viene triggerato l'evento il contatore aumenta ma tu non stai assegnando alcun listener nuovo.
Per far sì che funzioni potresti wrappare l'assegnazione dei listener sugli elementi in una funzione che viene chiamata ogni volta che aggiungi un'immagine.
Comunque ti ripeto, guarda il codice che ho scritto per renderti conto di come fare
Vedi: https://jsfiddle.net/ju2730dq/
we ho trovato questo esempio di fetch ma non saprei come adattarlo al mio codice
JavaScript:
fetch("https://www.html.it/api/articoli", {
method: "post",
headers: new Headers({
"Content-Type": "application/x-www-form-urlencoded; charset=UTF-8
}),
body: new FormData(document.getElementById("titolo"), document.getElementById("autore"))
}).then(...).catch(...)Guarda la documentazione ufficiale: Using Fetch
Spiegano per filo e per segno come usarlo e nel dettaglio cosa fa ogni riga che scrivi!
Spiegano per filo e per segno come usarlo e nel dettaglio cosa fa ogni riga che scrivi!
- Stato