Loading...
Copy code
Close
Permalink
Close
Please tell us why you want to mark the subject as inappropriate.
(Maximum 200 characters)
Report Inappropriate
Cancel
Private Message
From :
guest
To :
Subject :
Content :
Type the characters you see in the picture below.
Send
Cancel
From :
guest
To :
Subject :
Content :
Type the characters you see in the picture below.
Send
Update
Cancel
Feedback
Email ID
Subject :
Comments :
Send
Cancel
Private Message
Type the characters you see in the picture below.
Type the characters you see in the picture below.
Attach files
Desktop
Google Docs
Each Attachment size should not exceed 1.0 MB.
Max no of attachments : 3
Loading User Profile...
guest
Response title
This is preview!
Attachments
Publish
Back to edit
Cancel
(
)
Sign In
New to this Portal? Click here to
Sign up
You can also use the below options to login
Login with Facebook
Login with Google
Login with Yahoo
jQuery
Plugins
UI
Meetups
Forum
Blog
About
Donate
All Forums
Recent Posts
Log In
Search
jQuery
Search
jQuery Forum
Move this topic
Forum :
Getting Started
Using jQuery
Using jQuery Plugins
Using jQuery UI
Developing jQuery Core
Developing jQuery Plugins
Developing jQuery UI
QUnit and Testing
About the jQuery Forum
jQuery Conferences
jQuery Mobile
Developing jQuery Mobile
Sub forum :
Move this topic
Cancel
Using jQuery
Arthur Gu..
Sending post data and file data in the same ajax request
in
Using jQuery
•
4 years ago
Hello, everyone! I'm currently experiencing a problem where I don't know how to send text data via post and files.
Here is my code:
$(".form").submit(function(e) {
e.preventDefault(); // avoid to execute the actual submit of the form.
var url = $(this).attr("action"); // the script where you handle the form input.
$.ajax({
type: "POST",
url: url,
data: $("#form").serialize(), // serializes the form's elements.
success: function(data)
{
// var obj = jQuery.parseJSON( data );
alert(data); // show response from the php script.
}
});
});
And, here my HTML code:
<form class="form" id="form" action="
http://localhost:8888/api/addPost.php"
method="POST">
<div class="list">
<label class="item item-input">
<input type="text" placeholder="Title" class="AddPosttitle" name="title">
</label>
<label class="item item-input">
<input class="description" type="text" placeholder="Simple Description (max 60 caracters)" maxlength="60" name="description">
</label>
<label class="item item-input">
<div>
<span id='button_upload'>Image : </span>
<input type='file' class="img" name="img">
</div>
</label>
<label class="item item-input">
<textarea placeholder="Full description" class="full" name="full"></textarea>
</label>
<div class="padding">
<button class="button button-block button-positive submit-btn" type="submit">
Submit
</button>
</div>
</div>
</form>
Basicaly, it returns me the text, but not the file, and I don't want to do 2 ajax requests
1
Reply
Replies(5)
jakecigar
Re: Sending post data and file data in the same ajax request
4 years ago
You can’t serialize a type=file.
If you are targeting browsers back to ie8, you probably need to submit to an iframe.
If you are targeting more current browsers you can send a FormData Object instead.
JΛ̊KE
Arthur Gu..
Re: Re: Sending post data and file data in the same ajax request
4 years ago
Well, I already tried the FormData option on Chrome, but it doesn't work for me, could you give me a snippet?
Leave a comment on jakecigar's reply
jakecigar
Re: Sending post data and file data in the same ajax request
4 years ago
Sure…
$.ajax({
url: "…",
type: "POST",
processData: false,
contentType: false,
data: fd, // the FormData
})
The syntax is strange because $.ajax predates the FormData. It’s easier with window.fetch!
JΛ̊KE
Arthur Gu..
Re: Re: Sending post data and file data in the same ajax request
4 years ago
Sorry, you didn't understand me, this part, I know how to do it, when I put
var fd = new Formdata($(".form"));
It gives me an error
Leave a comment on jakecigar's reply
jakecigar
Re: Sending post data and file data in the same ajax request
4 years ago
var fd = new
FormData
($(".form")
[0]
); // the form element, not a jQuery collection.
FormData doesn’t know about jQuery. It takes a form element.
Usually inside a submit handler we code
var fd = new
FormData
( this
); // this is the form.
JΛ̊KE
Leave a comment on jakecigar's reply
Change topic type
Topic Type :
Discussions
Questions
Ideas
Problems
No of days :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
Change topic type
Cancel
Link this topic
Provide the permalink of a topic that is related to this topic
Permalink
Save
Close
Reply to Arthur Guiot's question
Top
Reply
{"z641064966":[14737000007146477,14737000007146490,14737000007146492],"z2950240":[14737000007150840,14737000007150852,14737000007150854]}
Statistics
5
Replies
16679
Views
1
Followers
Tags
Cancel
ajax
html
upload
forms
dom
files
post
Actions
Permalink