First of all sorry if the question is very noob.
I need to learn how to manipulate the elements of the html with javascript (I think). Well I have this code below, which uploads the image, what I want to do is that the moment I clicked on the input I uploaded the images already go to the folder on the server.
This code loads the image and fills the thumb with it, as I can not use the submit button, I intend to do the javascript to accomplish this.
Sorry if I'm asking you something simple, but javascript is still new to me. : D
jQuery(function($) {
$('div').on('click', '.closeDiv', function() {
$(this).prev().remove();
$(this).remove();
$('#upload-file').val("");
});
var fileDiv = document.getElementById("upload");
var fileInput = document.getElementById("upload-file");
//var fileProgress = document.getElementById("progress");
fileInput.addEventListener("change", function(e) {
var filesVAR = this.files;
showThumbnail(filesVAR);
}, false);
function showThumbnail(files) {
var file = files[0];
var thumbnail = document.getElementById("thumbnail");
var pDiv = document.createElement("div");
var image = document.createElement("img");
var div = document.createElement("div");
//linha pra esconder o input depois do upload
var fileInput = document.getElementById("upload-file").style.display = "none";
pDiv.setAttribute('class', 'pDiv');
thumbnail.appendChild(pDiv);
image.setAttribute('class', 'imgKLIK5');
pDiv.appendChild(image)
div.innerHTML = "X";
div.addEventListener("click", function(event) {
console.log(event.target); // este é o elemento clicado
//Pra mostrar novamente o input
fileInput = document.getElementById("upload-file").style.display = "block";
})
div.setAttribute('class', 'closeDiv');
pDiv.appendChild(div)
image.file = file;
var reader = new FileReader()
reader.onload = (function(aImg) {
return function(e) {
aImg.src = e.target.result;
};
}(image))
var ret = reader.readAsDataURL(file);
var canvas = document.createElement("canvas");
ctx = canvas.getContext("2d");
image.onload = function() {
ctx.drawImage(image, 50, 40);
}
}
});