AJAX - Problemas con el type File en un formulario

<form method="post" name="form" enctype="multipart/form-data" action="">  //formulario

<label for="foto">Imagen</label>

<input type="file" id="foto" name="foto" class="form-control">

<input type="button" name="art_button" id="art_button" value="Registrar" class="btn btn-success btn-lg" > //hasta aqui lo principal del formulario

// esto es todo lo de ajax

$("#art_button").click(function(event){

	event.preventDefault();

	var formData = new FormData();

        var files = $('#foto')[0].files[0];

        formData.append('file',files);

	$.ajax({

		url		:	"articulosalta.php",

		method	:	"POST",

		data	:	$("form").serialize(), formData,

		success	:	function(data){

   	   	         $("#art_msg").html(data);

		}

		})

	})

// el art_msg es donde me saldran los mensajes debajo del formulario

<?php

include "db.php";

$p_desc=$_POST["p_desc"];

$categoria = $_POST["categoria"];

$marca=$_POST["marca"];

$descripcion=$_POST['descripcion'];

$precio=$_POST["precio"];

$imagen=$_FILES["foto"]["name"];

$name="/^[A-Za-z0-9\s]+$/";

$number="/^[0-9]+$/";

if (empty($p_desc) || empty($categoria) || empty($marca) || empty($descripcion) || empty($precio) || empty($imagen)){

	echo "

		<div class='alert alert-warning'>

			<a href='#' class='close' data-dismiss='alert' aria-label='close'>&times;</a><b>Por favor rellene todos los campos</b>

		</div>

	";

	exit();

} else {

// y asi voy haciendo comparaciones de campos para que este todo correcto. Si le quito el formdata  y las variables en el ajax, me graba perfectametne el registro sin el fichero, pero al poner el fichero no me funciona, me pone undefined index foto en "articulosalta.php" linea 10

$imagen=$_FILES["foto"]["name"];

$imagen=$_FILES["file"]["name"];

$imagen=$_FILES["file"][0]["name"];