how to pass input type file data in ajax call

Question

I've my form

<form name="photo" enctype="multipart/form-data" action="<?php echo $_SERVER["PHP_SELF"];?>" method="post">
    Photo <input type="file" name="image" size="30" />
          <input type="submit" name="upload" value="Upload" />
</form>

The following code is used to upload an image by calling self (the same file) (the codes is from http://www.webmotionuk.co.uk/php-jquery-image-upload-and-crop-v11/)

if (isset($_POST["upload"])) { 
    //Get the file information
    $userfile_name = $_FILES['image']['name'];
    $userfile_tmp = $_FILES['image']['tmp_name'];
    $userfile_size = $_FILES['image']['size'];
    $userfile_type = $_FILES['image']['type'];
    $filename = basename($_FILES['image']['name']);
    $file_ext = strtolower(substr($filename, strrpos($filename, '.') + 1));

    //Only process if the file is a JPG, PNG or GIF and below the allowed limit
    if((!empty($_FILES["image"])) && ($_FILES['image']['error'] == 0)) {

        foreach ($allowed_image_types as $mime_type => $ext) {
            //loop through the specified image types and if they match the extension then break out
            //everything is ok so go and check file size
            if($file_ext==$ext && $userfile_type==$mime_type){
                $error = "";
                break;
            }else{
                $error = "Only <strong>".$image_ext."</strong> images accepted for upload<br />";
            }
        }
        //check if the file size is above the allowed limit
        if ($userfile_size > ($max_file*1048576)) {
            $error.= "Images must be under ".$max_file."MB in size";
        }

    }else{
        $error= "Select an image for upload";
    }
    //Everything is ok, so we can upload the image.
    if (strlen($error)==0){

        if (isset($_FILES['image']['name'])){
            //this file could now has an unknown file extension (we hope it's one of the ones set above!)
            $large_image_location = $large_image_location.".".$file_ext;
            $thumb_image_location = $thumb_image_location.".".$file_ext;

            //put the file ext in the session so we know what file to look for once its uploaded
            $_SESSION['user_file_ext']=".".$file_ext;

            move_uploaded_file($userfile_tmp, $large_image_location);
            chmod($large_image_location, 0777);

            $width = getWidth($large_image_location);
            $height = getHeight($large_image_location);
            //Scale the image if it is greater than the width set above
            if ($width > $max_width){
                $scale = $max_width/$width;
                $uploaded = resizeImage($large_image_location,$width,$height,$scale);
            }else{
                $scale = 1;
                $uploaded = resizeImage($large_image_location,$width,$height,$scale);
            }
            //Delete the thumbnail file so the user can create a new one
            if (file_exists($thumb_image_location)) {
                unlink($thumb_image_location);
            }
        }
        //Refresh the page to show the new uploaded image
        header("location:".$_SERVER["PHP_SELF"]);
        exit();
    }
}

Now I want to do this using ajax. How do I pass the file data to the processing file so that I can use something like

$('#uploadBtn').live('click', function(){
        var data = "upload=true";
        $.ajax({
            type: "POST",
            url: "process.php",
            data: data,
            cache: false,
            success: function(data){
            }
        });
    });

sanwrit · Accepted Answer · 2012-04-11 23:36:59Z

14

Well i have tried something like this with firefox and chrome:

<form id="guestForm" action="<?php echo $_SERVER["PHP_SELF"];?>" method="POST" enctype="multipart/form-data">
   <input type="file" id="fileInput" name="fileInput" />
   <input type="button" value="submit" id="ajaxSubmit" />
</form>
<script type="text/javascript">
    $(function () {
        $("#ajaxSubmit").click( function () {
            var fd = new FormData();

            fd.append( "fileInput", $("#fileInput")[0].files[0]);
            $.ajax({
                url: 'process.php',
                type: 'POST',
                cache: false,
                data: fd,
                processData: false,
                contentType: false,
                beforeSend: function () {
                    $("#output").html("Uploading, please wait....");
                },
                success: function () { 
                    $("#output").html("Upload success.");
                },
                complete: function () {
                    $("#output").html("upload complete.");
                },
                error: function () {
                    alert("ERROR in upload");
                }
            });

        });
    });
</scirpt>

I originally had this code in tandem with Java as the server side code. Although, i don't see why this wouldn't work with PHP. But, your question is how to pass input type file data in an ajax call. So this is how i did it.

answered Apr 11, 2012 at 23:36

sanwrit

1782 silver badges12 bronze badges

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

2 Comments

Phil Over a year ago

Note, FormData is supported in more recent browsers like IE 10 and above. So, this code is not applicable to people nursing dinosaur-browsers. See: developer.mozilla.org/en-US/docs/Web/API/…

WWZee Over a year ago

I know this is an older question, but what does the server side code look like for this?

Oleg Hmelevschi · Accepted Answer · 2014-03-17 04:30:10Z

1

Try this one:

$.ajax( {
  type: 'POST',
  url: 'process.php',
  data: new FormData( this ),
  processData: false,
  contentType: false,
  cache: false,
  success: function(data){
  }
});

answered Mar 17, 2014 at 4:30

Oleg Hmelevschi

234 bronze badges

Comments

Ionut Necula · Accepted Answer · 2017-03-16 09:27:59Z

-13

This is impossible.

Sending data via an ajax call is not supported from browsers.

The accepted workaround is to post the file in a hidden iframe in the background (so it looks like ajax). The solution here is to find your 'ajax file upload' library of choice and use that to upload the file.

edited Mar 16, 2017 at 9:27

Ionut Necula

11.6k4 gold badges49 silver badges72 bronze badges

answered May 9, 2011 at 19:19

Tejs

41.4k10 gold badges71 silver badges89 bronze badges

2 Comments

Eric Hodonsky Over a year ago

This is not true... Please look up the XHR2 object in JavaScript. It 100% supports it.

DalSoft Over a year ago

This is possible with most modern html5 browsers. The iframe workaround is really only if you need to support IE8 generation of browsers.

Collectives™ on Stack Overflow

how to pass input type file data in ajax call

3 Answers 3

2 Comments

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related