Why don't files send through ajax call?

Question

Here is my code:

$.ajax({
    url: $(this).attr("action"),
    type: 'POST',
    data: $("#myform").serialize(),
    dataType: 'JSON',
    success: function (contact) {
        console.log("done successfully");
    },
});

And my HTML:

<form action="upload.php" id="myform" method="post" enctype="multipart/form-data">
    <input  name="f_name" type="text" />
    <input type="file" name="attached_file" />
</form>

And here is the result of upload.php:

if ( !empty($_FILES['attached_file']['size']) ){ }   // false
if ( !empty($_POST['f_name']) ){ }                   // true

Which means the value of input (text type) has been sent but the file hasn't. Why? How can I fix it?