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