Using Jasny file input to upload file to the server using PHP

Question

I am implementing Jasny File Input plugin. However, I can't get it upload to server.

HTML

<form method="post" id="formCreateMod" class="form form-horizontal" enctype="multipart/form-data" role="form">
    <div class="fileinput fileinput-new" data-provides="fileinput">
         <div class="fileinput-preview thumbnail" data-trigger="fileinput"></div>
         <div>
              <span class="btn btn-default btn-file"><span class="fileinput-new">Select image</span><span class="fileinput-exists">Change</span><input type="file" name="img"></span>
              <a href="#" class="btn btn-default fileinput-exists" data-dismiss="fileinput">Delete</a>
         </div>
    </div>
</form>

The above snippet is inside the <form> tag. Then I use post in jQuery to send the serialized data of the form to server.

I am expecting to get the content in php by using $_FILES['img']["name"] or $_FILES['img']["type"], but the result is NULL.

So how should I retrieve the image data in php after the image is being posted?

Any help will be appreciated!

Update

The following is how I post the form in jQuery.

var theForm = $('form');
$.post(location.href, theForm.serialize(), function(data) {
    // handle return data
});

Can you post your <form> tag in your code as well ? (Yes, it is important) — Florian F.
– Florian F., Commented Jan 27, 2014 at 12:26
@FlorianF. I don't quite get what you mean by post <form> tag. What I am currently posting is shown in the above under Update. Is that what you mean? Or is your way different? — Lancelot
– Lancelot, Commented Jan 27, 2014 at 20:51
@FlorianF. Sorry I didn't read it closely that you want me to post the <form> snippet. Not like post it to jquery. (Too much things) The <form> snippet is now updated above. Any clue? — Lancelot
– Lancelot, Commented Jan 29, 2014 at 0:52

Community · Accepted Answer · 2017-05-23 12:33:57Z

7

You can't post a file using ajax and form serialization.

You should check this answer which explains why.

However, you still have solutions :

Not using ajax and just submitting the form using enctype='multipart/form-data' attribute on the form

<form [...] enctype='multipart/form-data'></form>

Using FormData

var formData = new FormData();

// HTML file input user's choice...
formData.append("userfile", fileInputElement.files[0]);

var request = new XMLHttpRequest();
request.open("POST", "http://foo.com/submitform.php");
request.send(formData);

Using File API

var reader = new FileReader();

reader.onload = function(e) {
  var rawData = reader.result;
}

reader.readAsBinaryString(file);

edited May 23, 2017 at 12:33

CommunityBot

11 silver badge

answered Jan 29, 2014 at 13:17

Florian F.

4,70029 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Florian F. Over a year ago

Voting down without a comment ? Why do i bother trying to help :)

Lancelot Over a year ago

I didn't know file can't be uploaded with serialization. I'll try the methods you provided. And btw, my reputation won't let me vote down...

Lancelot Over a year ago

So with your FormData method above. How do I get the response from the server?

Florian F. Over a year ago

There's a pretty good example using jQuery ajax in this answer.

kamaci Over a year ago

How do you get file element from Jasny file input?

Collectives™ on Stack Overflow

Using Jasny file input to upload file to the server using PHP

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related