Solved

How to send image and data using ajax

Posted on 2016-09-07
6
88 Views
1 Endorsement
Last Modified: 2016-09-27
I want to change profile information. There are 4 input box and 2 input file type.
i can't passing input box value and input file type image using Ajax,
1
Comment
Question by:Pravin Bnakar
  • 2
  • 2
6 Comments
 
LVL 109

Expert Comment

by:Ray Paseur
ID: 41787615
What is the question?  Do you need to have an example of AJAX so you can build upon it for your app?  Or have you got something that is giving you an error?
0
 

Author Comment

by:Pravin Bnakar
ID: 41787627
I want post image and other data like user name via jquery AJAX to php server .
Here is My form
<form id="datafiles" method="post" enctype="multipart/form-data">
    <input type="text" name="first" value="Bob" />
    <input type="text" name="middle" value="James" />
    <input type="text" name="last" value="Smith" />
    <input name="image" type="file" />
    <button type="button" class="send_data">Submit</button>
</form>
0
 
LVL 54

Accepted Solution

by:
Julian Hansen earned 500 total points
ID: 41787707
This code should do it
    <form>
      Your Name: <input type="text" name="name" value="fred" readonly/> <br/>
      File #1 <input type="file" name="file1" /> <br/>
      File #2 <input type="file" name="file2" /> <br/>
      <input type="submit" />
    </form>
    <div id="result"></div>

Open in new window

jQuery
$(function() {
  $('form').submit(function() {
    var formData = new FormData($(this)[0]);
    $.ajax({
      url: 'reflect.php',
      type: 'POST',
      data: formData,
      cache: false,
      contentType: false,
      processData: false
    }).then(function(data) {
      $('#result').html(data);
    });    
    return false;
  });
});

Open in new window

Working sample here
0
 

Author Comment

by:Pravin Bnakar
ID: 41787714
What does below line indicate :
var formData = new FormData($(this)[0]);
0
 
LVL 54

Expert Comment

by:Julian Hansen
ID: 41787752
FormData gets all the data from a Form and makes it available for use in an AJAX request. You can read more about it here
https://developer.mozilla.org/en/docs/Web/API/FormData
EDIT
This differs from the jQuery serialize() method which does not serialize file data. FormData will serialize any files included in the form.
0

Featured Post

3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
3 proven steps to speed up Magento powered sites. The article focus is on optimizing time to first byte (TTFB), full page caching and configuring server for optimal performance.
Learn how to match and substitute tagged data using PHP regular expressions. Demonstrated on Windows 7, but also applies to other operating systems. Demonstrated technique applies to PHP (all versions) and Firefox, but very similar techniques will w…
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.

803 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question