How to send upload files using ajax?

Question

I want to upload files with ajax.

I have tried dropzone and ajaxupload, but both libraries are not working.

So I tried to do it on my own. Here is my input type file code:

<input id="le_images" class="form-control" type="file" name="images[]" multiple>

and here is my jQuery code

$('#le_images').change(function(){
  var file_data = $(this).prop("files");
        $.ajax({
            url:"upload.php",
            type:'POST',
            data:{
                'file' : file_data
            },
            success:function(results){ 

            }
        });
});

Now I am sending this files on upload.php with above code. But I did not receive this. Can you tell me where am I wrong?

So can you guys suggest me how to do this?

Possible duplicate of [How can I upload files asynchronously?](http://stackoverflow.com/questions/166221/how-can-i-upload-files-asynchronously) — Shubham Khatri, Sep 19 '16 at 11:26

score 0 · Answer 1 · answered Sep 19 '16 at 11:25

0

For image update use Formupload

var formData = new FormData($('form')[2]);

and you can move the uploaded image to your folder and you can see the image there

in php

$logoval=$_FILES['userfile']['name'];
                $target_file = "../".basename($logoval);
                move_uploaded_file($_FILES['userfile']['tmp_name'],$target_file);

answered Sep 19 '16 at 11:25

Joyson

370
4
18

i dont have form element still i can use it?? – sanjay rathod Sep 19 '16 at 11:27
If you dont have form you canot use this type – Joyson Sep 19 '16 at 11:50

score 0 · Answer 2 · answered Sep 19 '16 at 11:34

If you don't have form element so here you go:

<script>
$(document).on("click", "#fileUpload", function() {
  var file_data = $("#le_images").prop("files")[0];
  var form_data = new FormData();
  form_data.append("file", file_data)

  $.ajax({
    url: "upload.php",
    dataType: 'script',
    cache: false,
    contentType: false,
    processData: false,
    data: form_data,
    type: 'post'
    success: function(data) {
      console.log(data)
    }
  });
});
</script>

<input id="le_images" type="file" name="le_images" />
<button id="fileUpload" value="Upload" />

score 0 · Answer 3 · answered Sep 19 '16 at 12:03

I suggest to use VanillaJS framework and AJAX technique to solve this problem. Also, consider that VanillaJS is fully implemented in browsers and you don't need to download additional files for your project

Lets dive into code, where I will show you simple example:

HTML

<input class="form-control" type="file" name="images[]" onclick='uploadMyFiles(); return false;' multiple>

VanillaJS

function uploadMyFiles()
{
    var formElement = document.querySelector(".form-control");
    var formData = new FormData();
    for(var i = 0; i < formElement.files.length; i++)
        formData.append("File"+i, formElement.files[i]);
    var xmlHttp = new XMLHttpRequest();
        xmlHttp.onreadystatechange = function()
        {
            if(xmlHttp.readyState == 4 && xmlHttp.status == 200)
                var responseText = JSON.parse(xmlHttp.responseText);
        }
        xmlHttp.open("POST", "--Your URL goes here");
        xmlHttp.send(formData);
}

score -1 · Answer 4 · answered Sep 19 '16 at 11:25

-1

Try with this:

$('#le_images').change(function(){
  var file_data = $(this).prop("files");
        $.ajax({
            url:"upload.php",
            type:'POST',
            data: formData,
            success:function(results){ 

            }
        });
});

A Simple example is given at Upload multiple images using jQuery, Ajax and PHP

answered Sep 19 '16 at 11:25

Sandeep Kokate

825
4
16

i dont have form element still i can use it?? – sanjay rathod Sep 19 '16 at 11:27

How to send upload files using ajax?

4 Answers4