Member Avatar for chaitu11
chaitu11 0 Junior Poster

Code:

<div class="container">
    <div id="preview"></div>
    <form id="form" method="post" enctype="multipart/form-data">
    <div class="form-body">
    <div class="form-group">
      <label class="control-label col-md-3">Title</label>
      <div class="col-md-9">
        <input name="title" placeholder="Holiday" class="form-control" type="text">
      </div>
    </div>
    </div>
    <div class="form-body">
    <div class="form-group">
      <label class="control-label col-md-3">Image1</label>
      <div class="col-md-9">
        <input type='file' name='image1' class='form-control'>
        <img class="image1 img-thumbnail" style="display:none" alt="image1" width="100" height="100" /> </div>
    </div>
    </div>
    <div class="form-body">
    <div class="form-group">
      <label class="control-label col-md-3">Image2</label>
      <div class="col-md-9">
        <input type='file' name='image2' class='form-control'>
        <img class="image2 img-thumbnail" style="display:none" alt="image2" width="100" height="100" /> </div>
    </div>
    </div>

    <button type="button" id="btnSave" onclick="save()" class="btn btn-primary">Save</button>
    </form>
    <div id="err"></div>
    </div>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 

    <script type="text/javascript">
    function save() 
    {
        $.ajax
        ({
            url: "ajax.php",
            type: "POST",
            data:  new FormData(this),
            contentType: false,
            cache: false,
            processData:false,
            beforeSend : function()
            {
                $("#err").fadeOut();
            },
            success: function(data)
            {
            if(data=='invalid file')
            {
                $("#err").html("Invalid File !").fadeIn();
            }
            else
            {
                $("#preview").html(data).fadeIn();
                $("#form")[0].reset(); 
            }
            },
            error: function(e) 
            {
                $("#err").html(e).fadeIn();
            }          
        });
    };
    </script>
Edited by Reverend Jim because: Moved to programming forum
  • 1 Contributor
  • 0 Replies
  • 199 Views

Dani AI

Generated

— two common causes explain why the form data (and files) never reach ajax.php.

First, calling save() from the button with onclick="save()" means this inside save() is not the form, so new FormData(this) builds an empty FormData. Second, the page loads jQuery via an http:// URL; if the page is served over HTTPS the browser will block that script and $/$.ajax will be undefined. Both symptoms produce no upload and no useful response.

A minimal, reliable fix is to build FormData from the form element explicitly or bind the form submit and use the form as the FormData source. Example pattern:

// attach handler and use the form element explicitly
$('#btnSave').on('click', function (e) {
  e.preventDefault();
  var formEl = document.getElementById('form');
  var fd = new FormData(formEl); // formEl is the actual form node
  $.ajax({
    url: 'ajax.php',
    type: 'POST',
    data: fd,
    contentType: false,
    processData: false,
    success: function(resp){ /* handle response */ }
  });
});

Quick troubleshooting checklist:

  • Confirm jQuery actually loads (use an HTTPS CDN or protocol-relative URL) so $ and $.ajax exist.
  • Inspect the browser console for errors like $ is not defined, CORS failures, or "FormData" issues.
  • Use the Network tab to verify the request is multipart/form-data with file parts and a boundary.
  • Server-side: check $_FILES, post_max_size, and upload_max_filesize (PHP) and validate the uploaded file handling.
  • Ensure file inputs have name attributes and are not disabled.

FormData is widely supported in modern browsers; for legacy targets a fallback (iframe upload or polyfill) is required. See FormData docs and jQuery.ajax reference for details: FormData - MDN | jQuery.ajax.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.