0

How can I send an image from an input element with Javascript?

This is my image element:

<input type="file" name="imagefile" onChange="fileThumbnailHeader(this.files);" accept="image/*" id="header-img-upload" class="header-img-upload" />

And here is my function where I post other text fields with:

function registerDetails(){

    var register_location = document.getElementById('register_location').value;
    var register_country = document.getElementById('register_country').value;
    var register_language = document.getElementById('register_language').value;
    var register_interests = document.getElementById('register_interests').value;
    var register_homepage = document.getElementById('register_homepage').value;
    var register_music = document.getElementById('register_music').value;
    var register_films = document.getElementById('register_films').value;
    var register_books = document.getElementById('register_books').value;
    var register_relationship = document.getElementById('register_relationship').value;
    var register_age = document.getElementById('register_age').value;
    var register_school = document.getElementById('register_school').value;
    var register_phone = document.getElementById('register_phone').value;
    var register_job = document.getElementById('register_job').value;    
    $.post( versionMode + "register_step_one_update.php",{city : register_location, country : register_country, language : register_language, tags : register_interests, website : register_homepage, music : register_music, movies : register_films, books : register_books, relation : register_relationship, age : register_age, school : register_school, phone : register_phone, job : register_job}, function( data ) {
        alert(data);

    });

}

How can I send the image with it?

Nisse Engström
  • 4,738
  • 23
  • 27
  • 42
Lukas Becker
  • 5
  • 2

1 Answers1

2

<script>
$("form[name='uploader']").submit(function(e) {
  // var file = $("#userfile")[0].files[0]; //try this too
  // var fileName = file.name;
  $.ajax({
    url :"url_for_the_php_page",
    type:"POST",
    data: new FormData(this), // Data sent to server, a set of key/value pairs (i.e. form fields and values)
 contentType: false,       // The content type used when sending data to the server.
 cache: false,             // To unable request pages to be cached
 processData:false,        // To send DOMDocument or non processed data file it is set to false
    success:function(msg){
     // alert(msg);
    }
  });
  return false;
});  
</script>
<html>
  <form id="uploader" name="uploader" accept-charset="utf-8" enctype="multipart/form-data"><!-- no action include in the form open -->
   <input type="file" name="userfile"  id="userfile" class="file" value="" > <!-- this is the file upload field -->
   <input type="text" name="register_location"  id="register_location" class="" value="" >
   <input id= "submit_button" name = "submit_button" type="submit" value="Upload">
  </form>
<html>
<?php
// in your php page you can access those fields as follows
   $userfile = $_POST['userfile'];
   $register_location = $_POST['register_location'];
?>
Nadeesha Lakmal
  • 433
  • 5
  • 9