File Upload Without Form

File upload using Jquery ajax without form

You can do it like following. Hope this will help you.

function addPackage(elem)
{
    var dataimg = new FormData();
    dataimg.append('startdate', $("#from_date"+elem).val());
    dataimg.append('enddate', $("#to_date"+elem).val());
    dataimg.append('packageid', elem);
    dataimg.append('img', $("#browseimg"+elem)[0].files[0]);

    $.ajax({
        url: "addpackage/",
        type:"post",
        cache : false,
        contentType : false,
        processType : false,
        data: dataimg,
        success: function(data) {
        }
    });
}

Uploading an image without form submitting

See to the following changes:

<input type='file' name='inputfile' id='inputfile'>

Here's how you should have sent the ajax request:

$(document).ready(function() {
    $('#inputfile').change(function(){
        var file_data = $('#inputfile').prop('files')[0];   
        var form_data = new FormData();                  
        form_data.append('file', file_data);
        $.ajax({
            url: "pro-img-disk.php",
            type: "POST",
            data: form_data,
            contentType: false,
            cache: false,
            processData:false,
            success: function(data){
                console.log(data);
            }
        });
    });
});

And lastly, here's how you should have processed the form data:

$src = $_FILES['file']['tmp_name'];
$targ = "../images/".$_FILES['file']['name'];
move_uploaded_file($src, $targ);

Flask uploading files to flask without form

Okay i found a thread on here that solved my issues. Here it is: How to upload a file using an ajax call in flask
Hope this helps anyone with the same issue as me !

How to send a file using AJAX call without form data

You can send your files as raw file buffer as follows:

var input = $('#input');

input.change(function(event) {
  var file = this.files[0];
  if (!file) return;

  return $.ajax({
    url: '/django-route', // your route to process the file
    type: 'POST', //
    data: file,
    processData: false,
    contentType: 'application/octet-stream', // set Content-Type header
    success: function(respnse) {
      // do something
    },
    error: function(xhr, textStatus, errorThrown) {
      // do something else
    }
  });
});

If you need to track the progress of your file upload, add the xhr to $.ajax() options:

xhr: function() {
  var xhr = new window.XMLHttpRequest();
  xhr.upload.addEventListener('progress', function(event) {
    if (event.lengthComputable) {
      var progress = Math.floor(10000 * event.loaded / event.total) / 10000;
      console.log(progress); // 0.2536 (25.36%)
    }
  }, false);
  xhr.addEventListener('progress', function(event) {
    if (event.lengthComputable) {
      var progress = Math.floor(10000 * event.loaded / event.total) / 10000;
      console.log(progress);
    }
  }, false);
  return xhr;
}

how to add file data in ajax call without using FormData?

file upload is not possible through ajax. You can upload file, without refreshing page by using IFrame. you can check further detail here

With XHR2, File upload through AJAX is supported. E.g. through
FormData object, but unfortunately it is not supported by all/old
browsers.

FormData support starts from following desktop browsers versions. IE
10+, Firefox 4.0+, Chrome 7+, Safari 5+, Opera 12+

For more detail, see MDN link

---

Related Topics