Upload Using Javascript

0

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);
        }
    }
});
    
asked by anonymous 09.12.2016 / 16:58

0 answers