JS - get filename with Ajax

Question

I am trying to get the extension and name of a file using Ajax.

My ajax code looks like:

$.ajax({
    type: "POST",
    url: url,
    data: $("#updateMember").serialize(), 
    mimeType: "multipart/form-data",
    contentType: false,
    cache: false,
    processData: false,
    success: function (data) {
        alert(data);
    }
});

In PHP I have this

$imageFileType = pathinfo($_FILES["input9"]["name"], PATHINFO_EXTENSION);
echo $imageFileType;

and my html is

<form method="post" enctype="multipart/form-data" id="updateMember">
    <input id="input-9" name="input9" type="file" class="file file-loading" data-allowed-file-extensions='["png", "jpg", "gif", "jpeg"]' style="top: 0px;">
    <li class="menu__item"><input name="offerUpload" id="dashOffersBtn" class="menu__link menu_input btnDashboard" style="margin: 0 auto; height:20px;padding: 0;padding-bottom: 22px;width: 70%;" type="button" value="SAVE"></li>
</form>

but it seems to not work. What am I doing wrong?

"*but it seems to not work*" Which begs the question: *What* does not work? — mferly, May 15 '16 at 20:45
@SNos $("#updateMember").serialize() is a problem , you have to use FormData(); — Arsh Singh, May 15 '16 at 20:48
I am trying using it like `var fd = new FormData(); fd.append('file', $("#input-9").files[0]);` but I get that files is not an object — SNos, May 15 '16 at 20:55
@Snos You can target the whole form with FormData(); var fd = new FormData('#updateMember'); — Arsh Singh, May 15 '16 at 20:56

Arsh Singh · Accepted Answer · 2016-05-15T21:39:15.183

1

You have to use FormData() to make this possible, serialize or serializeArray() does not support file api's use the below solution :

Main update for working solution

I did update the Save button's type from button to submit please use the below html :

<form method="post" enctype="multipart/form-data" id="updateMember">
    <input id="input-9" name="input9" type="file" class="file file-loading" data-allowed-file-extensions='["png", "jpg", "gif", "jpeg"]' style="top: 0px;">
    <li class="menu__item">
    <input name="offerUpload" id="dashOffersBtn" class="menu__link menu_input btnDashboard" style="margin: 0 auto; height:20px;padding: 0;padding-bottom: 22px;width: 70%;" type="submit" value="SAVE">
    </li>
</form>

and use the below jquery code to make it work

jQuery('#updateMember').submit(function(e){
           e.preventDefault();
            var data = new FormData(this);
                $.ajax({
                    type: "POST",
                    url: 'upload.php',
                    data: data, 
                    mimeType: "multipart/form-data",
                    contentType: false,
                    cache: false,
                    dataType: "html",
                    processData: false,
                    success: function(data) {
                        alert(data);
                    }
                });
        });

also use the below php code for extension :

$data = $_FILES['input9'];
$data_ext = explode('/',$data['type']);
$extension = $data_ext[1];
echo $extension;

My test index.php code

http://pastebin.com/L81xUbxL

Change Url To your target url.

Old non working

 var data = new FormData('#updateMember');
    $.ajax({
        type: "POST",
        url: url,
        data: data, 
        mimeType: "multipart/form-data",
        contentType: false,
        cache: false,
        dataType: "html",
        processData: false,
        success: function(data) {
            alert(data);
        }
    });

for getting an extension you can do this

$path_ = pathinfo($_FILES["input9"]["name"]);
$extension = $path_['extension'];
echo $extension;

edited May 15 '16 at 21:39

answered May 15 '16 at 20:59

Arsh Singh

1,580
1
11
31

Thanks still get an empty alert.I cannot get the file extension – SNos May 15 '16 at 21:03
something I do is wrong.. still getting an empty alert – SNos May 15 '16 at 21:07
even If i echo path_ I get nothing – SNos May 15 '16 at 21:08
do a var_dump($path_); and tell me what you get – Arsh Singh May 15 '16 at 21:09
I get ------ `array(2) { ["basename"]=> string(0) "" ["filename"]=> string(0) "" } ` – SNos May 15 '16 at 21:10
@SNos hey wait 2 min , let me try your code and get back to you just 2 mins – Arsh Singh May 15 '16 at 21:11
@SNos Hey , i have rewamped the code for you , let me just put it in my answer including the html and javascript code – Arsh Singh May 15 '16 at 21:16
1

@SNos do check my answer. Check the part after tagline :Main update for working solution – Arsh Singh May 15 '16 at 21:19
@SNos i'm also adding the php part for extension , old one will not work – Arsh Singh May 15 '16 at 21:20
now I get `TypeError: undefined is not an object (evaluating 'this[0].form')` – SNos May 15 '16 at 21:30
@SNos , that is not related to my code , did you replace the whole jquery code with mine ? it does not seem that you have used my jquery code , for me it's working without any problem. – Arsh Singh May 15 '16 at 21:32
@SNos , i have pasted my index.php 's full code for you to take a look at and see what you are doing wrong. – Arsh Singh May 15 '16 at 21:35
Thank you so muchhhh.. I had your code inside `$(document).ready(function` .. It is working very good now – SNos May 15 '16 at 21:38
@SNos you are welcome. always try to dump the arrays to check what they are providing to you. – Arsh Singh May 15 '16 at 21:39
Yes I will do it. Now I have to find the way to add the rest of my code to it.. But this was so helpful – SNos May 15 '16 at 21:40
@SNos don't worry , you will do it (Y) , it's pretty much easy. – Arsh Singh May 15 '16 at 21:41

JS - get filename with Ajax

1 Answers1