Wednesday, 10 August 2016

Using jQuery FormData to include files when making POST request

In this example I create a form, with a text, and file input field. When I submit the form, contents from all input fields are submitted through the 'FormData' class. The results from the called script are returned to a div. Finally, the fields are then cleared.
<html>
<head>
    <title>jQuery File Upload</title>
</head>
<body>
    <form action="upload.php" method="POST" enctype="multipart/form-data">
        <input type="text" name="myname" />
        <input type="file" name="fileinfo" multiple="" />
        <button type="submit">Submit</button>
    </form>
    <div id="result"></div>
    <script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
    <script>  
    (function()
    {
        $('form').on('submit', function(e)
        {
            var theDiv = $('div#result');
            var thisForm = $(this);
            var action = thisForm.attr('action');
            var method = thisForm.attr('method');
            $.ajax(
            {
                url: action,
                type: method,
                data: new FormData(this),
                processData: false,
                contentType: false
            }).done(function(datareceived)
            {
                thisForm.find('input, textarea').val('');
                theDiv.html(datareceived);
            });
            e.preventDefault();
        });
    })();
    </script>
</body>
</html>

To test if it works I use upload.php. See
<?php
$str = NULL;
foreach($_FILES as $file)
{
    if(move_uploaded_file($file['tmp_name'], $file['name']) == FALSE)
    {
        $str .= $file['name'].' not uploaded<br />';
    }
}
$str .= '<br />POST items include : <br />';
foreach($_POST as $postitem => $value)
{
    $str .= 'Name : '.$postitem.' Value : '.$value.'<br />';
}
echo $str;
?>

No comments:

Post a Comment