CODEWITHSUNDEEP
javascriptjqueryhtmlfileinput
Juneyoung Oh
Juneyoung Oh

Reputation: 7642

How can I send input file without form tag?

I am trying to send file to server with HTML and JavaScript. The scenario like below :

  1. user clicks some button and it shows a div pop up.
  2. user inputs file with <input type='file'>.
  3. user presses button.
  4. send data to server and div pop up closes.

Note that all of these actions happen in one page. Only div pop up can be open and closed.

At first, I was trying to send data with a <form> tag, and it works fine. The problem is when I submit the form it changes the page.

So what I am trying to do is sending file data without using a form tag. I have searched web, it looks somehow impossible. Is there any alternative way to send file data in div pop up?

Thanks :D

Upvotes: 3

Views: 10854

Answers (2)

Juneyoung Oh
Juneyoung Oh

Reputation: 7642

I found a trick. It works, but I am not sure it is good way or not.

As you recommended, I use jQuery and ajax.

function sendUpgradeReq(id){
    var url = '/api/update.json';
    var form = $("#upgradeFrm");
    var data = new FormData(form[0]);

    $.ajax({
        type        : 'post',
        dataType    : 'json',
        url         : url,
        data        : data,
        enctype     : "multipart/form-data",
        cache       : false,
        contentType : false,
        processData : false,
        success     : function(data) {
            alert('Success!');
            $('#applyPop').css('display', 'none');
        },
        complete : function(data) {

        },
        error : function(data, status, error) {
            alert('Fail! :<');
            e.preventDefaultEvent();
        }
    });
}

I thought the most important part here is new FormData(). It takes complete file information from <input type='file'>.

Thanks :D

Upvotes: 1

Matheno
Matheno

Reputation: 4142

Have you considered doing it via JQuery?

You can post the values like this without a refresh:

$('#button').on('click', function(){
   $.post('/url/to/your/function', {'post': value}, function(data){
      if(data !== 0) {

      }
   }, "json");
});

You can find more info here

Edit:

It's not possible to upload files with jQuery $.post, neverthless, with the file API and XMLHttpRequest, it's perfectly possible to upload a file in AJAX, and you can even know how much data have been uploaded yet…

$('input').change(function() 
{
    var fileInput = document.querySelector('#file');

var xhr = new XMLHttpRequest();
xhr.open('POST', '/upload/');

xhr.upload.onprogress = function(e) 
{
    /* 
    * values that indicate the progression
    * e.loaded
    * e.total
    */
};

xhr.onload = function()
{
    alert('upload complete');
};

// upload success
if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 0))
{
    // if your server sends a message on upload sucess, 
    // get it with xhr.responseText
    alert(xhr.responseText);
}

var form = new FormData();
form.append('title', this.files[0].name);
form.append('pict', fileInput.files[0]);

xhr.send(form);
}

More info here

Upvotes: 2

Related Questions