Upload Using Javascript

Asked

Viewed 395 times

0

First excuse if the question is too Noob.

I need to learn how to manipulate html elements 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 cannot use the Ubmit button I intend to perform the javascript to accomplish this feat.

I’m 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);
        }
    }
});
  • 1

    It is not a problem to ask something simple, problem is not to ask clearly. Could [Dit] your question and explain better what you would like to do?

  • Javascript itself is not able to access the disk or database. For this is used some other language, such as PHP, Java, etc., or consume some web service. If your intention is to save the image in directory using javascript only, it will not work.

  • @Lucascosta, it is possible to have javascript running in the back end using Nodejs. The correct would be to state that the code executed on the client needs to communicate with some platform on the server to save this image, regardless of the language.

  • Diegogo, you have something running on the server that you want to save the file?

  • @Vinicius Com Node yes, but he only tagged Javascript

  • well, what I have is a php page containing this script.

  • how can I call a php page the moment Thumb was loaded, in my head, this is the time to save the image on the server that I would do with php.

  • You can fire the Submit button with $('#Submit'). Trigger();.

  • 1

    got it, thanks and thanks to everyone, I finally found a community where I can answer my questions :D

Show 4 more comments
No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.