how to pass the data of input file to the another file.php with javascript

Question

I have a problem with the file of js Which is send all the data form with an src image except the input file data

$(document).ready(function(){
    //PURE PATH TO IMAGE GENERATING PHP FILE
    var base = $(".preview img").attr("src");
     
    //GATHER IMAGE FOR FIRST TIME
    $(".preview img").attr("src",base+'?'+$(".form-horizontal").serialize());
         
    //KEYUP EVENT AND NEW IMAGE GATHER
    $(".form-horizontal input,textarea").stop().keyup(function(){
        $(".preview img").attr("src",base+'?'+$(".form-horizontal").serialize());  
    });
 
    $("#getResults").click(function(){
        $("#resultsUrl").val($(".preview img").attr("src"));
        $("#link").show("slow");
    });
     
});

<form method="post" action="member_save.php">
<input type="text"  name="firstname"  required>
 
<input type="text"  name="lastname"  required>
<input type="file"    name="image" accept="image/*" required>
<button name="submit" type="submit">save</button>
</form>
<div id="preview" class="preview">   
<img src="mpdf-master/recto.php" style=" margin-right:-72%; width:70%; />'].""
</div>

Possible duplicate of [Uploading both data and files in one form using Ajax?](https://stackoverflow.com/questions/10899384/uploading-both-data-and-files-in-one-form-using-ajax) — jkp, May 29 '17 at 11:41

score 0 · Answer 1 · answered May 29 '17 at 11:45

Define Jquery

<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

AND submit form using jquery like this

<script type="text/javascript">
    $(document).ready(function() {
        $("#form_img").submit(function(e){
            e.preventDefault();
            var formData = new FormData($("#form_img")[0]);

            $.ajax({
                url : $("#form_img").attr('action'),
                type : 'POST',
                data : formData,
                contentType : false,
                processData : false,
                success: function(resp) {
                    console.log(resp);                   
                }
            });
        });
    });

</script>

Write form tag like this:

<form action="test.php" method="post" id="form_img" enctype="multipart/form-data" accept-charset="utf-8">
</form>

how to pass the data of input file to the another file.php with javascript

1 Answers1