Super Simple File Upload Example
Super Simple File Upload Example

Hi All,
I was wondering if it was possible to provide a super simple file upload example? I just want to upload a single file to the server and for a JSON response to come back. Here is what I currently have:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
<title>Test</title>
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/buttons/1.6.1/css/buttons.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/select/1.3.1/css/select.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="/test/css/editor.dataTables.min.css">
<script type="text/javascript" src="//code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="//cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="//cdn.datatables.net/buttons/1.6.1/js/dataTables.buttons.min.js"></script>
<script type="text/javascript" src="//cdn.datatables.net/select/1.3.1/js/dataTables.select.min.js"></script>
<script type="text/javascript" src="/test/js/dataTables.editor.min.js"></script>
</head>
<body>
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>First name</th>
<th>Last name</th>
</tr>
</thead>
</table>
<script type="text/javascript">
var table;
var editor;
$(document).ready(function() {
editor = new $.fn.dataTable.Editor( {
idSrc: "id",
ajax: "/test/server-upload.php",
table: "#example",
fields: [{
name: "firstName",
type: "upload"
}]
} );
table = $('#example').DataTable( {
dom: "Bfrtip",
ajax: "/test/server-upload.php",
columns: [
{ data: "firstName" },
{ data: "lastName" }
],
select: true,
buttons: [
{ extend: "create", editor: editor },
{ extend: "edit", editor: editor },
{ extend: "remove", editor: editor }
]
} );
} );
</script>
</body>
</html>
On submit, my browser shows this as the params:
https://gyazo.com/7346aaafc76de169a418c965e91aca4c
I am not sure why, but I can't seem to get just a super simple file upload working. So no database integration, just a simple prototype page. Any ideas on how to fix?
Thank you!
This question has an accepted answers - jump to answer
Answers
Yup - that's a multi-part MIME upload, which is what I would expect for a file upload via Ajax / HTTP.
On the server-side use
).
print_r( $_FILES )
and you should see information about the uploaded file in the return (it will be invalid JSON, but that doesn't matter for a quick debugging checkAllan
Alan that was perfect, thank you very much! It gave me exactly what I needed
Thank you