Upload an image by using jquery and ajax

Question

I'm trying to upload a photo by using ajax.

My input:

<input type="file" name="defaultPhoto">

A part of my jQuery code.

var form = #insertCredentials

var defaultPhoto = $('#' + form + ' ' + '[name = "defaultPhoto"]').prop('files');

I'm sending defaultPhoto through an ajax call to my php alongside with other form inputs.

The console gives back this error below:

TypeError: 'slice' called on an object that does not implement interface Blob.

Answer 1

you can't send file via ajax try to use hidden iframe in form target with normal submit

<form name="" action="/your_iframe_action_url" taget="hidden_iframe_name">

<input type="file" />
<input type="submit" />
</form>

<iframe name="hidden_iframe_name" style="width:0; height:0" />

In your_iframe_action_url you can call javascript parent functions to execute event success or failure... that simulate underground upload

Answer 2

you can use document.getElementById('whatever').files;

to get the file and then use

formdata

to send the files via ajax.

here is the example

you can also use File reader to show file on loaded

here is the example for filereader

Answer 3

I have implemented the AJAX way of file uploading using Dropzone JS. It will really make your life simple

Check the Dropzone.js Website

All you need to do is instantiate the dropzonejs object and set the options

Dropzone.options.myAwesomeDropzone = {
      paramName: "file", // The name that will be used to transfer the file
      maxFilesize: 2, // MB
      accept: function(file, done) {
        if (file.name == "image.jpg") {
          done("Naha, you don't.");
        }
        else { done(); }
      }
    };