使用jquery和ajax将所选文件发送到另一个页面

Question

I have 2 textboxes and 2 radio buttons.

I can send their values to page insert.php

I added a file input. but I can't send its selected file to page insert.php

How can I do it?

My file input tag's id is file-image.

********************************************** page index.php

$("#btn-save").click(function(){
    $.post("insert.php",
        {
            title_fa: $("#txt-title-fa").val().trim(),
            title_en: $("#txt-title-en").val().trim(),
            title_visible: $('input[name=radio-visible]:checked').val(),
            title_language: $('input[name=radio-language]:checked').val()
        },
            function(data,status){
                if(status === "success")
                    {
                        alert("success");
                    }                                                
            });
});

********************************************** page insert.php

<?php      
    $title_fa = $_POST['title_fa'];
    $title_en = $_POST['title_en'];
    $title_visible = $_POST['title_visible'];
    $title_language = $_POST['title_language'];
?>

Answer 1

I have used the below code may times, here is a way to send your form data and files :

$("#btn-save").click(function(){
        var fd = new FormData();
        var file_data = $('input[name^="your_file_input_name"]')[0].files; 
        for(var i = 0;i<file_data.length;i++){
            fd.append("file_"+i, file_data[i]);
        }
        var  other_data = $("#your_form_id_here").serializeArray();
         $.each(other_data,function(key,input){
            fd.append(input.name,input.value);
        });

        $.ajax({
        url : 'insert.php',
        type : "post",
        data : fd,
        cache: false,
        contentType: false,
        processData: false,
        success : function(data){
                console.log(data); //server response

        }
    });
    });

on server side, you will receive your file in $_FILES['file_0'] and other data in $_POST array

Hope it helps !